読み込みの高速化/帯域幅の削減のためのCSSの削減

9

CSSの圧縮/帯域幅の点で価値のある特定のページの未使用のルールを削除していますか、またはこのオーバーヘッドを実際に削除するためにキャッシング（ヘッダー/最終変更）に依存できますか？

乾杯

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

optimization css bandwidth

— エイデンベル
ソース

8

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

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

— マシュー・シャンリー
ソース

1

つまり、あるページのファイルサイズを他のページの固有のCSSまたは埋め込みCSSにオフロードすることで削減している場合、キャッシュの利点が無効になっているだけです。ユーザーに2〜Xページで優れたエクスペリエンスを提供するために、1ヒット前に打つことをお勧めします。したがって、CSSをできるだけクリーンにします。複数を1つに結合します。ただし、1回限りのヒットを（わずかに）減らすために、冗長な一意のコードを作成しないでください。

— bpeterson76 2010

2

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

— ジェセガビン
ソース

2

より大きな影響を与える最適化の潜在的な場所はもっとたくさんあります...

厳密にパフォーマンスの向上を求めている場合、CSSソースの最適化はフードチェーンではかなり低くなります。

CSSソースの過剰な残骸は、スタイルシートが最初にロードされたときにマイナーヒットになります。それ以降は、キャッシングで問題に対処する必要があります。

— エヴァン・プレイス
ソース

1

あなたがものを取り除くことができるときはいつでも、無視できるほどであるなら、あなたはロードの速度を改善します。また、コードを明確にするために、使用していないものも削除することをお勧めします。

— ジェイソン
ソース

例として、各ページがルールの約30％のみを使用する主要なtheme.cssファイル...が混在していると、修正により分割が近づきます。

— エイデンベル

0

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

— トラビスノースカット
ソース

0

未使用のCSSをいくつか削除すると、1つのページの読み込み時間が明らかに改善されますが、それを複数のページの効果とバランスさせる必要もあります。また、HTTPリクエストが多すぎないようにする必要もあります。

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

— 不満の山羊
ソース

0

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

これの多くは、サイトの利用状況プロファイルに関係しています。本当にベタベタしている場合は、キャッシングで勝つことができます。ただし、直帰率が高い場合は、最適化されたCSSを使用するほうがよい（または、CSSの最適化に時間を費やしてサイトを粘着性にする！）

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

— ジェイソンバーチ
ソース

0

両方の世界から最高のものを取得し、実行時にファイルを縮小して、出力を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

第三に：利益？

— 崩壊剤
ソース