Semalt：ラージコンテンツフルペイント（LCP）




あなたがこれを読んでいるなら、あなたは満足のいく絵の具が何であるか疑問に思っている可能性がありますか？ LCPスコアを測定する方法と、LCPスコアを最適化して「WebVitals」スコアを向上させる方法を教えてください。

この記事では、これらすべての質問に対する答えを見つけるお手伝いをします。 Largest Contentful Paint（LCP）は、Googleのユーザー指標であり、初心者のランキング要素になっています。この記事の終わりまでに、LCPとは何か、そして最高のスコアを達成するためにどのように役立つかを学んだはずです。

最大の満足のいくペイントとは何ですか？

LCPは、ページのメインコンテンツがダウンロードされ、ユーザーと対話できるようになるまでにかかる時間の測定値です。この測定では、ユーザーの画面またはページ上の画像のサイズに収まるコンテンツの最大ブロックが考慮されます。

LCPは、その時点で画面に表示されているもののみを測定し、ユーザーの視点外のものは無関係と見なされます。 LCPが測定する要素には次のものがあります。
LCPメトリックを使用すると、サイトの視覚要素が読み込まれるまでにかかる時間を測定できます。間違いなく、この知識はCWVのユーザーエクスペリエンス要素の改善に大いに役立つでしょう。 LCPのおかげで、訪問者がサイトとその表示で楽しむ満足度を向上させることができます。

サイトがユーザーにコンテンツを提示するのに時間がかかりすぎると、ユーザーが満足できないままになる可能性が高くなります。ほとんどの場合、ユーザーは離れます。

LCPの測定は重要ですか？

LCPは、読むすべてのSEO記事でよく耳にしたり見たりするものではないかもしれませんが、重要です。 LCPは、Core Web Vitalsの主要な指標の1つとして選択されましたが、それは間違いではありませんでした。これは、ユーザーが検索したWebサイトをどれだけ早く使用できるかを正確に測定するためです。

これはあなたが他のどこにも見つけられなかったかもしれないあなたのサイトの見通しをあなたに与えます。これにより、ページ上のブロックレベルの要素や大きな要素などの要素を簡単に測定できます。

LCPスコアの計算に使用されるブロックレベルの要素

LCPスコアの計算に使用されるブロックレベルの要素は、divの見出しフォーム要素の横にある<main>要素と<section>要素にすることができます。

テキスト要素を含む任意のHTMLブロック要素は、それが最大である限り使用できます。すべての要素が含まれているわけではありません。たとえば、LCPを計算するとき、VIDEO要素とSVG要素は考慮されません。ただし、将来的にはそのような要素が追加される可能性があります。

あなたがする必要があるのはあなたのウェブページを見て、最大のブロックまたは画像を選ぶことだけなので、LCPは理解するのが簡単です。これは、計算するのにほぼ最も基本的なメトリックです。次に、サイトを最適化する必要がある場合、これらの要素のサイズを縮小する必要があります。とても簡単です。

Webトラフィックの大部分がモバイルデバイスからのものであるように思われることを考えると、モバイルファーストのアプローチを検討するのが最善です。また、Googleはインデックスチェックリストでモバイルファーストを考慮しているため、最初にモバイルの視点を最適化することをお勧めします。そうすれば、サイトのデスクトップバージョンに焦点を当てることができます。

大きな要素を遅らせることは役に立たないかもしれません

Webページが断片的に読み込まれることがあることに気づきましたか？大きな注目の画像があると、最大のテキストブロックレベルの要素と完全に比較した場合、レンダリングに時間がかかる場合があります。

この課題に直面すると、最大のブロックレベル要素のPerformanceEntryをログに記録します。ただし、画面上部の注目の画像が読み込まれ、その要素がユーザーの画面のより多くを占める場合は、画像の別のPerformanceEntry目標を報告する必要があります。

ほとんどの場合、画像はLCPスコアの測定で最も難しい部分です

ほとんどの場合、Webパブリッシャーは元のサイズで画像をアップロードし、CSSまたはHTMLを使用して画像のサイズを変更し、小さいサイズで表示します。元のサイズを画像の固有のサイズと呼びます。

出版社が幅2048ピクセル、高さ1152ピクセルの画像をアップロードすると、それが元の本来のサイズになります。ただし、サイト運営者がその画像のサイズをたとえば640 X 360ピクセルに変更すると、その新しい値が表示サイズと見なされます。測定時に使用する数字を選択するとき、Googleは単に固有サイズと可視サイズの画像の間の小さいサイズを選択します。

HTMLまたはCSSを使用して固有サイズの画像のサイズを変更し、表示サイズの画像よりも小さくしても、より高いLCPスコアを達成することができます。画像が小さいほどダウンロードが速くなり、LCPが上昇します。

LCPが別のドメインからの注目画像をどのように考慮するか

画像がCDN（コンテンツ配信ネットワーク）から提供されていると仮定しましょう。LCPスコアを計算するときに考慮されますか？いいえ、通常は考慮されません。それをLCPスコアに含めたいパブリッシャーは、Timing-Allow-Originヘッダーを設定する必要があります。

このヘッダーをサイトに追加すると、注意が必要になる場合があります。構成で（*）ワイルドカードを使用すると、サイトがハッキングイベントにさらされる可能性があります。したがって、このヘッダーを追加するときは、CDNからのタイミング情報を表示できるように、Googleのクローラーに固有のドメインを追加する必要があります。

この時点で、別のドメインからロードした画像などのリソースは、計算の一部としてカウントされません。

LCPスコアを測定する方法

スコアリングツールには、フィールドツールとラボツールの2種類があります。

フィールドツールは、サイトのパフォーマンスの実際の測定値を指します。

一方、ラボツールは、携帯電話の一般的なユーザーが遭遇する可能性のあるインターネットの状態を概算するアルゴリズムを使用して、シミュレートされたクロールに基づいて仮想スコアを提供します。

LCPの最適化

最適化する際に焦点を当てる主な領域は3つあります。
  1. 遅いサーバー
  2. レンダリングをブロックするJavaScriptとCSS
  3. リソースの読み込み時間が遅い
サーバーの速度が遅いと、DDOSレベルで問題が発生する可能性があります。

結論

スピードはウェブサイトとして生き残るための重要な側面になっています。ターゲットオーディエンスに到達するには、非常に優れたLCPを持っていることを含め、最高である必要があります。

セマルト すべてのデバイスにすばやく読み込まれるようにサイトを最適化するなどのサービスを提供します。ユーザーエクスペリエンスの向上やその他のSEOのメリットにより、Webサイトは訪問者のランク付けとコンバージョンの可能性が高くなります。


send email