GooglePageSpeedInsightsの結果を分析する方法
公開: 2020-12-02
グーグルは速いウェブサイトにランキングを上げるつもりなので、あなたはおそらくグーグルページスピードの洞察についてもっと理解したいと思っていますか？
…そして、それが混乱しているので、私は驚かない！
この記事が役に立ちます。
ウェブサイトのページ速度が重要なのはなぜですか？
Googleは、ユーザーに可能な限り最高のユーザーエクスペリエンスを提供したいと考えています。
あなたのウェブサイトが遅い場合、それはユーザーを苛立たせ、悪いユーザーエクスペリエンスを生み出します。 それは簡単です。 パフォーマンスはエクスペリエンスに影響を与えます。
Googleは最近、コアWebバイタルが2021年にランキングアルゴリズムの一部として使用されることを発表しました。これらのコアWebバイタルは、速度と、ユーザーがページを操作する速度の指標です。
基本的に、以下のこの表では、「赤」にすることはできません
Google PageSpeed Insightsとは何ですか？
これはGoogleが提供する無料のツールで、ウェブページのURLを入力し、テストをすばやく実行して、パフォーマンスに関連するさまざまな指標を確認できます。
次に、ツールはページに0から100ポイントの範囲のスコアを与えます。 スコアは実際にはスピードではありません。 速度の向上に関するGoogleの一般的な推奨事項を使用した場合は、スコアを向上させることができます。
また、ページの速度を低下させている正確なパラメーターと、ページを改善する方法の提案も示します。
これは物事が技術的になり、結果を理解するのが少し難しいところです。
結果をどのように解釈しますか？
テストの実行後に最初に表示されるのは、分析されたページのパフォーマンススコア（デスクトップとモバイル）です。
これは0〜100の数値になります。
- 0から49–これは悪いことです。スコアを49以下にしたくないでしょう。
- 50から89–これは問題ありませんが、改善の余地があります
- 90から100–あなたがこの規模にいるなら、あなたは良い本にいます。
下にスクロールすると、高得点または低得点の原因がわかります。
注：各セクションの前にあるカラーインジケーターを参照してください。
- 緑は速いことを意味します
- オレンジは中程度を意味します
- 赤は遅いことを意味します
これは、これらの各セクションの意味です。
最初のContentFulペイント
これは、ブラウザからページへのナビゲーションからコンテンツのレンダリングが開始されるまでにかかる時間です。
基本的に、これはページの読み込みが開始されていることを示します。
たとえば、ページの背景色、表示された画像、またはテキストの一部である単なる色の変更である可能性があります。
ユーザーが何らかのアクションを見ると、ページが完全に読み込まれるまで待つ可能性が高いため、これは重要です。
ガイドライン：
インタラクティブな時間
このパラメーターは、ページがインタラクティブになる速度を示します。
これは、ユーザーが実際に操作できるように、画面に十分な要素が表示されているページを意味します。たとえば、メニューボタンをクリックします。
時々、ウェブサイトは可視性に焦点を合わせることができます。つまり、ユーザーを苛立たせる可能性のあるコンテンツを操作する前に、すべてを表示することができます。
ガイドライン：
合計ブロッキング時間
Webサイトの訪問者が画面にコンテンツを表示する時間と、コンテンツを操作できる時間の間にはギャップがあります。
これが合計ブロッキング時間です！
Webサイトがインタラクティブになる前に、マウスクリック、画面タップ、キーワードの押下などができないかどうかを知っておくとよいでしょう。
長いタスクは、50ミリ秒以上あなたをブロックするタスクです。
50msを超えるものはすべてブロッキング時間と見なされます。
長いタスクがない場合は、上記の統計に表示されているブロッキング時間0が表示されます。
累積レイアウトシフト
レイアウトシフトとは、視覚要素が画面に表示された後、移動することです。
たとえば、ニュースを読んでいて、レイアウトが変更されているため、ニュース記事の場所が変更されています。
これは、ユーザーの観点からは予期しない動作です。
スコアが高いほど悪いです。
スピードインデックス
これは理解するのが難しいものですが、価値のあるものです。
したがって、両方とも1.5秒で読み込まれる2つのWebサイトを想像してみてください。
上の画像に示されている2つのWebサイトを閲覧した場合、どちらがより速くロードされますか？
どちらも1.5秒で完全に読み込まれましたが、最初のサイトでいくつかの要素が以前に表示され始めたため、ユーザーには高速であるように見えました。
ロードする時間を測定するだけで、それらは同じです。
速度指数は、ウェブサイトが完全に読み込まれる「速度」に基づいて計算されたスコアです。
ロードのビデオ録画は、ビットがロードされたときに視覚的に表示するために使用されます。
さまざまな間隔で、画面（折り畳みの上）に表示されるコンテンツの量が、完全にロードされたWebサイトに表示されるコンテンツと比較され、その特定の時間に表示されるコンテンツの割合が計算されます。
このプロセスは数回繰り返されます。
時間は、ユーザーが画面（ビューポート）に表示できるものにのみ基づいています。 折り目の下にあるものは関係ありません。
したがって、さまざまなビューポートを試してみるのは良いことです。
2つのWebサイトがあり、一方が他方の前に視覚要素を表示している場合、速度インデックススコアは低くなります。
低いほど良い。
最大の満足のいくペイント
これは、ページの最大の要素が完全にレンダリングされるのにかかる時間です。
ページが読み込まれると、最初の要素が最大の要素になりますが、より大きな要素が追加されると、これは置き換えられます。
ページの最後の要素は、ページの最大の要素（大きな画像など）である場合とそうでない場合があります。
注：画面上でどのくらいのスペースを占めるかについては話していません。
ここに2つの例があります。
ウェブサイトが表示され始めてからページの最後の画像が表示されるまでの時間は、最大の満足のいくペイントと見なされます。 これは、画像がページ上で最も多くの領域を占めるためです。
しかし…
以下の場合、「Instagram」画像が表示された最大の画像であったため、最後から2番目の画面が読み込まれたときに最大の満足のいくペイントが表示されます。
最後の画面は割引されます。 その画面に追加されたのは、「Instagram」よりも小さい画像である「GooglePlayボタン」だけでした。
Googleによると、優れたユーザーエクスペリエンスを提供したい場合は、ページの読み込みが最初に開始されてから2.5秒以内にLCPが発生するはずです。
ガイドライン：
機会
[機会]セクションには、ページの読み込み時間を改善するのに役立つ可能性のある提案が表示されます。
各提案には、推奨を実装した場合のページの読み込み時間の推定短縮も示されます。
診断
Diagnosticsは、実装を検討する必要があるWeb開発のベストプラクティスを強調しています。
ただし、これらの改善を行っても、ページのパフォーマンススコアに直接影響することはありません。
概要
Webサイトの速度を向上させるには、訪問者により良いエクスペリエンスを提供することがすべてです。 すばやく読み込まれるサイトがあると、ユーザーと検索エンジンの両方が幸せになりますが、訪問者を顧客に変える能力にも影響します。
Google PageSpeed Insightsのようなツールは、ウェブサイトのパフォーマンスを向上させるためにどこから始め、どの問題に焦点を当てるべきかを示すため、非常に便利です。
この記事が、このツールの仕組みとテスト結果の実際の意味を理解し、Webページの最適化を開始して訪問者にすばらしい体験を提供できるようになることを願っています。