Home 技術記事 ウェブバイタルの中核
Applications

About The Author

Outline

はじめに

2020年5月に導入されて以来、GoogleのCore Web Vitals (CWVs)スイートは、ウェブサイトのパフォーマンスを測定するための重要な指標となっています。 Googleはこれらの値をページランキングアルゴリズムの一部として考慮しているため、CWVの観点からウェブサイトのパフォーマンスを最大化すると、ユーザーのエクスペリエンスが向上するだけでなく、検索エンジンのランキングも向上します。 この記事では、ページのスコアを向上させ、ユーザーの満足度を高め、収益を向上させるためのヒントとテクニックを紹介します。

Core Web Vitalsとは何ですか?

テクノロジーの他の多くのものと同様に、Googleのウェブバイタルは3文字の頭字語の群れであり、それぞれがウェブサイトのパフォーマンスの測定可能な側面を表しています。 ステージを設定するには、Core Web Vitalsを定義する3つの主要なメトリックを定義します。

最大のコンテンツフルペイント

最大コンテンツフルペイント(LCP):折り目の上の可視コンテンツがロードされるまでにかかる時間に焦点を当てて、認識されたロード速度を測定します 。 理想的なユーザーエクスペリエンスを提供するには、LCPはページロードタイムラインで2.5秒以内にトリガーされる必要があります。

最初の入力遅延

First Input Delay(FID):ユーザーの操作とページの応答の間の遅延を測定することで、ページの応答性を測定します 。 理想的なユーザーエクスペリエンスを提供するには、ページのFIDが100ミリ秒以下である必要があります。

累積レイアウトシフト

累積レイアウトシフト(CLS):ページのレンダリング時のレイアウトシフトの合成測定を使用して、視覚的な安定性を測定します 。 理想的なユーザーエクスペリエンスを提供するために、ページは0.1以下のCLSを維持する必要があります。0.1から0.25の間はすべて中程度と見なされ、0.25を超えると問題があります。

… なぜ重要なのでしょうか?

多くの企業にとって、ウェブサイトのパフォーマンスはビジネスの成功と直接の相関関係があります。 調査によると、CWVスコアが合格したウェブサイトは、そうでないページと比較して、検索結果の可視性が最大37%向上する可能性があります。また、CWVスコアが向上すると、訪問者1人当たりの収益とコンバージョン率の両方が向上する可能性があります(Duong et al . )。

の操作中 明良女性ファッションブティックであるEdgioは、ウェブサイトのCWVを改善し、最初のページ読み込み時間を5秒から約1秒に短縮し、CWV測定値を改善し、最終的にオーガニックトラフィックの+30%増加、チェックアウト開始の+61%改善、コンバージョン率の37%向上を実現しました。

簡単に言うと、ウェブサイトが高速化すると、SEOランキングが向上し、ユーザーがより幸せになります。特にeコマースWebサイトのコンテキスト内では、これらが組み合わされて直帰率が低下し、コンバージョンが増加します。

では、どうすれば改善できるのでしょうか。

最初の入力遅延

まず、低いぶら下がっている果物から始めましょう。最初の入力遅延。 良いニュースは、ウェブサイトがFIDスコアに合格していることです。 しかし、そうでない場合、多くの場合、原因はWebサイトのライフサイクルの初期にロードされたサードパーティのスクリプトであり、ユーザー入力を受け取るために必要なメインスレッドの実行をブロックする可能性があります。 エラーをキャプチャし、画面記録を実行するツールは、追加の精査の主要な候補です。

実際、メイン実行スレッドをブロックするものはすべて、FIDパフォーマンスの低下につながる可能性があります。 リソースを大量に消費するJavaScriptタスクや長時間実行されるJavaScriptタスクを注意深く監視し、UIに関連しないコードをWebワーカーにリファクタリングすることを検討してください。また、遅延読み込みとコード分割のテクニックを使用して、必要なJavaScriptだけが必要なときだけ読み込まれるようにします。

また、技術的にはCWVの中核要素ではありませんが、別の関連指標であるInteraction to Next Paint (INP)に言及する価値があります。 InPは、ページとの対話から、その対話を反映した後続のページ更新までの時間を測定します。 INPとFIDはどちらもページの全体的な応答性を測定しますが、INPは最初の対話よりもすべてのページの対話に関心を持ち、事前の対話だけでなく、セッション全体を通してページの応答性を維持することを目指しています。 InPは、ユーザーエクスペリエンス全体で最悪のインタラクションパフォーマンスを追跡し、それをcruxに報告します。 ページの応答性の尺度としてINPがFIDに代わる可能性が高いため、注目する価値があります。

最大のコンテンツフルペイント

おそらく、ページパフォーマンスの最も重要で影響力のある指標はLCPです。 予想通り、最大のコンテンツフルペイントの最も一般的な例は、「ヒーロー」画像です。大きな画像またはビデオで、通常は「折り目」の上のビューポートの幅全体を占めます。 この要素を最適化するテクニックは他のページリソースと同じですが、リソースのレンダリングにかかる時間は非常に重要です。これは、ユーザーが最初に体験する主要な要素であるためです。

キューで待機中
LCP要素の要求タイミングを分解することは、パフォーマンスを最適化するのに非常に役立ちます。 ブラウザからのリクエストはすべてキューから始まります。 キューでLCPリクエストが消費される1ミリ秒は、LCPスコアに影響するミリ秒です。したがって、これらの要素がブラウザキューで不釣り合いな時間を費やしていることがわかった場合は、その前に要求されている内容とその理由を調査してください。 LCPリソースに優先順位を付ける手順を実行します。 リソースがフォールドの下にある場合や、遅延ロードされたり、遅延したりすることのできる他のスクリプトがある場合があります。 操作の順序が重要です。

サーバーで待機中
ネットワーク要求を開始した後、ブラウザクライアントはサーバがその要求を受信し、処理し、応答するのを待つ必要があります。 このメトリックは、Time-to-first-byte(TTFB)と呼ばれます。 サーバーが要求に応答するのが遅い場合、LCPスコアが低下します。 CDNを使用すると、リソースのキャッシュコピーをエンドユーザーに地理的に近い場所に保持し、単一のアプリケーションサーバーよりも迅速にそのリソースに応答できるため、CDNを使用すると速度の向上に大きな影響を与える可能性があります。 CDNを使用するその他の優れた側面には、組み込みのセキュリティWAFと、大きなトラフィックスパイクに対応する機能があります。 速度を重視する場合は、CDNを使用する必要があります。

ワイドオンザワイヤ
この時点で、ブラウザがページのライフサイクルの早い段階でLCPリソースを要求し、サーバーがそれらに迅速に応答するようになることを願っています。 次に考慮すべき要素は、要求されたリソースの全体的なサイズです。 ブラウザに「ワイヤを介して」移動する必要があるすべてのバイトには時間がかかり、それらのバイトが多いほど、リクエストが完了するまでに時間がかかります。 したがって、リソースの転送にかかる時間を最小限に抑えるために、リソースをできるだけ小さくするように注意する必要があります。 これには、Kraken.ioやimgix.comなどのサードパーティの画像最適化およびホスティングサービスの使用が含まれます。これにより、WebPなどの「NextGen」形式のメディアファイルを最適化および提供できるため、サイズをさらに縮小できます。

ブラウザをヘルプアウト
サイズの最適化に加えて、画像タグの使用を検討して <> ください。これにより、ブラウザはデバイスをよりインテリジェントに要求するための適切なリソースを選択できます。 デスクトップブラウザには、より高解像度の画像を表示するために大きな画面領域がある場合がありますが、同じリソースは、より小さな画面を持つモバイルデバイスに行き詰っています。 最適化されたリソースとCSSメディアクエリを使用すると、ブラウザがデバイスタイプに適したリソースを要求することを確認し、サーバーからクライアントへのバイト転送にかかる時間を短縮できます。

さらに、LCPリソースをプリロードし、フェッチ優先度を指定するようにブラウザに指示することで、ブラウザに支援を与えることができます。 これらは、重要ではないリソースよりも重要なリソースの優先順位を決定するためのヒントをブラウザに提供します。 ブラウザにアクセスするのが速いほど、レンダリングが速くなり、LCPが速くなるほど、より良い結果が得られます。

累積レイアウトシフト

私たちはいつもそれを目にしています。 Webサイトを取得するためにブラウザをオフにした後、ページの読み込みが開始されます。 ページが構築されている間、興味のある部分が表示され、ページ全体が突然移動し、クリックしようとしていると思ったリンクが突然別の場所にあるときにクリックします。 この現象はレイアウトシフトと呼ばれます。 それはすべての人にとって迷惑であり、通常は自己負担であり、人類の利益のためにそれを最小限に抑えるように努力する必要があります。

いつもの容疑者は
より高いCLSスコアの一般的な原因は次のとおりです。

  • スティッキヘッダー
  • クライアント側でロードおよびレンダリングされるプロモーションバナーまたは「ヒーロー」バナー
  • ニュースレター、クーポン、GPDRに関する通知
  • ページに動的に挿入されるその他のサードパーティ統合

境界の設定
LCPについて説明したときに参照した図の要素を覚えてい <> ますか? そこに含まれるさまざまな要素に寸法を追加することを忘れないでください。 これらの値を省略すると、これらの要素のレンダリング方法をブラウザに指示するときに、運転席から出ます。 寸法を定義することにより、ブラウザは画像が描画される正しい量のスペースを確保し、シフトを減らすことができます。

ページに動的に追加される可能性のあるコンテンツについても同様です。 アドバタイズメント、 <iframe>、またはその他の動的に追加されたコンテンツは、CLSに寄与することがあります。 これらの項目のスペースを事前に予約することで、ページコンテンツの移動量が少なくなります。 また、既存のページコンテンツの上にコンテンツを追加しないでください。これにより、ページ全体が下に移動します。

ブラウザが事前にスペースを切り開くのを助けると、CLSは減少しますが、ユーザーが他の空白のページのこれらの部分に有用なコンテンツが入力されるのを待つため、全体的なユーザーエクスペリエンスを犠牲にする可能性があります。 中間点として、要素ローディングスケルトンを実装すること は、今後さらに多くのことがあることをユーザーに伝えるための便利な技術であり、ブラウザが追加のページコンテンツを調整するために残りの作業を行いながら、より速いエクスペリエンスの印象を与えることができます。 さらに、これらは、アニメーションGIFではなくCSSアニメーションを使用して実装できることと、実装すべきであることです。つまり、わずか数行のCSSを使用して、Webサイト全体にこの手法を実装できます。

まとめ

表面的には、Core Web VITASは、検索結果内のページランクを決定するためのGoogleの伝説的で影のあるアルゴリズムの最新の部分のように見えるかもしれません。ある程度は正しいかもしれません。 しかし、それ以上に、Core Web Vitalsは、ページパフォーマンスを測定し、ユーザーエクスペリエンスの観点から重要なことを説明するためのベースラインを確立するためのより具体的なフレームワークを表しています。 完全ではありませんが、上記のテクニックは、トラブルシューティングとWebサイトのパフォーマンスの最適化を行う際の足かせとなり、ユーザーエクスペリエンス、ページランク、収益の向上につながることを願っています。