Speed」のドキュメントから、ウェブサイトのパフォーマンスを最適化する方法を紹介します。Practices下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。cachingキャッシュの最適化ブラウザのキャッシュを活用JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。アドバイススタティックなリソースは全て、積極的にキャッシュにセットします。時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。IEでも確実にキャッシュされるように、Varyヘッダは削除します。URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のランダムな文字列と衝突しないように8文字より多くします。プロキシのキャッシュを活用プロキシサーバーのキャッシュを利用すると、初めてアクセスしたユーザーでもキャッシュを利用することができます。アドバイススタティックなリソースのURLには、クエリを含めないでください。クッキーを設定したリソースには、プロキシのキャッシュは利用しないでください。gzipしたJSやCSSファイルは、いくつかのプロキシサーバで適切に圧縮解除できない場合があるため、そのリソースをキャッシュさせないか、圧縮したものと圧縮解除したもの2つのバージョンをキャッシュするようにします。time)を減らすDNSルックアップを減らす対象となるホスト数を最小にすることで、DNSルックアップを減らすことができます。アドバイスできるだけホスト名の代わりに、URLパスを使用してください。外部JavaScriptファイルは、メインのドキュメントと同じホストから提供してください。リダイレクトを減らすリダイレクトはHTTPリクエスト数を増加させるので、技術的に必要な場合だけ使用します。アドバイス不必要なリダイレクトは削除してください。ユーザーがタイプするURLのためには、サーバーのリライトを使用してください。バックグランドでトラフィックを追跡してください。JavaScriptやmetaのリダイレクトより、HTTPリダイレクトを使用してください。外部JavaScriptはまとめる複数の外部JavaScriptファイルをまとめることで、ロード時間を短縮できます。外部JavaScriptファイル数は最大で3つ、できれば2つにします。アドバイス2つに分ける際は、ページのレンダリングに必要なものとロードが完了してから使用するものに分けます。キャッシュされるべきでないものはインライン化を検討してください。スクリプトは外部でもインラインでもhead内に配置してください。外部CSSはまとめる外部JavaScriptと同様にファイルをまとめます。ファイル数は最大で3つ、できれば2つにします。アドバイス2つに分ける際は、ページのレンダリングに必要なものとロードが完了してから使用するものに分けます。キャッシュされるべきでないものはインライン化を検討してください。@importは使用しないでください。スタイルシートはhead内に配置してください。スタイルシートとスクリプトを最適化スタイルシートとスクリプトの最適化を行い、ダウンロードにおける遅延を妨げます。アドバイス可能であるなら、外部JavaScriptは外部CSSの後に記述してください。可能であるなら、インラインのJavaScriptは外部CSSと外部JavaScriptの後に記述してください。インラインのJavaScriptが外部JavaScriptに依存している場合は、外部CSSの前に記述してください。異なるホストから並列ダウンロードHTTP1.1で1つのサーバーに同時接続できる上限は2つとされています。この制限を複数のホストからリソースを提供することで切り抜けることができます。アドバイスホストの利用はバランスよくします、100のリソースで4つのホストの場合は各ホスト25のリソースにします。1つのホストの上限は38までにします。外部JavaScriptが並列ダウンロードをブロックするのを阻止してください。同じリソースは、常に同じホストから提供してください。sizeHTTPリクエストを減らすクッキーのサイズを減らすクッキーは1パケット(最大で約1500バイト)を超えないように、可能な限り減らします。できれば、400バイト以下を勧めます。アドバイスユニークな認証だけをクッキーに保持し、他のデータはサーバーに保持してください。使用していないフィールドは削除してください。クッキーレスのドメインからスタティックなリソースをサポートクッキーを必要としない画像やJS・CSSファイルなどスタティックなコンテンツは、クッキーをサポートしないドメインからサービスするようにします。アドバイスめったに変化のないリソースは、プロキシにキャッシュしてください。ページのスタートアップに必要な外部JavaScriptはメインドキュメントと同じホストにしてください。sizeロードサイズを減らすgzipでリソースを圧縮CSSやJavaScriptファイルをgzipで圧縮して使用すると、ダウンロード時間を劇的に短縮することができます。ファイルの容量は150~1,000バイトのものを推薦します。150バイト以下のファイルをgzipするとより大きくなってしまいます。アドバイスHTMLやCSSの属性や値は可能な限り同じ順番で記述(アルファベット順)し、コードに一貫性を持たせてください。Googleの検索結果ページでアルファベット順に並べたところ、gzipのサイズが1.5%減少しました。画像やバイナリファイル(ビデオやPDFなど)には、gzipは使用しないでください。使用していないCSSは取り除くブラウザはページをレンダリングする際、ファイルに含まれる全てのスタイルシートの規則を評価するため、不必要なものは削除します。アドバイス表示しているページに使用されていないCSSは、全て削除してください。多くのページで共有しているCSSは、特定のページのみに使用するために小分けにすることを検討してください。スタイルを生成するためのJavaScriptを使用する際は、不必要なページで呼び出されていないことを確認してください。Compressorを使用して、JavaScriptファイルを圧縮しサイズを減らします。JavaScriptのロードの遅延ページのスタートアップに必要のないスクリプトは、ロードを遅らせてページのレンダリングの邪魔をしないようにします。画像は適切に減色し、適切なフォーマットで使用します。アドバイス画像は、実際に配置するサイズと同じサイズにしてください。gifなど画像にあったフォーマットを使用してください。pngは圧縮して使用してください。画像をはじめ、.cssや.jsファイルは、常に一貫したURLからサービスされるようにします。アドバイス「www.example.com」で、「/images/example.gif」と「www.example.com/images/example.gif」を参照するなら、URLは一貫しています。「/images/example.gif」と「mysite.example.com/images/example.gif」を参照するなら、URLは一貫していません。複数のページで共有されるリソースには、同一のURLを使用していることを確認してください。renderingレンダリングの最適化CSSのセレクタは効率よく使用CSSはセレクタを効率よく使用すると、ページのレンダリングが早くなります。非効率的であると考えられるもの子孫セレクタの使用は、非効率的であると考えられます。a{...}子セレクタの使用は、非効率的であると考えられます。{...}※子孫セレクタよりパフォーマンスは望ましいです。擬似セレクタの使用は、非効率的であると考えられます。アンカー要素以外に使用するときは、特に問題です。div:hoveridセレクタと一緒の使用は、非効率的であると考えられます。{...}アドバイスユニバーサルセレクタ(*)は避けてください。タグセレクタではなく、classやidセレクタを使用してください。子孫セレクタの使用時に、不必要な先祖は使用しないでください。子孫セレクタの代わりに、classセレクタを使用してください。アンカーではない要素に擬似セレクタの使用は避けてください。代わりに、JavaScriptの「onmouseover」を使用してください。expressionはパフォーマンスが悪いため使用しないで、別の方法で同等の機能を実装するようにします。アドバイス可能であるなら、スタンダードモードでCSSは記述してください。IE用にexpressionは使用しないで、純粋なJavaScriptで記述してください。全ての外部スタイルシートがダウンロードされてから、ブラウザはページのレンダリングを開始するので、スタイルシートはhead内に配置します。アドバイス@importは使用しないでください。<style>ブロックは、head内に配置してください。画像のサイズ指定ページに使用している全ての画像のwidthとheightを正しく指定してください。アドバイス実際の画像と同じサイズを指定してください。60x60の画像を30x30で指定しないでください。興味がある方には、下記の本がお勧めです。