web-dev-qa-db-ja.com

より高速なロード/少ない帯域幅のためのCSSの削減

CSSの圧縮/特定のページの未使用ルールの削除は帯域幅の観点から価値がありますか、それともキャッシング（ヘッダー/最終変更）に依存してこのオーバーヘッドを削除できますか？

乾杯

また、ベータ版の皆さん、頑張ってください！

optimizationcssbandwidth
9
Aiden Bell

ファイルのサイズを小さくすると、帯域幅が確実に減少し、ページの読み込み時間が短縮されます。ユーザーが初めてサイトにアクセスすると、何もキャッシュされません。ほとんどのサイトでは、訪問者がトラフィックの大半を占めています。

さらに、gzip圧縮が有効になっていることを確認してください。これにより、帯域幅が大幅に削減されます。

8
Matthew Shanley

より大きな影響を与える最適化のための潜在的な場所がはるかに多くあります...

厳密にパフォーマンスの向上を求めている場合、CSSソースの最適化は食物連鎖ではかなり低いです。

スタイルシートが最初にロードされたときに、CSSソース内の余分なデータがマイナーヒットします。キャッシュはそれ以降の問題を処理する必要があります。

2
Evan Plaice

どちらかだとは思いません。ファイルサイズを小さくすると、ユーザーが初めてファイルにアクセスするときに役立ちます。キャッシングは2回目の訪問時に役立ちます。

2
jessegavin

アイテムを削除できるときはいつでも、ごくわずかですが、ロードの速度が向上します。また、コードを明確にするために、使用していないものも削除することをお勧めします。

1
Jason

両方の世界から最高のものを取得し、実行時にファイルを縮小し、出力をgzipできます。
ソースファイルは編集する必要がある場合でも読み取り可能ですが、ダウンロードすると圧縮されます

最初：htaccessを使用して、すべてのcssファイルをphpスクリプトとして扱い、text/cssタイプの場合に出力を圧縮するようにApacheに指示します

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

2番目：出力バッファリングをコールバック関数とともに使用して、ダウンロードを開始する前に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

第三：利益？

0
The Disintegrator

私はそれがあなたのサイトのダイナミクスに依存していると思うでしょう。リピート訪問者が多く、新規訪問者が多くない場合は、おそらくキャッシュで十分です。ただし、新しいビジターがたくさんいる場合（特に第一印象を良くしたい場合）、CSSのサイズをできるだけ小さくする必要があると思います。

0
Travis Northcutt

いくつかの未使用のCSSを削除すると、明らかに1つのページの読み込み時間が改善されますが、複数のページにわたる効果とバランスを取る必要もあります。また、あまりにも多くのHTTP要求を避けたい場合もあります。

CSSのgzip圧縮は、CSSの読み込みを高速化する最も効果的な方法です。すべてが入っているファイルと、いくつかの不要なブロックが削除されている別のファイルの違いは、gzipの後で無視できます。

0
DisgruntledGoat

未使用のCSSをページごとに削除することでパフォーマンスが低下した場合（そして、大幅に異なるページについて話している場合を除き、キャッシュはこれを上回ると確信しています）、そうするために必要なメンテナンス時間を考慮する必要があります。あなたがGoogleでない限り、各ユーザーを10分の1秒節約するために、サイトの存続期間中に数日間費やす価値はおそらくないでしょう。

これの多くは、サイトの使用プロファイルに関係しています。本当に粘り気があるなら、キャッシングが勝者になります。ただし、直帰率が高い場合は、最適化されたCSSを使用することをお勧めします（または、CSSの最適化に時間を費やしてサイトをより安定させます！）。

ページ固有のマークアップがある場合に取ることができる1つのアプローチは、一般的なサイト全体のCSSファイルを用意し、HTMLドキュメントのヘッドにページごとのルールを埋め込むことです。

0
JasonBirch