web-dev-qa-db-ja.com

画像を実際にCDNに入れる必要があるかどうかを測定しますか？

現在、CDN機能をWebサイトに追加することを検討しています。しかし、改善を測定できない限り、努力をしたり、関連する費用を支払いたくないことを知っています。そのため、サイトに画像を読み込む前後の時間を測定する必要があります。また、何を期待すべきかを示す何らかの指標、または前進するべきかどうかを決定する方法、そもそもCDNを統合してみてください。

現在、私は私たちのウェブサイトのすべての異なるページタイプを取り、FirebugNetタブでImagesフィルターを使用して記録メモ帳で。 CDNのセットアップを取得したら、戻って結果を再度確認します。また、ページの種類と平均ページ読み込み時間でグループ化されたGoogle Analyticsビューもあります。

この方法が一貫性/堅牢性/サウンドであるか、不正確な結果を返す傾向があるかどうかを知る必要があります。

デビン

google-analyticscdnmetrics
3
Devin Gleason Lambert

最近、Google I/O用のコードラボを作成しました。このラボでは、Google Analyticsを使用して、ページ上のさまざまなリソースのロード時間を正確に測定する方法を説明しています。

https://codelabs.developers.google.com/codelabs/performance-analytics/

画像に関して、理解する最も重要なことは、画像の読み込みにかかる時間は必ずしも測定に適した指標ではないということです。 JavaScriptアセットとCSSアセットは、ロード方法に応じて、DOMの解析と構築をブロックできますが、ブラウザーがアセットを取得することを妨げません。

つまり、画像の読み込みに時間がかかっても、ページに他のブロッキングアセットがある場合、画像をCDNに移動して読み込みを高速化しても、ユーザーの観点から見たパフォーマンスが必ずしも改善されないということです。 。

測定する指標は、画像の読み込み速度ではなく、画面に表示されるandの読み込み速度です。言い換えれば、ユーザーが画像を見ることができるようになるまでどのくらい時間がかかりますか？

画像がいつ表示されるかを判断するには、画像が読み込まれた時点とDOMに追加された時点の最大値を取得します。

以下は、イメージがロードされたときと、DOMノードが構築されたときにパフォーマンスマークを作成する例です。次に、両方のマークをコンソールに記録します。 2番目に発生するマークは、画像が表示されるポイントです。

<img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
<script>performance.mark('img:visible')</script>

<script>
window.onload = function() {
  console.log(performance.getEntriesByName('img:visible'));
};
</script>

上記のコードのJSBinは次のとおりです。 http://jsbin.com/riyiyulide/edit?html,console,output

上記のコードラボではさらに詳細に説明しているので、一読することをお勧めします。

1
Philip Walton

最初にターゲットオーディエンスを考慮する必要があります。ターゲット顧客への接続が良好な堅牢なサーバー（たとえば、ロンドンのサーバーと訪問者の99％が英国から来ているサーバー）がある場合、CDNの利点はほとんどありません。

接続性の低いグローバルなオーディエンスとサーバーがある場合、その見返りは劇的です。

ページの読み込みパフォーマンスを測定するのに役立つツールがたくさんあり、測定の前後に適用して違いを確認できます。

アプローチに適した最も注目すべきツールは次のとおりです。

WebPageTest.org -特定の場所からページ全体をロードします。 1回限りのテストを要求し、必要なすべての場所について手順を繰り返す必要があります。 （自由）

Speedchecker Cloudperf -複数の場所からページ全体を読み込み、数回クリックするだけで複数のCDNにWebサイトを自動的にアップロードするため、CDNアカウントの取得に時間を費やすことなく差異を測定できます（部分的に無料）

1
Janusz