web-dev-qa-db-ja.com

@mediaに関してCSSファイルを結合する

High Performance Websites および Even Faster Web Sites からの通常の高速化された配当があるWebサイトがあります。

ただし、スタイルシートを無視し（以下に示す困難のため）、1600ミリ秒のページ読み込みの500ミリ秒をCSSが占めるようになりました（両方の結果の比率はベンチマーク全体でかなり一貫しています-実際の数値ここに描かれているのは、私たちが手にしなければならない最も便利なベンチマークからのものです）。

セレクターをより効率的にするのと並行して、HTTPリクエストの総数を減らす必要があります。次に例を示します（簡潔にするためにtext="text/css" charset="utf-8"なし）：

<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="page.css" media="all" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="alternative stylesheet" href="print.css" media="all" title="Print" />

これは一般的な設定（グローバルスタイルシート、ページ/カテゴリごとのスタイルシート、印刷レイアウト）のように見えますが、すべてのオプションに両刃の剣があるため、実行可能な解決策を見つけるのに大きな問題があります。

  • global.cssとpage.cssは組み合わせることができますが、ユーザーが特別なページ/カテゴリーにジャンプし続けている場合、global.cssはpage.cssとともに（page.cssはカテゴリー/特別ページごとに）何度もダウンロードされます。単独で提供

  • print.cssファイルを組み合わせてCSS2 @mediaルールを使用できますが、CSS1ブラウザーでは動作しません（このサイトはIE6で動作する必要があります）

  • rel="alternative stylesheet" media="all" title="Print"を使用してリンクされたprint.cssのバージョンは必要ないように見えますが、開発者は Cargo Culted それが何であるかを知らずにすべてのプロジェクトでそれを削除します。

これは非常に一般的な設定のようであるため、同様の設定に直面したときに他の人が行ったことは何ですか？印刷用の代替スタイルシートに光を当てることはできますか？

cssperformance
5
Metalshark

Page.cssは1つだけですか、それともページやカテゴリごとに異なるバージョンがありますか？

1つしかない場合、次のことをお勧めします。

  • Global.cssとpage.cssを1つのスタイルシートに結合します。最初のリクエストの後、ユーザーはとにかくこれのキャッシュされたバージョンを持つことになります。

  • @mediaを使用して、印刷ルールを上記のスタイルシートにマージします。その後、IE6に条件付きコメントを追加して、機能する印刷スタイルシートのみを提供できます。

  • 「代替スタイルシート」は、サポートしているブラウザに、メインのスタイルシートの代わりにこのスタイルシートを使用する選択肢を提供します。あなたの場合、これはユーザーに「印刷可能なビュー」を提供する簡単な方法のようです。これを保持したい場合は、print.cssを個別に保持する必要があるため、印刷ルールをメインファイルにマージする必要はありません。

あなたがリンクした本が言っていると確信しているように、あなたはこれらのスタイルシートを圧縮され、有効期限ヘッダーで提供して利益を最大化したいと思うでしょう。

3
Tim Fountain