ウェブサイトパフォーマンスガイド（パート1）：概要

【概要】

当社のウェブサイトの速度を低下させている原因は何ですか?

HTTP プロトコル

パフォーマンス向上で節約と収益アップ

パフォーマンスルール

ウェブサイトが遅くなる原因は何ですか?

最近のほとんどの Web サイトでは、応答時間のわずか 10% ～ 20% が HTML ドキュメントの生成と読み込みに費やされています。

では、読み込みにかかる残りの時間はどれくらいでしょうか? 具体的には、次のようになります。

CS

javascript (jquery、プラグインなど)

画像

ツールを使用して確認してみましょう - Fiddler (http://www.fiddler2.com/fiddler2/)

まずフィドラーを開き、ブラウザを使用して www.microsoft.com にアクセスします。

この時点で、次に示すように、Fiddler がクライアントと Microsoft Web サイト サーバー間のやり取りを監視していることがわかります。

Fiddler タブの右側にタイムラインがあることに注意してください。 default.asp の読み込みには約 1 秒かかりました。これらの行をすべて選択してみましょう。もう一度タイムラインを見てみましょう。

この時点で、データに基づいて前の点を証明できます。特定の Web サイトの場合、時間の 80% が CSS/JS/画像の読み込みに使用されています。

【Httpプロトコル】

HTTP プロトコルは Web ブラウザーと Web サーバーがどのように相互作用するかを定義するため、理解することは非常に重要です。

ハイパーテキスト転送プロトコル

この点において最も重要なのはテキストです。バイナリベースのプロトコルではなく、テキストベースです。

このプロトコルは、1997 年 1 月に RFC (Http1.1) で定義されました。

リクエスト/レスポンスモード。クライアントブラウザは特定のリクエストを送信し、サーバーは応答を返します。

ヘッダーと本文。 各リクエスト/レスポンスにはヘッダーと本文があります

以下は http プロトコルの内容です。ぜひ読んでみてください: http://tinyurl.com/8395lq

HTTPリクエスト

Microsoft にアクセスするための http リクエストを監視するために、Fiddler を使用します。

最初のレコードを選択します。右のタブは ->Inspectors->Raw

私たちは単純に分析し、

Get は URL と http バージョンを指定します。

host はホストのアドレスを指定します。

accept-languageはブラウザが使用する言語を指定します

accept-Encoding は、ブラウザとサーバー間のデータに圧縮を使用できるかどうかを指定します。

HTTPレスポンス

私たちのリクエストに対する応答を見てみましょう。

フィドラーで12行目のデータを選択し、右のタブ -> Inspectors -> Rawを選択しました。

http/1/1 200 OK。すべてが順調に進んでいることをお知らせします。 200 はステータスです。問題がある場合は 404、500 などになります。

その他詳細についてはご自身でご確認ください。

【パフォーマンス向上でお金を節約し、お金を稼ぐ】

誰でも理解できます。ウェブサイトのパフォーマンスを向上させることで、ユーザーの満足度を高めることができます。これにより、お金を節約し、お金を稼ぐことも可能になります。

お金を節約する方法:

帯域幅を節約

サーバーの数が減る

お金を稼ぐ方法:

売上とトラフィックの増加

- Amazon.com の読み込みに 100 ミリ秒かかるごとに、売上が 1% 減少します。

- Google マップのホームページのサイズが 100 KB から 70～80 KB に縮小されたところ、トラフィックは最初の 1 週間で 10% 増加し、次の 3 週間で 25% 増加しました。

- Google はすでにウェブサイトのパフォーマンスを使用して検索ランキングを決定しています。

ウェブサイトのパフォーマンスがトラフィックと売上に与える影響については、関連記事「ウェブパフォーマンスの心理学」http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ を参照してください。

【公演ルール】

HTTPリクエストを減らす

http リクエストを減らすにはどうすればよいでしょうか? 前述の Fiddler によってインターセプトされた http リクエストによると、多くのリクエストは CSS、JavaScript、および画像を取得するためのものです。

まず、ウェブサイトを見てみましょう。

jQuery を使って画像をポップアップできる普通のウェブサイトです。Fiddler で試してみましょう。

見えますよ。いくつかの CSS ファイルが含まれており、jQuery も使用します。

このウェブサイトの別のバージョンを見てみましょう。

全く同じに見えるので、写真は載せません。

fiddler が何をキャプチャしたか見てみましょう:

jsファイルとcssファイルが1つになりました。上記の js ファイルを 1 つの js ファイルに結合します。このようにして、http リクエストの数を削減します。

2. 送信するデータをできるだけ少なくする

フィドラーに戻りましょう。最初の Web サイトの jquery ファイル「jquery-1.6.2.js」を見てください。

通常版は236kです。

最初の Web サイトに読み込む必要がある js の合計サイズは 279k です。

2 番目の Web サイトに読み込む必要がある js のサイズは 50.8k です。

何をしたかって？js ファイル内の空白を削除して、js ファイルを圧縮しただけです。

CSS ファイルでも同様です。最終製品バージョンでは、マージされたファイルを使用して、HTTP リクエストの数を削減します。もちろん、デバッグ時には、コードの読みやすさを高めるために空白行を残しておく必要があります。

インターネット上には js を圧縮するためのツールがたくさんあるので、すべてをリストすることはしません。

3. インタラクションの数を減らす（キャッシュを適切に使用する）

2 番目の Web サイトを更新して、フィドラーを見てみましょう。 2 回目のロードではサーバーから default.aspx が取得されることがわかります。

js、css、画像は再読み込みされません。ブラウザがそれらのファイルをキャッシュしているからです。

原文: http://www.cnblogs.com/techborther/archive/2012/08/01/2618506.html

元のタイトル: ウェブサイトパフォーマンスガイド (パート 1): 概要

キーワード: ウェブサイト、パフォーマンス インデックス、概要、概要、何が原因か、速度低下、Http、ウェブマスター、ウェブサイトのプロモーション、収益化