빠른 로딩 / 더 적은 대역폭을위한 CSS 감소

9

대역폭 측면에서 가치가있는 특정 페이지에 대해 CSS 압축 / 사용하지 않는 규칙 제거가 있습니까? 아니면 캐싱 (헤더 / 마지막 수정)을 사용 하여이 오버 헤드를 야생에서 제거 할 수 있습니까?

건배

또한 베타 모두와 행운을 빕니다!

optimization css bandwidth

— 에이든 벨
소스

8

파일 크기를 줄이면 대역폭이 줄어들고 페이지로드 시간이 단축됩니다. 사용자가 사이트에 처음 방문하면 캐시 된 내용이 없으며 대부분의 사이트에서 처음 방문한 방문자는 대부분 트래픽입니다.

또한 gzip 압축이 활성화되어 있는지 확인하십시오. 이것은 대역폭을 줄이기 위해 과감한 양을 할 것입니다.

— 매튜 샨리
소스

1

즉, 한 페이지에서 다른 페이지의 고유하거나 포함 된 CSS로 파일을 오프로드하여 파일 크기를 줄이면 캐싱의 이점을 무시한 것입니다. 2-X 페이지에서 사용자에게 멋진 경험을 제공하기 위해 한 번의 조회만으로 수행하는 것이 가장 좋습니다. 따라서 CSS를 최대한 깨끗하게 만드십시오. 여러 개를 하나로 결합하십시오. 그러나 일회성 적중을 줄이기 위해 중복되고 고유 한 코드를 만들지 마십시오.

— bpeterson76

2

나는 그것이 하나 이상이라고 생각하지 않습니다. 파일 크기를 줄이면 처음 파일에 액세스 할 때 도움이됩니다. 캐싱은 두 번째 방문에 도움이됩니다.

— jessegavin
소스

2

더 큰 영향을 미치는 최적화를위한 더 많은 잠재적 인 장소가 있습니다 ...

엄격한 성능 향상을 원한다면 먹이 사슬에서 CSS 소스 최적화가 매우 낮습니다.

CSS 소스를 과도하게 사용하면 스타일 시트를 처음로드 할 때 약간의 타격이 발생합니다. 캐싱은 그때부터 문제를 처리해야합니다.

— 에반 플라이스
소스

1

물건을 제거 할 수있을 때마다 무시할 만하면 로딩 속도가 향상됩니다. 또한 코드 선명도를 위해 사용하지 않는 것을 제거하는 것이 좋습니다.

— 제이슨
소스

예를 들어, 각 페이지가 규칙의 약 30 % 만 사용하는 주요 theme.css 파일은 ...하지만 믹스로 인해 수정 사항이 약간 나빠질 수 있습니다.

— 에이든 벨

0

사이트의 역학에 달려 있다고 생각합니다. 반복 방문자가 많고 신규 방문자가 많지 않은 경우 캐싱으로 충분합니다. 그러나 신규 방문자가 많고 (특히 첫인상을 좋게하려면) CSS 크기를 최대한 줄여야한다고 생각합니다.

— 트래비스 노스 컷
소스

0

사용하지 않는 CSS를 제거하면 한 페이지에서로드 시간이 분명히 향상되지만 여러 페이지에 미치는 영향과 균형을 유지해야합니다. 너무 많은 HTTP 요청을 피하려고합니다.

CSS gzipping은 CSS 로딩 속도를 높이는 가장 효과적인 방법입니다. gzip 이후에는 모든 것이 들어있는 파일과 불필요한 블록이 제거 된 파일의 차이점은 무시할 수 있습니다.

— 불만을 품은 염소
소스

0

페이지 단위로 사용하지 않는 CSS를 제거하여 성능이 저하 되더라도 (다른 페이지에 대해 이야기하지 않는 한 캐싱이 이보다 중요하다는 것을 확신합니다) 유지 관리 시간을 고려해야합니다. . Google이 아니라면 사이트 수명 기간 동안 며칠을 소비하여 각 사용자를 10 분의 1 초씩 절약 할 필요는 없습니다.

이 중 많은 부분이 사이트의 사용 프로필과 관련이 있습니다. 정말 끈적 거리면 캐싱이 성공합니다. 그러나 이탈률이 높은 경우 최적화 된 CSS를 사용하는 것이 좋습니다 (또는 CSS 최적화에 시간을 소비하여 사이트를 더 끈적하게 만드는 것).

페이지 별 마크 업이있는 경우 취할 수있는 한 가지 방법은 일반적인 사이트 전체 CSS 파일을 갖고 HTML 문서의 헤드에 페이지 별 규칙을 포함시키는 것입니다.

— 제이슨 버치
소스

0

두 세계에서 최고를 얻고 실행 시간에 파일을 최소화하고 출력을 압축하십시오.
소스 파일은 편집해야 할 때 여전히 읽을 수 있지만 다운로드 할 때 압축됩니다

첫 번째 : htaccess를 사용하여 아파치에게 모든 CSS 파일을 PHP 스크립트로 취급하고 text / css 유형일 때 출력을 압축하도록 지시하십시오.

.htaccess에서 AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

둘째 : 다운로드가 시작되기 전에 CSS 코드를 최소화하기 위해 콜백 함수와 함께 출력 버퍼링을 사용하고 파일이 캐시되도록 만료 시간을 설정하십시오

당신의 CSS 파일에

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

셋째 : 이익?

— 붕해 기
소스