高性能ウェブサイトの最適化ガイド

パフォーマンスの黄金律:

エンドユーザーの応答時間のわずか 10% ～ 20% が HTML ドキュメントのダウンロードに費やされます。残りの 80% ～ 90% の時間は、ページ上のすべてのコンポーネントのダウンロードに費やされます。

ルール1: HTTPリクエストを減らす

これは、イメージマップ、CSS スプライト (長所と短所の両方)、インラインイメージ (data: URL モード、IE ではサポートされておらず、キャッシュできません)、およびスクリプトとスタイルシートのマージを使用することで実現できます。

ルール2: コンテンツ配信ネットワークを使用する

アプリケーション Web サーバーがユーザーに近いほど、HTTP 要求の応答時間が短縮されます。
コンポーネント Web サーバーがユーザーに近いほど、複数の HTTP 要求に対する応答時間が短縮されます。
コンテンツ配信ネットワーク (CDN) は、複数の地理的な場所に分散された Web サーバーのグループであり、ユーザーにコンテンツをより効率的に配信するために使用されます。

ルール3: Expiresヘッダーを追加する

Expires ヘッダーは、Web サーバーが Web クライアントに、指定された時間までコンポーネントの現在のコピーを使用できることを通知するために使用されます。サーバーとクライアントのクロックが厳密に同期され、期限が切れた後にサーバー構成で新しい日付が提供される必要があります。
Max-Age と mod_expires は、Expires の欠点を補うことができます。

ルール4: コンポーネントを圧縮する

HTTP 1.1から、

ルール5: スタイルシートを先頭に置く

白画面を避けるためのプログレッシブプレゼンテーション

ルール6: スクリプトを一番下に置く

HTTP 1.1 仕様では、ブラウザが各ホスト名から 2 つのコンポーネントを並行してダウンロードすることを推奨しており、スクリプトをダウンロードするときには並行ダウンロードは実際には無効になっています。
理由の 1 つは、スクリプトが document.write を使用してページコンテンツを変更する可能性があるため、ブラウザーはページが適切にレイアウトされることを確認するまで待機することです。
2 つ目の理由は、スクリプトが正しい順序で実行されるようにするためです。複数のスクリプトが並行してダウンロードされると、応答が特定の順序でブラウザーに到着するという保証はありません。
スクリプトを先頭に配置すると、それに続くコンテンツのレンダリングがブロックされ、それに続くコンポーネントのダウンロードがブロックされます。

ルール7: CSS式を避ける

この式メソッドは他のブラウザでは無視されますが、IE では便利なツールです。 IE でプロパティを設定して、ブラウザー間で一貫したエクスペリエンスを作成する機能。たとえば、IE [IE6、IE7 (Quirk)、IE8 (Quirk]] は min-width プロパティをサポートしていません。この問題は、次の式メソッドを使用して解決できます。

コードをコピー

コードは次のとおりです。

幅: 式(document.body.clientwidth<600?"600px": "auto");
最小幅: 600px;

式の問題は、望んでいるよりも頻繁に評価されることです。これらは、ページがレンダリングされ、サイズが変更されるときだけでなく、ページがスクロールされたときや、ユーザーがページ上でマウスを移動したときにも評価されます。追跡するために、CSS 式にカウンターを追加できます。
式カウンターの例:
http://stevesouders.com/hpws/expression-counter.php

コードをコピー

コードは次のとおりです。

P {
幅: 式(setCntr(),document.body.clientwidth<600?"600px": "auto");
最小幅: 600px;
}

式の代替: イベントハンドラー
onresize イベントでスタイルの width プロパティを設定することで、min-width の問題を修正します。
イベントハンドラーの例:
イベントハンドラ
この例では、setMinWidth() 関数を使用して、ブラウザのサイズが変更されたときにすべての段落要素のサイズを変更します。

コードをコピー

コードは次のとおりです。

関数setMinWidth(){
setCntr(); //評価の数を表示するために使用される
var aElements = document.getElementsByTagName("p");
for(var i=0;i<aElements.length;i++){
aElements[i].runtimeStyle.width=(document.body.clientwidth<600?"600px": "自動");
}
}
if(1!=navigator.userAgent.indexOf("MSIE")){
ウィンドウの最小幅を設定します。
}

これにより、ブラウザのサイズが変更されると幅が動的に設定されますが、最初にレンダリングされるときに段落のサイズが適切に設定されないため、ページでは「1 回限りの式」を使用して初期幅を設定する必要もあります。

ルール8: 外部のJavaScriptとCSSを使用する

ルール9: DNSルックアップを減らす

ルール10: JavaScriptを小さく保つ

合理化 vs. 難読化 vs. 圧縮

ルール11: リダイレクトを避ける

Web サーバーがブラウザーにリダイレクトを送信すると、応答には 3xx 範囲のステータスコードが含まれます。これは、ユーザーエージェントが要求を完了するためにさらにアクションを実行する必要があることを示します。

リダイレクトは HTML ドキュメントのダウンロードに影響します。

ルール12: 重複したスクリプトを削除する

ルール13: ETagを構成する

ルール 14: Ajax をキャッシュ可能にする

最後に、この本の内容の概要をご紹介します。