GTmetrix ガイドによるサイト速度分析

公開: 2023-03-11

サイトの速度を測定し、Core Web Vitals メトリックへの準拠を確認するための重要なツールである GTmetrix は、レポートを容易にするための多くのモジュールを提供します。 一部の機能は無料アカウントでも使用できる GTmetrix は、プレミアム アカウントにアップグレードするとさらに多くの機能を提供します。

GTmetrixの起動設定から始めて、ページの読み込み時間、ページのパフォーマンス、ページの速度に影響を与える問題などに関する情報を取得できる機能について詳しく説明しましょう.

初期設定

GTmetrix にログインすると、サイトの速度をテストする前に、ダッシュボード画面で特定の調整を行うことができます。

ここでのオプションは、ページの速度に大きな影響を与える可能性があるため、作成するレポートに大きな影響を与える可能性があります。 見つけた見出しを見てみましょう。

[テスト形式] で、サイトをテストするサーバーの場所を選択できます。 サーバーと訪問者の間の地理的な距離は、ネットワークの待ち時間に大きく影響します。 距離が離れているほど、データの移動時間が長くなります。 したがって、場所を正しく選択することが重要です。

無料メンバーシップをお持ちの場合は、7 つの異なるグローバル リージョンから選択できます。 プレミアムでは、フランクフルト、パリ、ストックホルムなどの都市を直接選択できます。 この領域で選択するときは、ユーザーが主に存在する地域を選択するように注意してください。 これには、Google アナリティクスのデータを使用できます。

使用では、無料アカウントを持っている場合、Chrome でのみデスクトップ オプションにアクセスできます。 プレミアム使用では、30 以上のデバイス オプションとモバイル テストが提供されます。

デバイスの種類によってページの読み込みが異なる場合があるため、モバイルとデスクトップを区別することが重要です。 ただし、訪問者のプロファイルを認識し、あらゆる状況でのパフォーマンスを理解し、それに応じて改善を提供することが重要です。 ここで、ユーザーが最も好むデバイスの種類を特定して分析することが重要です。 また、Analytics アカウントまたは Google Search Console アカウントを使用して、ユーザーがサイトに最も頻繁にアクセスするデバイスを特定することもできます。

接続速度は、この領域で検討する最後のタイトルである [タイトルあり]から選択できます。

3G や LTE などのオプションを含む 8 つの異なる接続速度を選択できます。 ここでも、ユーザーの接続速度を選択し、それに応じて測定を行うことが重要です。

プレミアム ユーザーの場合は、カスタム接続速度機能のおかげで、訪問者を最もよく表すダウンロードとアップロードの値を定義することで、測定を実行できます。

アラートの監視と設定のタイトル。 パフォーマンスの追跡は、サイトで発生する可能性のある問題に即座に介入できるという点で重要です。 無料版では、サイトにとって重要な 1 ページのみをこのように監視できます。

GTmetrix 分析

必要な調整を行った後に分析の詳細に入ると、 GTmetrix は、Google が公開している Lighthouse スコアリング システムに基づいて分析を行い、ページの Web 品質を向上させます。 GTmetrix には、Lighthouse の測定データだけでなく、その測定データもあります。

GTmetrix スコアリングは、負荷、ユーザー インタラクション、および視覚的な安定性の観点からページのパフォーマンスを評価し、結果を提供します。 このスコアリングは、フロントエンド構造と実際のパフォーマンスの両方が含まれているため、Web エクスペリエンス全体を健全に表しています。

ただし、GTmetrix は 2 種類のスコアを計算します。 これらは、パフォーマンス スコアと構造スコアと呼ばれます。 パフォーマンス スコアは、GTmetrix のテストからの Lighthouse スコアであり、ユーザーの観点からページがどの程度うまく構成されているかを示します。

パフォーマンス スコア

パフォーマンス スコアと呼ばれる指標を計算する場合、基本的に 3 つのトピックが考慮されます。 これらは; 読み込みのパフォーマンス、インタラクティブ性、視覚的な安定性。
Loading Performance は、Total Performance Score に 45% の影響を与えます。 Core Web Vitals メトリクス First Contentful Paint と Largest Contentful Paint は、読み込みパフォーマンスにとって重要です。

エンゲージメント スコアは、エンゲージメント時間とブロック時間の影響を受けます。 これは、合計パフォーマンス スコアに 40% の影響を与えます。

視覚的な安定性は、Web Vitals 指標でよく知られている Cumulative Layout Shift 指標に直接関係しており、パフォーマンス スコアに 15% の影響を与えます。

まとめると以下のような構造になっています。

読み込み性能 (45%)

  • 最初のコンテンツ ペイント(10%)
  • 速度指数(10%)
  • 最大のコンテンツ ペイント(25%)

双方向性 (40%)

    • インタラクティブになるまでの時間(10%)
    • 合計ブロッキング時間(30%

    視覚安定性 (15%)

    • 累積レイアウト シフト(15%)

    分析をよりよく理解するために、各メトリックの意味を簡単に説明しましょう。

    最初のコンテンツ ペイント:ページ上で最初にペイントされた要素が読み込まれるまでにかかる時間。 最大 1.8 秒が推奨されます。

    速度指数:ページ コンテンツの読み込み速度、つまり視覚的に表示できる速度を測定する指標です。 最大 3 秒が推奨されます。

    最大のコンテンツ ペイント:ページ上の最大のペイント可能な要素を読み込むのにかかる時間。 通常、ページでペイント可能な最大のコンテンツは画像です。 ただし、読み込みにかかる最大時間は 2.5 秒にすることをお勧めします。

    インタラクティブになるまでの時間:これは、ページが完全にインタラクティブになるまでの時間を指します。 すべてのサブリソースの読み込み、つまりページ全体の読み込みを指します。 最大 3.8 秒にすることをお勧めします。

    合計ブロック時間:最初のコンテンツ ペイントからインタラクティブになるまでの各タスクの読み込み時間を測定します。 これは、ページ作成プロセス中に 50 ミリ秒を超える負荷によって作成されたブロック時間を測定するメトリックです。 ここでは、50 ミリ秒にわたってロードされたタスクが 50 ミリ秒の値をどれだけ超えたかを測定し、それらの値を収集します。 その結果、合計ブロッキング時間が計算されます。

    累積レイアウト シフト:この指標は、ページの視覚的な安定性を測定します。 ロード中および全ロード時の画像、フォント、およびボタンのシフト率を計算します。 0.1 未満の値は良好と見なされます。

    これらすべてのメトリックを計算することにより、最終的なパフォーマンス スコアの結果が得られます。 [パフォーマンス] タブからパフォーマンス スコアの詳細にアクセスすることもできます。 パフォーマンス スコアに加えて、ページのどのセクションの応答に時間がかかるかについての情報は、以下の [ブラウザーのタイミング] セクションで確認できます。 Browser Timing のデータは、パフォーマンス スコアに直接影響しないことを指摘したいと思います。

    この領域には、サイトで計算された指標のパフォーマンスに応じて、次の色とメッセージが表示されます。

    構造スコア

    構造スコアは、ページが最適なパフォーマンスのためにどれだけうまく構築されているかを示す値です。

    標準の Lighthouse スコアに加えて、GTmetrix には Web パフォーマンスに関する特別なチェックがあることを述べました。 これらのチェックは、Structure Score セクションに含まれています。

    構造化スコアに関する詳細情報は、構造の見出しの下にあります。 以下のようなレポートが表示され、最も深刻な問題が一番上に表示されます。

    各質問のタイトルをクリックすると、詳しい説明が表示されます。

    この表に示されている項目は、色によって次のように解釈できます。

    「高」および「中高」に指定された項目を改善すると、ページのパフォーマンスが大幅に改善されますが、「中」に指定された項目を改善すると、ページへの影響が少なくなります。 これらは最も影響が大きい項目であるため、これらの項目に優先順位を付けて改善の取り組みを開始する方が理にかなっています。 緑色のアイテムは、あなたがすでに良好な状態にあることを示しているため、これらのアイテムに対して行う作業は、ページに大きな直接的な影響を与えることはありません.

    ウェブバイタル

    2020 年 5 月、Google はCore Web Vitalsを使用してサイトのパフォーマンスを向上させるために注目すべき主要な指標を発表しました。

    GTmetrix は、これらの指標に沿ったテストで次の値を提供します。

    これらの指標について簡単に説明すると、次のようになります。

    Largest Contentful Paint (LCP) は、最大のコンテンツを表示するのにかかる時間です。 総ブロック時間 (TBT) は、ページの読み込み中にスクリプトによってブロックされた時間です。 累積レイアウト シフトは、ページの読み込み中にユーザーが経験するレイアウト シフトに関連しています。

    概要タブ

    [概要] フィールドでは、GTmetrix によってページのパフォーマンスと読み込み時の動作の概要が表示されます。 この領域で提示された問題と解決策は、ページのパフォーマンスを改善するのに十分なものであるため、GTmetrix で作成するサイト速度レポートで実行するアクションのソースと見なすことができます。

    概要領域の上部に、速度の視覚化領域が表示されます。 ここでは、ページの読み込み中のユーザー エクスペリエンスを観察できます。

    次に、トップの問題領域で、GTmetrix は Pagespeed Insights と同様に、ページのパフォーマンスに関する問題を表示し、提案を提供します。 ここに示されている問題を改善すると、GTmetrix で再テストすることで、サイトの速度の改善を追跡することもできます。

    [ページの詳細] 領域では、ページに送信されるリクエストの数と種類、およびそれらが生成するサイズ (バイト) を確認できます。

    [ページの詳細]セクションから、各説明にマウスを合わせると、各説明のより詳細な説明にアクセスできます。

    概要領域の最後のタイトルはMore from GTmetrixです。 このタイトルでは、GTmetrix がサイトのテスト中に発見した情報を提案します。 例えば; WordPress または Shopify インフラストラクチャを使用していると判断された場合は、このエリアから使用するインフラストラクチャに固有のソリューションの提案にアクセスできます。

    ウォーターフォールヘッダーの薄茶色の領域は、ブロック機能を持つファイルを示します。 したがって、これらのファイルの最適化を検討する必要があります。

    ブラウザを右クリックして [レビュー] と言うと、[ネットワーク] 見出しからウォーターフォールにアクセスすることもできます。 GTmetrixの方が便利だと思います。

    重要なポイントに触れてみたこのブログがお役に立てば幸いです。 他のブログコンテンツでお会いしましょう。 :)

    資力：

    https://gtmetrix.com/blog/everything-you-need-to-know-about-the-new-gtmetrix-report-powered-by-lighthouse/

    https://gtmetrix.com/blog/basic-analysis-with-gtmetrix/