Web ページの最適化に関するメモ 1_html/css_WEB-ITnose

Yahoo の WEB 最適化のための 14 のルール

HTTP リクエストの数を減らすことがパフォーマンス最適化の出発点です。これは、初回訪問の効率を向上させる上で重要な役割を果たします。

HTTP リクエストの数を削減します

イメージ マップは、複数のイメージを 1 つのイメージに結合します。合計ファイル サイズはあまり変わりませんが、HTTP リクエストの数が減り、ページの表示が速くなります。この方法は連続画像にのみ適していますが、同時に座標の定義は面倒で間違いが発生しやすい作業です。

CSS スプライトの方が良い方法です。ページの画像を 1 つのファイルに結合し、CSS のbackground-image プロパティとbackground-position プロパティを使用して画像の必要な部分を実装します。

インライン画像は、data: URL スキームを使用してページに画像を埋め込みます。これにより、HTML ファイルのサイズが大きくなります。インライン画像を (キャッシュされた) スタイルシートに結合することは、HTTP リクエストを削減し、HTML ファイルのサイズの増加を回避する方法です。

利点: ① リソース要求リンクの数を削減します。欠点: ① ブラウザによってキャッシュされません。 ② 携帯端末のパフォーマンスが http URI スキームよりも低くなります。

CSS ファイルの背景画像スタイル ルールでデータ URI スキームを使用すると、CSS ファイルと一緒にブラウザでキャッシュできるようになります。

結合ファイルは、複数のスクリプト ファイルを 1 つのファイルに結合することで HTTP リクエストの数を減らします。スタイルシートも同様に扱うことができます。この方法は単純ですが、大規模には使用されていません。米国の上位 10 の Web サイトには、ページごとに平均 7 つのスクリプト ファイルと 2 つのスタイル シートがあります。スクリプトとスタイルシートがページごとに大幅に異なる場合、このアプローチは困難になる可能性がありますが、これを実行すると応答時間を短縮できます。

CDN (Content Delivery Network、コンテンツ配信ネットワーク) を使用する

CDN サービスプロバイダーを通じて Expires ヘッダーのキャッシュを増やすことができます

ページ要素を圧縮する

HTTP 応答コンテンツを圧縮することで、ページの応答時間を短縮できます。 HTTP/1.1 以降、Web クライアントは、HTTP リクエストの Accept-Encoding ヘッダーを通じて、サポートされている圧縮タイプを示します

スタイルシートを head に配置します

スタイルシートを HEAD セクションに移動すると、インターフェイスが改善されることがわかりましたこれにより、ページ要素を順番に表示できるようになります。

スクリプトファイルを一番下に置きます

スタイルファイルと同様に、スクリプトファイルの場所に注意する必要があります。それらをページの下部に配置して、順番に表示して最大限の並列ダウンロードを実現できるようにする必要があります。

場合によっては、スクリプトを一番下に移動するのは簡単ではありません。たとえば、スクリプトは document.write メソッドを使用してページ コンテンツを挿入します。ドメインの問題も考えられます。ただし、多くの場合、方法はあります。

別の方法は、遅延スクリプトを使用することです。 DEFER 属性は、スクリプトに document.write が含まれていないことを示し、ブラウザーに直ちに表示を続けるよう指示します。残念ながら、Firefox は DEFER 属性をサポートしていません。 IE では、スクリプトが遅延する場合がありますが、必ずしも必要なだけ遅延するわけではありません。しかし、別の観点から見ると、スクリプトを遅らせることができる場合は、最下位に配置することができます。

CSS 式を避ける

CSS 式の実行回数を減らす 1 つの方法は、初回実行時に式を明示的な値に置き換えるワンショット式です。動的に設定する必要がある場合は、代わりにイベント ハンドラーを使用できます。 CSS 式を使用する必要がある場合は、CSS 式が何千回も実行され、ページのパフォーマンスに影響を与える可能性があることに注意してください。

JavaScript と CSS を外部ファイルに入れます

実際の世界では、外部ファイルはブラウザによってキャッシュされるため、外部ファイルを使用するとページの表示が高速化されます。 JavaScript と CSS がページに組み込まれている場合、HTTP リクエストの数は減りますが、ページのサイズは増加します。一方、外部ファイルを使用するとブラウザによってキャッシュされるため、HTTP リクエストの数を増やすことなくページ サイズが削減されます。したがって、一般に、外部ファイルを使用する方がより現実的な方法です。唯一の例外は、Yahoo! と My Yahoo! などのホームページではインライン方式の方が効果的です。一般に、セッション中は現時点ではホームページへのアクセスが少ないため、インライン方式の方がユーザーの応答時間を短縮できます。

DNS クエリの数を減らす

ホスト名を減らすと DNS クエリの数を減らすことができますが、並列ダウンロードの数が減少する可能性があります。 DNS クエリを回避すると応答時間が短縮される可能性がありますが、並列ダウンロードの数を減らすと応答時間が長くなる可能性があります。実行可能な妥協策は、コンテンツを少なくとも 2 つ、最大 4 つの異なるホスト名に分散することです。

JavaScript コードを最小限に抑える

JavaScript コードを最小限に抑えるとは、JS コード内の不要な文字を削除し、それによってダウンロード時間を短縮することを意味します。人気のある 2 つのツールは、#JSMin と YUI Compressor です。難読化は、ソース コードを最小限に抑えるための代替手段です。 minify と同様に、コメントや空白を削除してソース コードのサイズを削減し、コードを難読化することもできます。難読化の一環として、関数名と変数名が短い文字列に置き換えられるため、コードがよりコンパクトになり、読みにくくなり、リバース エンジニアリングが困難になります。 Dojo Compressor (ShrinkSafe) は、最も一般的な難読化ツールです。

リダイレクトを避ける

リダイレクト機能は、次のような 2 つの HTTP ステータス コード 301 および 302 によって完了します。

  HTTP/1.1 301 Moved Permanently  Location: http://example.com/newuri  Content-Type: text/html

ブラウザは、Location で指定された URL にリクエストを自動的にリダイレクトします。 リダイレクトの主な問題は、ユーザーのエクスペリエンスを低下させることです。 。

重複したスクリプト ファイルを削除する

重複した JS スクリプト ファイルをページに含めると、パフォーマンスに影響します。つまり、不要な HTTP リクエストと追加の JS 実行が作成されます。

ETags の設定

それについてはよくわかりませんが、穴が残ります

Ajax のキャッシュ

Ajax のパフォーマンスを向上させる最も重要な方法は、応答をキャッシュ可能にすることです