した方が良いのか知りたい
<link>
A)またはを使用して外部CSSファイルを含める
B) CSS を に直接エコー/フラッシュ/印刷し<head>
ます。
個人的にはオプション B が好きです。
- コメントの削除 / 縮小
- ルート ディレクトリの上に配置された css を使用する
- 複数の css ファイルを圧縮する = HTTP リクエストを減らす
これを実践する前に、私がすべき大きな理由はありますか?
した方が良いのか知りたい
<link>
A)またはを使用して外部CSSファイルを含める
B) CSS を に直接エコー/フラッシュ/印刷し<head>
ます。
個人的にはオプション B が好きです。
これを実践する前に、私がすべき大きな理由はありますか?
オプション A は追加の HTTP リクエストを提供しますが、ブラウザーは CSS ファイルをキャッシュに保持するので、大したことではありません。
一方、オプション B で HTTP リクエストを節約できたとしても、HTML ページが頻繁に変更されると、HTML ページがかなり大きくなり、ブラウザーは HTML ページをキャッシュできなくなります。したがって、サーバーはより多くのデータ転送を処理する必要があります。
コンテンツがめったに変更されないページの場合は、オプション B を使用します。それ以外の場合は、オプション A を使用します。
非常にトラフィックの多い Web サイトを計画している場合は、B を選択します (以下で説明するように、Google のフロント ページのように、html がほとんど変更されない限り、これはお勧めできません)。個人的には A が好きです。スタイルを HTML から遠ざけることができ、さまざまなメディアに特定のスタイルシートを使用したり、あるスタイルから別のスタイルに簡単に切り替えることさえできるからです。また、保守 (バージョンを使用) と拡張も容易です。
リクエストが心配な場合は、画像で作業してください。css にすべての画像を base64 として追加し、それを使用して多くのリクエストを防ぐか、複数のアイコンに画像パン技術を使用することができます。
スクリプトまたはサーバー側のコーディングを使用して、css をオフラインで縮小し、すべての css スタイルシートを 1 つのファイルに入れることもできます。
私の5セント。
キャッシングの目的でオプション (A) を使用することをお勧めしますが、オプション B の利点も同様に得ることができます。css ファイルに php 拡張子を付けて名前を付け、それを link タグに含めるだけです。PHP はこのファイルをブラウザに送信する前に解析するので、コメントを削除したり、縮小したり、サーバー上の任意の場所にある css ファイルを含めたりできます。3 番目のポイントについては、ブラウザがそれをキャッシュする場合、最初は 2 つのリクエストですが、2 回目は 1 つのリクエストしかないため、全体的にリクエストが少なくなります。
長期的には、ドキュメントの head 内のタグを介して外部スタイルシートをロードする方がはるかに優れています。これにより、ブラウザはスタイルシートがロードされるとキャッシュできるため、ページ要求ごとにスタイルシートをダウンロードする必要がなくなります。
スタイルシートの縮小が心配な場合は、いくつかのツールを使用して実行できます - CSS 縮小の推奨事項を参照してください。多くの推奨事項について。
簡単な答えは、方法 B を使用するべきではないということです。そのようにすべきではないと私が考える理由を以下で読むことができます。
メインの HTML ファイルのファイルサイズはできるだけ小さくしておく必要があります。これは、そのファイルをキャッシュできないためです (ほとんどの場合、その動的な性質のため)。
ローカルでテストするときは、時期尚早の最適化を行うべきではありません。ただし、コードをデプロイするときは、CSS を縮小し、すべてのファイルを 1 つのファイルに結合する必要があります。また、CSS ファイルに遠い将来の期限切れヘッダーを与えることを忘れないでください (キャッシュは非常に重要です)。
Web サイトを高速化するための Yahoo! のベスト プラクティスは、Web サイトを高速化する方法についても多くの情報を提供します (私の回答の多くはその読み物に基づいています)。
正解は、ページの目的とスタイルの構成方法によって異なります。
私が取り組んでいるサイトには、ページ速度が重要な要素であるいくつかの重要なページがあります(たとえば、ユーザーがソフトウェアをダウンロードできるランディングページ)が、複数のページまたは複数のページを表示する訪問者のためにCSSをキャッシュすることも必要です。近い将来戻ってくるかもしれません。
また、CSSファイルが1つしかないこともめったにありません。一般的な設定は、次のようになります。cssリセットファイルすべてのページで共有されるサイトの一般的なスタイルを含むtemplate.cssファイルページごとのcssファイルではないページの特定のルールを定義するInternetExplorerとの互換性のためにIEfixcssファイルをキャッシュする必要があります
css reset、template.css、およびIRfixファイルは、キャッシュされる単一の外部ファイルとしての縮小に適しています。
ページごとのcssファイルは、再利用することを意図しておらず、httpリクエストのコストは通常、転送されたバイトの時間コストよりも高いため、タグに含めるのに適しています。
サイト全体で共有されていない特定のスタイルのページがある場合は、すべてをインライン化します。