HTTP リクエストを最小限に抑えて読み込み時間を改善する方法

ページのコンポーネント数を減らす

知っておくべきこと

• ページの読み込み時間を遅らせない外部スタイル シートを使用します。複数の CSS およびスクリプト ファイルを使用しないでください。
• ほとんどまたはすべての画像を CSS スプライトに結合します。複数の画像リクエストを 1 つにまとめます。
• イメージ マップは、連続したイメージがある場合、複数の HTTP イメージ リクエストを 1 つに減らすことができます。

この記事では、Web デザインを最小化せずに HTTP リクエストを最小化することで、Web ページを高速化する方法について説明します。

設計を破壊せずに HTTP リクエストを減らす方法

幸いなことに、高品質でリッチな Web デザインを維持しながら HTTP リクエストの数を減らす方法がいくつかあります。

ファイルを結合する– 使用 外部スタイルシート スクリプトは、ページの読み込み時間を遅らせないようにするために重要ですが、複数の CSS と 1 つのスクリプト ファイルは使用しないでください。 CSS スプライトを使用する– ほとんどまたはすべての画像をスプライトに結合すると、複数の画像リクエストが 1 つになります。次に、CSS の background-image プロパティを使用して、必要な画像のセクションを表示します。 画像マップ– イメージ マップは以前ほど普及していませんが、連続したイメージがある場合、複数の HTTP イメージ リクエストを 1 つに減らすことができます。

キャッシュを使用して内部ページの読み込み時間を改善する

CSS スプライトと組み合わせた CSS とスクリプト ファイルを使用することで、内部ページの読み込み時間を改善することもできます。たとえば、内部ページとランディング ページの要素を含むスプライト画像がある場合、読者がそれらの内部ページに移動すると、画像は既にダウンロードされてキャッシュに保存されています。そのため、これらの画像を内部ページにロードするために HTTP リクエストも必要ありません。

HTTP リクエストとは

HTTP リクエストは、ブラウザーがページの表示を要求する方法です。 Web ページがブラウザーに読み込まれると、ブラウザーは URL 内のページの HTTP 要求を Web サーバーに送信します。次に、HTML が配信されると、ブラウザはそれを解析し、画像、スクリプト、 CSS 、フラッシュなど。

新しい要素のリクエストを確認するたびに、別の HTTP リクエストをサーバーに送信します。ページに含まれる画像、スクリプト、CSS、Flash などの数が多いほど、より多くのリクエストが行われ、ページの読み込みが遅くなります。ページの HTTP リクエストの数を減らす最も簡単な方法は、画像、スクリプト、CSS、Flash などを多く (またはまったく) 使用しないことです。しかし、テキストだけのページは退屈です。