Akamai Diversity
Home > パフォーマンスに優れた WEB サイトとは?

パフォーマンスに優れた WEB サイトとは?

WEB サイトのトレンドを把握するのに便利なツールに、HTTP Archive があります。これは Alexa でランクされている各サイトのデータを集め、色々な指標で公開しているサイトです。

例えば、以下の円グラフは Alexa Top 1000 サイトにおける、 2010 年 11 月 15 日と 2013 年 5 月 15 日のコンテンツ量を表したものです。 2010 年 11 月 15 日では、ページ辺りの平均バイト数は 626 KB ですが、2013 年 5 月 15 日ですと、1246 KB と 2 年半で ほぼ 2 倍のサイズになっています。特にイメージなどの画像サイズの増加が顕著ですね。

chart.jpg


WEB サイト上のコンテンツ(データ)量が増える一方で、一昔前の 8  秒ルールから始まり、6 秒、3 秒ルールなどと、一般のインターネットユーザが WEB サイトに求めるパフォーマンスへの要望も年々高まるばかりです。




WEB サイトのパフォーマンスや、その サイトがもたらすエクスペリエンスは、色々な条件やパラメーターに左右されますが、実際のところ、"自社のサイトは速い(遅い)、使い勝手が良い(悪い)"など、一纏めにして捉えられがちです。

2000 年中頃には90% 以上のユーザーが IE を利用していましたが、アカマイ顧客のトラフィックを確認する限り、今現在、上位 5 つのブラウザを合計しないと 90 % のシェアを超えません。同じブラウザでもバージョンによって、振る舞いは異なりますので、各ブラウザ毎に最適な WEB サイトを構築するには、単なるブラウザ毎の区分けより細分化する必要があります。

latency や bandwidth 等のネットワーク特性も、WEB サイトのパフォーマンスに重要な影響を及ぼします。以下のグラフは webpagetest を利用して、アカマイ化されていない、とあるサイトの性能を簡易計測してみた結果です。同じ WEB サイトを閲覧する場合であっても、ネットワークタイプによって、ロード時間が異なります。

networkType.png


IE 全盛期であれば特に問題はなかったのですが、インターネットユーザーの利用環境はバリエーションに富んでいるので、ある瞬間にある条件でサイトにアクセスした際のパフォーマンスを主観的に判断しただけで、一概にサイトが速い、遅いとは言い切れないと言うことですね。


以下のグラフは、X 軸にあるサイトのロード時間、Y 軸にアクセス数をプロットしたもので、グラフのサンプル母数はどちらも同じです。

A.png

例えば、A のサイトにアクセスしたユーザは、ページロードに 4 秒費やしている数が 150 (人) である事を意味しています。ページロード 5 秒の母数が最も多くなっています。

b.png

一方でB のサイトでは、3 秒で閲覧出来るユーザーが最も多い数を占めています。

さて、この場合、A のサイトと B のサイトはどちらがパフォーマンスに優れているのでしょうか?

B のサイトでは、1~5 秒でロード可能なユーザーが大半を占めていますが、
同様に 10 秒前後、それ以上費やしているユーザーの数も無視できません。

A のサイトでは、3 秒以内にロード可能なユーザーは少ないですが、
ほとんどのユーザは 8 秒以内に収まっています。
つまり、ユーザの環境に依存する事なく、ページロード時間が一定の幅に収まっています。

そもそも、なぜサイト A とサイト B のような WEB サイトのロード時間差が出るのでしょうか?

例えば、 B のサイトは、PC 向けに制作した比較的重たい画像を掲載した複雑なサイトにも関わらず、ターゲットとしていないモバイルデバイスからのアクセスが多いのかもしれません。その一方で、サイトリリース時は環境が良い場所で確認をするため、性能には問題ないと認識されているかもしれません。

サイトのパフォーマンスを考慮する場合、実際のユーザーがどれぐらいのロード時間でサイトを閲覧しているのか、デバイスタイプやネットワークの特性も踏まえて計測する必要がありそうです。

以下は US のオークションサイト eBay での Real User Monitoring (= RUM) の手法や計測の背景を記載したブログのリンクです。

Measuring Real User Experience with Site Speed Gauge

自社で Site Speed Gauge と言うフレームワークを用いて測定しているのですが、ざっくり言えば、クライアント側の JavaScript でフロントエンド処理に掛かるそれぞれの時間を、Navigation Timing の考え方に沿った形で計測しているようです。

パフォーマンスに優れた WEB サイトか否かを判断するためにも、先ずは RUM からスタートするのも良いかもしれませんね。

Leave a comment