ウェブサイトのパフォーマンスを向上させるためのコンテンツ関連の10の原則

<br />英語アドレス: http://developer.yahoo.com/performance/rules.html
Yahoo! の Exceptional Performance チームは、Web パフォーマンスを向上させるベストプラクティスを提供します。彼らは一連の実験を実施し、さまざまなツールを開発し、多数の記事やブログを書き、さまざまな会議での議論に参加しました。本質的に、ベストプラクティスは Web サイトのパフォーマンスを向上させるように設計されています。
Excetional Performance チームは、Web サイトの速度を向上させる方法のリストを作成しました。 7つのカテゴリー、34の項目に分けられます。コンテンツ、サーバー、Cookie、CSS、JavaScript、画像、モバイルアプリケーションの 7 つの部分が含まれます。
コンテンツセクションには 10 個の提案があります。
1. コンテンツ

HTTPリクエストを最小限に抑える DNSルックアップを減らすリダイレクトを避ける AJAXをキャッシュする読み込みを遅らせるプリロードする DOM要素の数を減らすページのコンテンツをドメイン名で分割する iframeのサイズを小さくする 404エラーを避ける
1. HTTP リクエストの数を最小限に抑えます。エンドユーザーの応答時間の 80% はコンテンツのダウンロードに費やされます。この時間には、ページ内の画像、スタイルシート、スクリプト、Flash などのダウンロードが含まれます。ページ上の要素の数を減らすことで、HTTP リクエストの数を減らすことができます。これは、Web ページの速度を向上させるための重要なステップです。
ページコンポーネントを削減する方法は、実際にはページデザインを簡素化することです。では、応答時間を短縮しながらページコンテンツの豊富さを維持する方法はあるのでしょうか?ここでは、ページのコンテンツを充実させながら HTTP リクエストの数を減らすテクニックをいくつか紹介します。
ファイルのマージは、すべての CSS ファイルを 1 つのスタイルシートにまとめるなど、すべてのスクリプトを 1 つのファイルにまとめることで、HTTP リクエストを削減する方法です。スクリプトやスタイルシートをページごとに異なる方法で変更する必要がある場合、これは比較的面倒かもしれませんが、それでも、この方法はページのパフォーマンスを向上させるための重要なステップと見なされるべきです。
CSS スプライトは画像リクエストを減らす効果的な方法です。すべての背景画像を 1 つの画像ファイルに入れて、CSS の background-image プロパティと background-position プロパティを使用して画像のさまざまな部分を表示します。
イメージマップは複数の画像を 1 つの画像に結合します。全体のファイルサイズは変わりませんが、HTTP リクエストの数を減らすことができます。イメージマップは、ナビゲーションバーなど、イメージのすべてのコンポーネントがページ上で近接している場合にのみ使用できます。画像の座標を決定するのは面倒でエラーが発生しやすく、ナビゲーションに画像マップを使用すると読みにくくなるため、この方法はお勧めできません。
インライン画像は、data: URL スキームを使用して画像データをページに読み込みます。これによりページのサイズが大きくなる可能性があります。インライン画像をスタイルシート（キャッシュ可能）に配置すると、ページファイルのサイズの増加を防ぎながら HTTP リクエストを削減できます。しかし、インライン画像はまだ主要なブラウザではサポートされていません。 Web ページ制作チュートリアルチャンネルのコンテンツを表示するには、ここをクリックしてください。ページに対する HTTP リクエストの数を減らすことが、最初に実行すべきステップです。これは、初めてのユーザーの待ち時間を改善するための最も重要な方法です。 Tenni Theurer 氏が自身のブログ「Browser Cahe Usage - Exposed!」で述べているように、キャッシュがない場合、HTTP リクエストは応答時間の 40% ～ 60% を占めます。あなたのウェブサイトを初めて訪れる人の体験をより速くしましょう！
2. DNS ルックアップの回数を減らす<br />ドメインネームシステム (DNS) は、電話帳の人名と電話番号の関係と同様に、ドメイン名と IP アドレスの対応関係を提供します。ブラウザのアドレスバーに www.dudo.org と入力すると、DNS 解決サーバーはこのドメイン名に対応する IP アドレスを返します。 DNS 解決プロセスにも時間がかかります。通常、指定されたドメイン名に対応する IP アドレスを返すには 20 ～ 120 ミリ秒かかります。このプロセス中、DNS ルックアップが完了するまでブラウザは何も実行しません。
DNS ルックアップをキャッシュすると、ページのパフォーマンスが向上します。このタイプのキャッシュには、通常はユーザーの ISP プロバイダーまたはローカルエリアネットワークによって制御される特定のキャッシュサーバーが必要ですが、ユーザーが使用するコンピューター上にもキャッシュが生成されます。 DNS 情報は、オペレーティングシステムの DNS キャッシュ (Microsoft Windows の DNS クライアントサービス) に保存されます。ほとんどのブラウザには、オペレーティングシステムに依存しない独自のキャッシュがあります。ブラウザには独自のキャッシュレコードがあるため、単一のリクエストではオペレーティングシステムの影響を受けません。ウェブサイト作成チュートリアルチャンネルのコンテンツを見るにはここをクリックしてください
デフォルトでは、Internet Explorer は DNS ルックアップレコードを 30 分間キャッシュし、レジストリ内のそのキー値は DnsCacheTimeout です。 Firefox は DNS ルックアップレコードを 1 分間キャッシュします。設定ファイル内のオプションは network.dnsCacheExpiration です (Fasterfox ではこのオプションが 1 時間に変更されます)。
クライアントの DNS キャッシュが空の場合 (ブラウザとオペレーティングシステムの両方)、DNS ルックアップの数はページ内のホスト名の数と等しくなります。これには、ページ内の URL、画像、スクリプトファイル、スタイルシート、Flash オブジェクトなどに含まれるホスト名が含まれます。ホスト名の数を減らすと、DNS ルックアップの数を減らすことができます。
ホスト名の数を減らすと、ページの並列ダウンロードの数も減ります。 DNS ルックアップの数を減らすと応答時間が改善されますが、並列ダウンロードを減らすと応答時間が長くなる可能性があります。私の基本方針は、これらのページのコンテンツを少なくとも 2 つ、最大 4 つに分割することです。その結果、DNS ルックアップの数を減らすことと、高度な並列ダウンロードを維持することの間でトレードオフが発生します。

前のページ1 2 3 次のページ続きを読む

<<: DockerはGitを使用してJenkinsのリリースとテストプロジェクトの詳細なプロセスを実装します

>>: Vue 大画面データ表示例