つの重要なポイント
1. HTTPリクエストを減らしてフロントエンドのパフォーマンスを劇的に向上させる
エンドユーザーの応答時間の80〜90％は、ページ内のすべてのコンポーネントをダウンロードするのに費やされる。
フロントエンドの最適化は重要です。 バックエンドのパフォーマンスも重要ですが、応答時間の大部分は画像、スタイルシート、スクリプトなどのページコンポーネントのダウンロードに費やされます。CSSスプライト、イメージマップ、インライン画像などの技術を使用してこれらのコンポーネントの数を減らすことで、ロード時間を大幅に改善できます。複数のJavaScriptファイルやCSSファイルを1つのファイルに結合することもHTTPリクエストを減らします。コンポーネントの最小化に焦点を当てることで、フロントエンドのパフォーマンスを最大限に向上させることができます。
- HTTPリクエストを減らすための主な技術：
- 複数の画像を結合するためのCSSスプライト
- ナビゲーション要素のためのイメージマップ
- data: URLを使用したインライン画像
- JavaScriptとCSSファイルの結合
2. ブラウザキャッシュを活用して将来のExpiresヘッダーを設定する
将来のExpiresヘッダーは、ブラウザがコンポーネントのキャッシュコピーを使用できるかどうかを明確にすることで、サーバーへの確認の必要性を排除します。
ブラウザキャッシュを最大限に活用する。 静的コンポーネントに対して1年以上の将来のExpiresヘッダーを設定することで、ブラウザがそれらを長期間キャッシュできるようにし、後続のページビューで不要なHTTPリクエストを排除します。コンポーネントを更新する際にはファイル名を変更する必要がありますが、パフォーマンスの向上は大きいです。頻繁に変更される動的に生成されたコンテンツには、短い有効期限を設定するのが適切です。適切なキャッシュヘッダーは、サーバーの負荷を大幅に軽減し、リピート訪問者のページロード時間を改善します。
- 将来のExpiresヘッダーの利点：
- キャッシュされたコンポーネントのHTTPリクエストを排除
- サーバーの負荷を軽減
- リピート訪問者のページロード時間を改善
- 考慮事項：
- コンポーネントを更新する際にファイル名を変更する必要がある
- 動的コンテンツには短い有効期限を使用
3. gzipでコンポーネントを圧縮して転送時間を短縮する
Gzip圧縮は通常、応答サイズを約70％削減します。
gzip圧縮を有効にする。 Gzip圧縮はHTTP応答のサイズを大幅に削減し、通常は約70％削減します。これにより転送時間が短縮され、特に接続が遅いユーザーにとって有益です。圧縮と解凍にはわずかなCPUコストがかかりますが、帯域幅の節約はこれをはるかに上回ります。Webサーバーを設定して、HTMLドキュメント、JavaScript、CSS、およびその他のテキスト応答をgzip圧縮するようにします。すでに圧縮されている形式（画像やPDFなど）はgzip圧縮を避けます。適切に実装されたgzip圧縮は、最も簡単で効果的なパフォーマンス最適化の1つです。
- gzip圧縮するコンポーネント：
- HTMLドキュメント
- JavaScriptファイル
- CSSファイル
- XMLおよびJSON応答
- gzip圧縮しないもの：
- 画像
- PDFファイル
4. CSSを上部に、JavaScriptをHTMLドキュメントの下部に配置する
スタイルシートをドキュメントの下部に配置すると、多くのブラウザでプログレッシブレンダリングが禁止されます。
CSSとJavaScriptの配置を最適化する。 HTMLドキュメントの上部にスタイルシートを配置することで、ブラウザがそれらを迅速に読み込み、ページを段階的にレンダリングできるようになります。これにより、ユーザーに対して視覚的なフィードバックが迅速に提供されます。逆に、JavaScriptファイルをドキュメントの下部に配置することで、他のコンポーネントのダウンロードをブロックしないようにします。このアプローチは、迅速な視覚的レンダリングと効率的なリソースロードのバランスを取ります。可能な場合は、ページロードイベント後に非必須スクリプトをロードして、知覚されるパフォーマンスをさらに向上させます。
- CSSの配置：
- <head>セクションに配置
- @importではなく<link>タグを使用
- JavaScriptの配置：
- </body>タグの前に配置
- 非必須スクリプトはページロード後にロード
5. JavaScriptとCSSファイルを最小化および結合する
平均して、JSMinはJavaScriptファイルのサイズを21％削減し、Dojo Compressorは25％の削減を達成しました。
ファイルサイズを削減する。 コメント、空白、および不要な文字を削除することで、JavaScriptおよびCSSを最小化し、ファイルサイズを大幅に削減できます。JavaScript用のJSMinやCSSミニファイアなどのツールを使用して、このプロセスを自動化できます。さらに、複数のJavaScriptまたはCSSファイルを1つのファイルに結合することで、HTTPリクエストを減らします。これにより、初回ダウンロードのサイズがわずかに増加する可能性がありますが、キャッシュ効率が向上し、後続のページビューでのオーバーヘッドが減少します。大規模なサイトでは、ビルドプロセスを実装して、最小化と結合を自動的に処理します。
- 最小化技術：
- コメントと空白を削除
- 変数名と関数名を短縮
- 短い構文の代替を使用
- 結合戦略：
- ページまたは機能ごとにファイルをグループ化
- サーバーサイドインクルードまたはビルドツールを使用
6. コンテンツ配信ネットワーク（CDN）を使用してレイテンシを削減する
コンポーネントのWebサーバーがユーザーに近い場合、多くのHTTPリクエストの応答時間が改善されます。
静的コンテンツにCDNを活用する。 コンテンツ配信ネットワークは、静的コンテンツを複数の地理的に分散したサーバーに分配します。これにより、ユーザーの物理的な位置に近いサーバーからコンテンツを提供することで、レイテンシが削減されます。CDNは従来、大企業によって使用されていましたが、現在では小規模なサイト向けの手頃なオプションも多数存在します。CDNは、地理的に多様なユーザーベースを持つサイトに特に効果的です。応答時間を改善するだけでなく、トラフィックの急増を吸収し、主要なWebサーバーの負荷を軽減するのにも役立ちます。
- CDNの使用の利点：
- 地理的に多様なユーザーのレイテンシを削減
- トラフィックの急増に対処する能力の向上
- オリジンサーバーの負荷を軽減
- CDNを検討するコンテンツ：
- 画像
- JavaScriptファイル
- CSSファイル
- 大きなダウンロードファイル
7. Ajaxリクエストを最適化してWeb 2.0アプリケーションのパフォーマンスを向上させる
Ajaxを使用しても、ユーザーが「非同期JavaScriptとXML」応答を待っている間に指をくわえていることが保証されるわけではありません。
Ajax応答をキャッシュ可能にする。 AjaxはWeb 2.0アプリケーションのユーザーエクスペリエンスを向上させることができますが、必ずしも高速ではありません。適切なヘッダーを使用してAjax応答をキャッシュ可能にすることで最適化します。データを変更しないAjax呼び出しにはGETリクエストを使用し、ブラウザが応答をキャッシュできるようにします。JSONなどの効率的なデータ形式を使用してAjax応答のサイズを最小化します。予測可能なユーザーアクションに対しては、Ajaxを使用してデータを事前取得し、知覚されるパフォーマンスを向上させます。長時間実行されるAjaxリクエスト中には、ユーザーにフィードバックを提供して応答性を維持します。
- Ajax最適化技術：
- キャッシュ可能なリクエストにはGETを使用
- 応答サイズを最小化（JSONを使用）
- 予測可能なデータを事前取得
- 長時間実行されるリクエストにはユーザーフィードバックを提供
8. ETagを適切に設定してキャッシュ効率を向上させる
ApacheとIISによって生成された同じコンポーネントのETagは、サーバーごとに一致しません。
ETagを最適化または削除する。 エンティティタグ（ETag）はキャッシュされたコンポーネントを検証するために使用されますが、ApacheとIISのデフォルトの実装では、マルチサーバー環境でキャッシュを妨げることがあります。これは、デフォルトのETagにサーバー固有の情報が含まれているため、不要な再検証が発生するためです。マルチサーバー環境では、この情報を除外するようにETagを設定するか、完全に削除し、代わりにLast-Modifiedヘッダーを使用します。適切に設定されたETagはキャッシュ効率を向上させますが、不適切に設定されたものはパフォーマンスを低下させる可能性があります。
- ETagの処理オプション：
- ETagを完全に削除
- サーバー固有の情報を除外するように設定
- 頻繁に変更されるリソースにのみ使用
9. リダイレクトを可能な限り避けてラウンドトリップを減らす
リダイレクトは多くの問題を解決する簡単な方法ですが、ページの読み込みを遅くしない代替ソリューションを使用する方が良いです。
不要なリダイレクトを排除する。 各リダイレクトは追加のHTTPリクエスト-レスポンスサイクルを作成し、ページの読み込みにレイテンシを追加します。Webサイトの接続や外部リンクの追跡など、リダイレクトの一般的な使用法は、より効率的な代替手段に置き換えることができます。たとえば、サーバーサイドインクルードやURLリライティングを使用して、Webサイトの異なる部分を接続します。外部リンクの追跡には、リダイレクトの代わりにビーコン画像やXMLHttpRequestオブジェクトを使用します。リダイレクトが避けられない場合は、ブラウザが新しい場所をキャッシュできるように、恒久的な（301）リダイレクトを使用します。
- リダイレクトの代替手段：
- サーバーサイドインクルード
- URLリライティング
- Apacheのエイリアスまたはmod_rewrite
- トラッキング用のビーコン画像
10. DNSルックアップを減らして接続遅延を最小化する
複数のサーバーでWebサイトをホスティングしており、ApacheまたはIISのデフォルトのETag設定を使用している場合、ユーザーはページが遅くなり、サーバーの負荷が高くなり、帯域幅が増加し、プロキシがコンテンツを効率的にキャッシュしていません。
DNSの使用を最適化する。 DNSルックアップはHTTPリクエストにレイテンシを追加し、特にモバイルネットワークで顕著です。DNSルックアップを最小化するために、Webページで使用するユニークなホスト名の数を減らします。ただし、並列ダウンロードの必要性とバランスを取る必要があります。2〜4つのホスト名を使用することで、過度なDNSオーバーヘッドなしに並列化を増やすことができます。Keep-Alive接続を使用して、同じホスト名への繰り返しリクエストのDNSルックアップ頻度を減らします。地理的に多様なユーザーに対しては、コンテンツ配信ネットワーク（CDN）を使用してDNSルックアップ時間を短縮することを検討します。
- DNSの影響を減らすための戦略：
- ページごとにユニークなホスト名を2〜4つに制限
- Keep-Alive接続を使用
- CDNの使用を検討
- 重要なドメインのDNSプリフェッチを調査
最終更新日:
レビュー
本書『High Performance Web Sites』は賛否両論を受けつつも、全体的には好意的に受け入れられている。多くの読者は、ウェブ開発者にとって有益であり、ウェブサイトのパフォーマンス向上に関する実践的なアドバイスが評価されている。年数が経ってもなおその有用性を指摘する声もあれば、時代遅れと感じる意見もある。最適化技術の背後にある理論を説明し、具体的な例を提供している点が称賛されている。一方で、現在では多くの情報がオンラインやYSlowのようなツールを通じて入手可能であると指摘する批評もある。総じて、ウェブパフォーマンスの基本を理解するための貴重なリソースと見なされている。
