サポート

ブラウザでCPUをもっとも消費する原因はJavaScript!

Steve Souders スティーヴ・サウダーズ

2019年2月5日火曜日

ページをより速くレンダリングするには、スクリプトを非同期に読み込むことが重要です。

レンダリングを重視する理由は、それがユーザーの体感として分かりやすいからです。レンダリングスピードが遅い場合は、ユーザーにとって使用感が悪くなります。しかし、ユーザーが何を見ているかだけでなく、サイト操作への感じ方も重要です。そのため、CPU時間に重点を置いています。CPUがブロックされると、ブラウザはスクロールやリンクのクリックなど、ユーザー操作への応答が遅くなります。言い換えれば、そのページに不快感を覚えます。

そして、ブラウザで最もCPUを消費するのは何か?ご想像のとおり、JavaScriptです!

Desktop median CPU times

上の円グラフは、HTTPアーカイブのデータに基づいた調査結果です。ブラウザのCPU時間がバケット別に表示されます。ここでは、上位レベルのカテゴリーを示すために色を使います(JavaScriptの場合はオレンジ、レイアウトの場合は紫、ペイントの場合は緑、ローディングの場合は青)。これらは、デスクトップ上の130万サイトの中央値です。

 

以下はモバイル向けの同様のチャートです。

CPU median for mobile

絶対値はモバイルの方が高くなっています。重要なのは両方のグラフでJavaScriptが最もブラウザのCPUを消費していますす。中央値に加えて、デスクトップとモバイルの両方について95パーセンタイルと99パーセンタイルを調べ、合計時間に基づいて円グラフのサイズを変更しました。上に重ねて表示します。

このグラフは、明確で重要な傾向を示しています。

ブラウザのCPU時間が増えるにつれて、JavaScriptが使用する割合も増加していなす。 10年前はネットワークが主なボトルネックでした。 今日の主なボトルネックは「JavaScript」です。

ページ上のJavaScriptの量は急速に増加しています(過去7年間でほぼ5倍)。 ページのレンダリングとスピードを維持するためには、JavaScriptのCPU時間に目を向けて、ブラウザのメインスレッドのブロックを減らしていきます。 サイトのJavaScriptのCPU使用率を追跡していない場合は、ここから始めましょう。

さらにアラート設定で、パフォーマンスパジェットを設定して(いつ?どのように)問題になるかどうかを見てみましょう。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA