Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法

Web Performance Best Practices


下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。


(一)キャッシュの最適化

(二)往復遅延時間を減らす

(三)HTTPリクエストを減らす

(四)ロードサイズを減らす

(五)レンダリングの最適化

(六)関連書籍

1. Optimize caching

キャッシュの最適化

ブラウザのキャッシュを活用

JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。

アドバイス

●スタティックなリソースは全て、積極的にキャッシュにセットします。

●時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。

●IEでも確実にキャッシュされるように、Varyヘッダは削除します。

●URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のランダムな文字列と衝突しないように8文字より多くします。

プロキシのキャッシュを活用

プロキシサーバーのキャッシュを利用すると、初めてアクセスしたユーザーでもキャッシュを利用することができます。

アドバイス

●スタティックなリソースのURLには、クエリを含めないでください。

●クッキーを設定したリソースには、プロキシのキャッシュは利用しないでください。

●gzipしたJSやCSSファイルは、いくつかのプロキシサーバで適切に圧縮解除できない場合があるため、そのリソースをキャッシュさせないか、圧縮したものと圧縮解除したもの2つのバージョンをキャッシュするようにします。

2. Minimize round trip times

往復遅延時間︵Round-trip 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が並列ダウンロードをブロックするのを阻止してください。

●同じリソースは、常に同じホストから提供してください。

3. Minimize request size

HTTPリクエストを減らす

クッキーのサイズを減らす

クッキーは1パケット︵最大で約1500バイト︶を超えないように、可能な限り減らします。できれば、400バイト以下を勧めます。

アドバイス

●ユニークな認証だけをクッキーに保持し、他のデータはサーバーに保持してください。

●使用していないフィールドは削除してください。

クッキーレスのドメインからスタティックなリソースをサポート

クッキーを必要としない画像やJS・CSSファイルなどスタティックなコンテンツは、クッキーをサポートしないドメインからサービスするようにします。

アドバイス

●めったに変化のないリソースは、プロキシにキャッシュしてください。

●ページのスタートアップに必要な外部JavaScriptはメインドキュメントと同じホストにしてください。

4. Minimize payload size

ロードサイズを減らす

gzipでリソースを圧縮

CSSやJavaScriptファイルをgzipで圧縮して使用すると、ダウンロード時間を劇的に短縮することができます。ファイルの容量は150～1,000バイトのものを推薦します。150バイト以下のファイルをgzipするとより大きくなってしまいます。

アドバイス

●HTMLやCSSの属性や値は可能な限り同じ順番で記述︵アルファベット順︶し、コードに一貫性を持たせてください。
Googleの検索結果ページでアルファベット順に並べたところ、gzipのサイズが1.5%減少しました。

●画像やバイナリファイル︵ビデオやPDFなど︶には、gzipは使用しないでください。

使用していないCSSは取り除く

ブラウザはページをレンダリングする際、ファイルに含まれる全てのスタイルシートの規則を評価するため、不必要なものは削除します。

アドバイス

●表示しているページに使用されていないCSSは、全て削除してください。

●多くのページで共有しているCSSは、特定のページのみに使用するために小分けにすることを検討してください。

●スタイルを生成するためのJavaScriptを使用する際は、不必要なページで呼び出されていないことを確認してください。

Minify JavaScript

JSMinやYUI Compressorを使用して、JavaScriptファイルを圧縮しサイズを減らします。

JavaScriptのロードの遅延

ページのスタートアップに必要のないスクリプトは、ロードを遅らせてページのレンダリングの邪魔をしないようにします。

画像の最適化

画像は適切に減色し、適切なフォーマットで使用します。

アドバイス

●画像は、実際に配置するサイズと同じサイズにしてください。

●png, jpg, gifなど画像にあったフォーマットを使用してください。

●jpg, pngは圧縮して使用してください。

一貫したURLからリソースを提供

画像をはじめ、.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を使用していることを確認してください。

5. Optimize browser rendering

レンダリングの最適化

CSSのセレクタは効率よく使用

CSSはセレクタを効率よく使用すると、ページのレンダリングが早くなります。

非効率的であると考えられるもの

●子孫セレクタの使用は、非効率的であると考えられます。
例‥body *{...}、ul li a{...}

●子セレクタの使用は、非効率的であると考えられます。
例‥body > *{...}、ul > li > a {...}
※子孫セレクタよりパフォーマンスは望ましいです。

●擬似セレクタの使用は、非効率的であると考えられます。
アンカー要素以外に使用するときは、特に問題です。
例‥div:hover、* div:hover

●idセレクタと一緒の使用は、非効率的であると考えられます。
例‥ul#top_blue_nav {...}、form#UserLogin {...}

アドバイス

●ユニバーサルセレクタ︵*︶は避けてください。

●タグセレクタではなく、classやidセレクタを使用してください。

●子孫セレクタの使用時に、不必要な先祖は使用しないでください。
例‥body ul li a {...}の﹁body﹂

●子孫セレクタの代わりに、classセレクタを使用してください。
例‥ul li {color: blue;}ではなく、.unordered-list-item {color: blue;}を使用。

●アンカーではない要素に擬似セレクタの使用は避けてください。代わりに、JavaScriptの﹁onmouseover﹂を使用してください。

CSS expressionは避ける

IE用のCSS expressionはパフォーマンスが悪いため使用しないで、別の方法で同等の機能を実装するようにします。

アドバイス

●可能であるなら、スタンダードモードでCSSは記述してください。

●IE用にexpressionは使用しないで、純粋なJavaScriptで記述してください。

CSSはheadに配置

全ての外部スタイルシートがダウンロードされてから、ブラウザはページのレンダリングを開始するので、スタイルシートはhead内に配置します。

アドバイス

●@importは使用しないでください。

●<style>ブロックは、head内に配置してください。

画像のサイズ指定

ページに使用している全ての画像のwidthとheightを正しく指定してください。

アドバイス

●実際の画像と同じサイズを指定してください。60x60の画像を30x30で指定しないでください。

関連書籍

更に興味がある方には、下記の本がお勧めです。