ウェブバイタルの中心

はじめに

2020年5月に導入されて以来、GoogleのCore Web Vitals (CWV)スイートは、ウェブサイトのパフォーマンスを測定する重要な指標となっている。 Googleがページランキングアルゴリズムの一部としてこれらの値を考慮すると、CWVに関してあなたのウェブサイトのパフォーマンスを最大化するだけでなく、あなたのユーザーのための経験を向上させるが、あなたの検索エンジンのランキングを向上させる。 この記事はあなたのページスコアを増進し、ユーザー満足度を高め、そしてあなたの要点を後押しするのを助ける先端そして技術を探検する。

コアウェブバイタルとは？

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

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

Largest Contentful Paint (LCP ):フォールドより上に表示されているコンテンツがロードされるまでにかかる時間に焦点を当てて、知覚されるロード速度を測定する。 理想的なユーザーエクスペリエンスを提供するために、LCPはページロードタイムラインで2.5秒以内にトリガーされるべきである。

最初の入力遅延

First Input Delay (FID):ユーザーのアクションとページ応答の間の遅延を測定することでページ応答性を測定する。 理想的なユーザーエクスペリエンスを提供するために、ページは100ミリ秒以下のFIDを持つべきである。

累積レイアウトシフト

累積レイアウトシフト（CLS）：ページ上のレイアウトシフトの複合測定を使用して、表示の安定性を測定する。 理想的なユーザーエクスペリエンスを提供するためには、ページのCLSを0.1以下に維持する必要があり、0.1から0.25の間は中等度と見なされ、0.25を超えると貧弱と見なされる。

…なぜ重要なのか？

多くのビジネスのために、ウェブサイトの性能はビジネスの成功と直接相関関係がある。 調査によると、CWVスコアが合格したウェブサイトは、そうでないページに比べて検索結果の可視性が最大37%向上する可能性があり( Beus )、CWVスコアが改善されると、訪問者あたりの収益とコンバージョン率の両方が増加する(Duong et al .)。

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

簡単に言えば、より速いウェブサイトは、特にeコマースのウェブサイトのコンテキスト内で、より良いSEOランキングとより幸せなユーザーを作る;これらが結合して直帰率を低下させ、コンバージョンを増加させる。

ではどうすれば改善できるのか？

最初の入力遅延

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

実際、メイン実行スレッドをブロックするものは、FIDのパフォーマンスを低下させる原因となる。 リソース集約型または長時間実行されるJavaScriptタスクに注意し、UIに関連しないコードをWebワーカーにリファクタリングすることを検討する。また、遅延読み込みとコード分割技術を使用して、必要なJavaScriptのみが必要なときにのみロードされるようにすることも検討する。

また、技術的にはCWVのコア要素ではないが、関連する別の指標に言及する価値がある。Interaction to Next Paint (INP)。 INPはページとのやり取りから、そのやり取りを反映したページ更新までの時間を測定する。 INPとFIDはどちらもページ全体の反応を測定するが、INPは最初の反応ではなく全てのページの反応に関係しており、初期の反応だけでなくセッション全体でページが反応し続けることを目指している。 INPはユーザー体験全体で最悪のインタラクションパフォーマンスを追跡し、それをCRUXに報告する。 ページ応答性の尺度として、すぐにINPがFIDに取って代わる可能性が高いので、注目する価値がある。

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

ページパフォーマンスの最も重要で影響力のある指標は、間違いなくLCPである。 予想通り、最大のコンテンツフルペイントの最も一般的な例は「ヒーロー」イメージである-通常は「fold」の上のビューポートの全幅を占める大きなイメージやビデオである。 この要素を最適化する技術は他のページリソースと同じであるが、そのリソースがレンダリングされるのにかかる時間は、ユーザーが経験する最初の主要な要素であるため、最も重要である。

キューで待機中
LCP要素の要求タイミングを分解することは、その性能を最適化するのに非常に有用である。 ブラウザからのリクエストはキューから始まる。 キュー内でのLCPリクエストのミリ秒ごとの消費は、LCPスコアに寄与するミリ秒である。したがって、これらの要素がブラウザキュー内で不釣り合いな時間を費やしていることがわかった場合は、その前にリクエストされているものとその理由を調べ、LCPリソースの優先順位を付けるための措置を講じる。 リソースがfoldの下にあるか、遅延ロードされたり、遅延されたりする可能性のある他のスクリプトがあるかもしれない。 操作の順序が重要である。

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

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

ブラウザをヘルプアウトする
サイズの最適化に加えて、<>ブラウザがデバイスをよりインテリジェントに要求するための適切なリソースを選択できるようにするピクチャタグの使用を検討する。 デスクトップブラウザでは、高解像度の画像を表示するために画面面積が大きくなることがあるが、同じリソースを使用すると、画面が小さいモバイルデバイスでは困惑する。 最適化されたリソースとCSSメディアクエリを使用して、ブラウザがデバイスタイプに適したリソースを要求し、サーバーからクライアントへのバイト転送に費やされる時間を削減できる。

さらに、ブラウザにLCPリソースをプリロードしてフェッチ優先度を指定するように依頼することで、ヘルプハンドを与えることができる。 これらはブラウザに重要度の低いリソースよりも優先順位を付ける手がかりを与える。 より速くブラウザに到達するほど、より速くレンダリングできるようになり、LCPがより速く発生するほど良い。

累積レイアウトシフト

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

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

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

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

これは、ページに動的に追加される可能性のあるコンテンツについても同様である。 広告、<iframe>、またはその他の動的に追加されたコンテンツがCLSに寄与する可能性がある。 これらのアイテムのためにスペースを事前に確保することで、ページコンテンツのシフトが少なくなる。 また、既存のページコンテンツの上にコンテンツを追加することは避けてください。これにより、ページ全体が下に移動する。

ブラウザが事前にスペースを切り取るのを助けることはCLSを減らすが、ユーザーが他の空白ページのこれらの部分が有用なコンテンツで移入されるのを待つので、全体的なユーザーエクスペリエンスを犠牲にするかもしれない。 中間点として、要素ロードスケルトンを実装することは、今後さらに増えることをユーザーに伝えるための有用なテクニックであり、ブラウザが追加のページコンテンツを調整するために残りの作業を行っている間に、より速いエクスペリエンスの印象を与える。 さらに、これらはアニメーションGIFではなくCSSアニメーションを使用して実装することができ、かつ実装する必要があるということである。つまり、CSSのほんの数行を使用して、Webサイト全体でこの手法を実装できる。

ラッピングアップ

一見すると、Core Web VITASは、検索結果内のページランクを決定するGoogleの伝説的で陰気なアルゴリズムの最新の部分のように見えるかもしれないが、ある程度は正しいかもしれない。 しかし、それ以上に、Core Web Vitalsはページのパフォーマンスを測定し、ユーザーエクスペリエンスの観点から重要なことを記述するためのベースラインを確立するためのより具体的なフレームワークを表している。 網羅的ではないが、前述のテクニックは、トラブルシューティングを行い、ウェブサイトのパフォーマンスを最適化しながら、うまくいけばユーザーエクスペリエンス、ページランク、収益の改善につながる一歩を提供する。