サイトの速度を向上させるために低い First Contentful Paint スコアを取得する方法

公開: 2023-08-13

Web サイトの読み込みに 2 秒以上かかる場合、待ってもよろしいですか? おそらくそうではありません。実際、 42%の人が、機能の低い Web サイトから離れると回答しています (Top Design Firms の調査)。サイトのパフォーマンスはどのサイトにとっても非常に重要であり、 First Contentful Paint (FCP) は、Google がページの読み込み速度を評価する際に考慮する要素の 1 つです。

読み込み速度と時間は Web サイトによって異なります。複雑なサイトは、単純な Web サイトに比べて時間がかかります。さまざまな指標を使用して速度を測定し、そのデータを使用してサイトのパフォーマンスとユーザーエクスペリエンスを向上させることができます。

ただし、より正確なデータを取得するには、 First Contentful Paint (FCP) を考慮する必要があり、 Largest Contentful Paint (LCP) についても知る必要があります。これら 2 つの用語は、ページの読み込み速度に対するユーザーの認識を表します。そして間違いなく、Google はその優先順位を強調しています。

では、FCP と LCP は、Web サイトのパフォーマンスを理解するのにどのように役立つのでしょうか? このブログでは、その全体を段階的に説明していきます。

私たちのブログを読むと、LCP と FCP の両方を理解し、サイトのパフォーマンスを向上させるためにそれらを使用する方法を理解できるようになります。ここで取り上げる内容は次のとおりです。

First Contentful Paint とは何ですか?
最初のコンテンツフルペイントを測定する方法
最初のコンテンツフルペイントスコアが低い原因は何ですか?
SEO の問題として First Contentful Paint を考慮する必要があるのはなぜですか?
最初のコンテンツフルペイントを改善するには?
最初のコンテンツフルペイントの例
初のコンテンツフルペイント (FCP) と最大のコンテンツフルペイント (LCP) – 2023 年にこれらを無視できない理由
最大のコンテンツを含むペイントとは何ですか?
最大のコンテンツを含むペイントを測定するには?
最大コンテンツフルペイントスコアが低い原因は何ですか?
最大のコンテンツフルペイントを SEO の問題として考慮する必要があるのはなぜですか?
最大のコンテンツを含むペイントを改善するには?
画像は最大のコンテンツペイントにどのような影響を与えるのでしょうか?
最大のコンテンツを含むペイントの例
よくある質問

始めましょう-

First Contentful Paint とは何ですか?

最初のコンテンツフルペイントは、ページの読み込みにかかる合計時間です。上の図は、この用語をより簡単に定義しています。これは、ページの読み込み速度の測定に役立つユーザーフレンドリーな指標です。ブラウザは FCP 用にいくつかのコンテンツをレンダリングする必要があります。

First Contentful Paint (FCP) は、ブラウザーが DOM (Document Object Model) からコンテンツの最初のビットをレンダリングし、ページが実際に読み込まれているという最初のフィードバックをユーザーに提供します。「それは起こっていますか？」という質問最初のコンテンツペイントが完了すると「はい」になります。

モジラ

しかし、従来のツールとどう違うのでしょうか?

ユーザーが Web サイトに移動した後、ブラウザーが画像、テキスト、SVG、白以外の要素などのドキュメントオブジェクトモデル (DOM) コンテンツの最初の部分を表示するまでにかかる時間を測定します。

FCP スコアが高いほど、コンテンツの読み込みは遅くなります。

あらゆる Web サイトの最初のコンテンツフルペイントを測定するツール

ラボテストとフィールドツールの両方を通じて測定できます。 First Contentful Paint の測定に役立つさまざまなツールが用意されています。これらのツールの一部は次のとおりです。

Webページのテスト
灯台
ページスピードの洞察
サーチコンソール
Chrome ユーザーエクスペリエンスレポート
Chrome 開発ツール。

さらに、JavaScript でFCP を測定するために Paint-Timing API を使用することもできます。

最初のコンテンツフルペイントスコアが低い原因は何ですか?

これは、FCP スコアが低い原因のスクリーンショットです。 — 出典: ManageWP

FCP スコアに影響を与える原因はさまざまです。それらがスコアにどのように影響するかを知っていれば、それらを避けて全体的なパフォーマンスを調整することができます。これらの理由のいくつかを以下に示します。

1. ブロックスクリプトと外部スタイルシートのレンダリング

レンダリングブロックとは、何かが原因でドキュメントオブジェクトモデル (DOM) のレンダリングに問題が発生することです。ブラウザは、さらなる操作を実行する前に、これらの特定のコード障害を処理する必要があります。これらの多くは重要ですが、スコアを向上させるためにそれらを遅らせることができます。

ユーザーエクスペリエンスを向上させるには、ドキュメントオブジェクトモデル (DOM) のレンダリングに JavaScript ファイルが必要ない場合、Web サイトのヘッダーから JavaScript ファイルを移動する必要があります。また、後でロードすることもできます。または、サイトを最大限に活用したい場合は、レンダリングをブロックするリソースを完全に削除することもできます。

2. JavaScript ファイルにより First Contentful Paint スコアが低下する可能性がある

これは、JavaScript ファイルによって First Contentful Paint スコアがどのように低下するかを示すスクリーンショットです。 — WPロケット

JavaScript は、Web サイトの速度を低下させる主な原因の 1 つです。他のものに比べて処理に多くのリソースを必要とし、処理に多くの時間を費やしてしまいます。また、大きな JavaScript ファイルはパフォーマンスを低下させ、さらなる問題を引き起こす可能性があります。

3. テキストベースのアセットが大きいとスコアが低下する可能性がある

HTML や JavaScript などの重要なテキストベースのファイルを完全に削除することはできません。できることは、パフォーマンスをアップグレードするために常にそれらを減らすことだけです。最善の方法は、これらのファイルを圧縮することです。

もう 1 つの方法は、無関係な文字をスペースとともに削除することです。元のファイルよりもはるかに少ないスペースを占める、コンパクトなファイルが作成されます。

FCP スコアが高いその他の理由は次のとおりです。

フォントの読み込み時間が遅い
サーバーの応答時間が遅い (TTFB)
リクエスト数が多く、転送サイズが大きい
未使用または非効率的な CSS
スクロールせずに見える範囲にあるスクリプトベースの要素
スクロールせずに見える部分の遅延読み込み
画像をスクロールせずに見える範囲にインライン展開しない
DOM サイズが大きすぎます
複数のページのリダイレクト。

ただし、FCP はパフォーマンススコア全体の 10% を占めることに注意してください。その結果、重み付けされたスコアは全体的なパフォーマンススコアに大きな影響を与えます。

SEO の問題として First Contentful Paint を考慮する必要があるのはなぜですか?

はい、そうすべきです。

どのような Web サイトでも、しっかりとした SEO 戦略は必須です。それがなければ、ウェブサイトのランキングは低下します。 Google は、サイトのパフォーマンスを評価する指標として First Contentful Paint を使用します。

では、それはSEOにどのような影響を与えるのでしょうか?

検索エンジンボットにとって、SEO は Web サイトのランキングに関する要素の 1 つです。 SEO のベストプラクティスに関して言えば、ページの読み込み速度を避けることはできません。 FCP スコアは、読み込み速度を向上させ、Web サイトをより高い検索エンジンランクに向けて一歩前進させるのに役立ちます。

最初のコンテンツフルペイントを改善するには?

何らかの理由で、Web サイトの FCP スコアが低い場合があります。さまざまな方法で改善して、高いスコアとパフォーマンスを得ることができます。これらは次のとおりです。

サイトにキャッシュを使用する
使用されていない CSS を削除する
大規模なネットワークペイロードから遠ざける
スクロールせずに見える画像の遅延読み込みを避ける
サイトのドキュメントオブジェクトモデル (DOM) サイズを最適化します。

詳細を見てみましょう -

サイトにキャッシュを使用する

TTFB (最初のバイトまでの時間) を短縮する 1 つの方法は、キャッシュを使用することです。どうやって？そうですね、キャッシュはサーバーの処理時間を短縮し、Web サイトの読み込み速度を向上させるのに役立ちます。

使用されていない CSS を削除する

未使用の CSS は大量のバイトを消費する可能性があります。さらに、ブラウザのレンダーツリーの構築が遅くなります。ブラウザは、ツリーを構築するときに、ノードに適用可能な CSS ルールを確認する必要があります。未使用の CSS が多いほど、ブラウザにかかる時間が長くなります。 Chrome DevTool の [カバレッジ] タブを使用してそれらを見つけることができます。

大規模なネットワークペイロードから遠ざける

サイトを高速化して FCP スコアを高めるには、いかなる犠牲を払っても大きなペイロード、つまり大きなファイルサイズを避けてください。サイトの検索エンジンでの順位が下がるだけでなく、多額の費用もかかります。

さらに、ペイロードが高くなるほどページが大きくなり、ページの読み込み速度とダウンロード時間が増加します。ネットワークリクエストの全体的なサイズを減らすと、ユーザーエクスペリエンスが向上します。

これは、スクロールせずに見える画像の遅延読み込みを回避する方法の画像です。 — iStock

スクロールせずに見える画像の遅延読み込みを避ける

画像の多いコンテンツを含む Web サイトを所有していて、First Contentful Paint スコアを上げたい場合。次に、画像の遅延読み込みを避けます。 JavaScript に依存しているため、ブラウザによる画像のレンダリングに時間がかかり、スコアに影響します。

サイトのドキュメントオブジェクトモデル (DOM) サイズを最適化する

サイズの大きいドキュメントオブジェクトモデル (DOM) は、First Contentful Paint スコアに悪影響を与える可能性があります。読み込みの最初の段階では、最適化されていないツリーにはユーザーには見えないノードが含まれます。

また、ドキュメントオブジェクトモデルのサイズが大きいと、スタイルの処理とノードの計算により多くの時間が必要となり、レンダリングに悪影響を及ぼす可能性があります。さらに、デバイスのメモリに負荷がかかる可能性もあります。

FCP スコアを向上させるその他の方法は次のとおりです。

必要なオリジンに事前接続する
複数ページのリダイレクトを避ける
キーリクエストのプリロード
効率的なキャッシュポリシーを使用して静的アセットを提供する
クリティカルリクエストの深さを最小限に抑える
Web フォントのロード中にテキストが表示されたままであることを確認する
リクエスト数を低く抑え、転送サイズを小さくしてください。

最初のコンテンツフルペイントの例

どの Web サイトでも、適切な最適化を通じて読み込み時間を短縮し、直帰率を下げる必要があります。

遅かれ早かれ、最適化されていないサイトは競合他社に後れを取ることになります。読み込みに時間がかかりすぎると、ほとんどのユーザーはサイトから離れてしまいます。したがって、Web サイトの最適化は、Web サイト所有者にとって最優先事項である必要があります。

この例は、最適化後の Web サイトの結果を示しています。ページ速度の分析情報やヒートマップなど、さまざまなツールが使用されました。

これは、最初の Contentful Paint のケーススタディのスクリーンショットです。 — 画像ソース: Web 開発者

これらのツールは、最初の入力遅延 (FID)、最初のコンテンツフルペイント (FCP)、リードマグネットクリック、エンゲージメント率など、評価に必要な重要な情報を提供します。

最適化の影響を理解するには、Web サイトの最適化前のデータを確認する必要があります。スコアにより、Web サイトのどこを改善する必要があるかがわかります。

最適化を実行すると、ページの平均読み込み速度がわかります。

ただし、速度が速いほどランキングに有利になる可能性があります。しかし実際には、これはあまり価値のない数桁にすぎません。それでも、Web サイトが検索エンジンでランクを獲得するのに役立ちます。

ラボデータには次の指標が表示されます。

初めてのコンテンツフルペイント
スピードインデックス
最大のコンテンツ豊富なペイント
インタラクティブになるまでの時間
合計ブロッキング時間
累積レイアウトシフト

スコアをより深く理解するには、ラボデータだけでは不十分な場合があります。そのため、ラボデータとフィールドデータの両方を使用することが理想的です。

さまざまなケーススタディでは、First Contentful Paint の優れたスコアが Web サイトにどのようなメリットをもたらすかを理解しようとしました。 結果のほとんどは、優れたパフォーマンスを備えた最適化されたサイトでは First Contentful Paint スコアが増加していることを示しました。

しかし、First Contentful Paint の適切なスコアはどれくらいでしょうか? 最初のコンテンツフルペイントは 1 秒以内に発生し、それを超えてはなりません。

初のコンテンツフルペイント (FCP) と最大のコンテンツフルペイント (LCP) – 2023 年にこれらを無視できない理由

これは、「First Contentful Paint (FCP) vs Largest Contentful Paint (LCP): Why You Can't Ignore in 2023」のスクリーンショットです。 — 画像出典: WP Rocket

Googleは最近、FCPを使用してWebサイトの速度ランキングを評価すると発表しました。しかし、なぜこれらの指標が従来の速度テストよりも優れていると考えられるのでしょうか?

FCP は、サイトのパフォーマンスについて確かなアイデアを提供します。パフォーマンスを向上させてユーザーに快適なユーザーエクスペリエンスを提供したい場合、これらの指標は非常に重要です。そして最終的には、Web サイトの閲覧により多くの時間を費やすことになります。

一方、Largest Contentful Paint は、ページのメインコンテンツのダウンロードにどれくらいの時間がかかるかに関する情報を提供します。そして、ユーザーと対話できるようになります。

最大のコンテンツを含むペイントとは何ですか?

「最大のコンテンツフルペイントとは」のスクリーンショット — キネックスメディア

最大コンテンツフルペイントも重要な指標であり、最大の要素がいつ表示され、ユーザーインタラクションの準備が整ったかを測定するのに役立ちます。

LCP は、画像タグ、画像、CSS を含む背景画像、テキスト要素など、より良いユーザーエクスペリエンスをユーザーに提供するために、関連する要素の読み込み時間をカウントします。

Google Web Vital には、Web サイトの読み込み速度を測定するための Largest Contentful Paint 指標も含まれています。

つまり、これは理解するのに手間のかからない指標の 1 つです。 Web サイトから最大の要素 (テキスト、画像、またはLCP アニメーション) を取得し、その読み込み時間を最適化するだけで済みます。

最大のコンテンツを含むペイントを測定するには?

「最大のコンテンツフルペイントを測定する方法」のスクリーンショット — ウェブ開発

Web サイトの最大コンテンツフルペイントを理解するには、スコアを測定する必要があります。 LCP を測定するには 2 つの方法があります。そして彼らは：

フィールドメソッドを使用すると、Web サイトから直接測定できます。
ラボモードを使用するとスコアを獲得できます。この方法では、Chrome DevTools や Lighthouse などの複数のラボツールを測定に使用できます。

使用できるその他のツールは次のとおりです。

GTメトリクス
Chrome エクスペリエンスレポート
ウェブページのテスト
ページ速度に関する洞察。

最大コンテンツフルペイントスコアが低い原因は何ですか?

「最大コンテンツフルペイントスコアが低い原因」のスクリーンショット — バックリンコ

さまざまな理由が最大コンテンツフルペイントスコアに影響を与える可能性があります。これらはサイトごとに異なる場合があります。これらを理解していれば、サイトを最適化してスコアを上げることができます。一般的な理由は次のとおりです。

クライアント側のレンダリングはスコアに悪影響を与える可能性があります

多くのサイトでは、Web サイトのページをレンダリングするためにクライアント側の JavaScript ロジックを使用しています。大規模な JavaScript バンドルを使用する場合は、スコアに悪影響を及ぼす可能性があるため注意する必要があります。適切な最適化がなければ、Web サイトのコンテンツの読み込み時間が遅くなり、ユーザーはマイナスなエクスペリエンスに直面することになります。

ただし、プリレンダリングやサーバーサイドレンダリングなど、さまざまな最適化を検討できます。

リソースの読み込み時間が遅いと LCP スコアに影響する可能性がある

JavaScript と CSS のブロック時間の増加に加えて、最大コンテンツフルペイントスコアに悪影響を与える可能性のあるさまざまな種類の要素があります。これらの要素の一部は次のとおりです。

<video> 要素
<img> 要素
ブロックレベルの要素

レンダリングをブロックする JavaScript と CSS

ブラウザーがコンテンツを表示する前に、HTML マークアップを解析してドキュメントオブジェクトモデル (DOM) ツリーにする必要があります。ただし、同期 JavaScript タグまたは外部スタイルシートが見つかると、このプロセスは停止します。これらにより、最大コンテンツフルペイントに遅延が発生します。

サーバーの応答時間が遅い

ブラウザは、画面上に何かを表示する前に、まずコンテンツを受信する必要があります。サーバーがコンテンツの送信に遅れると、ページの読み込みが遅くなります。サーバーが高速であれば、ページの読み込み速度も向上します。その結果、Largest Contentful Paint スコアも向上します。

サーバー時間の応答を測定するには、最初のバイトまでの時間 (TTFB) を使用できます。

最大のコンテンツを含むペイントも SEO の問題として考慮する必要がありますか?

はい、そうすべきです。

Google にとって、Largest Contentful Paint は SEO ランキングに関して重要な役割を果たします。これは、Lighthouse 6.0 パフォーマンススコアの 25% を占めます。そして、この特定の表現により、考慮すべき重要な指標となっています。

ユーザーエクスペリエンスが向上すると、ランキングが高くなります。検索エンジンの最初のページのトップ 10 に入る場所を確保しようとする Web サイト間の熾烈な競争がある場合、サイトに有利なスタートを切るには最大のコンテンツフルペイントが不可欠です。

最大のコンテンツを含むペイントを改善するには?

「最大のコンテンツフルペイントを改善する方法」のスクリーンショット — 画像ソース: Web 開発者

この指標は重要であるため、Web サイトが競合他社よりも有利になるように、最大コンテンツフルペイントスコアを高く維持する必要があります。

First Contentful Paint と同様に、いくつかの方法に従って、Largest Contentful Paint スコアを調整することもできます。これらの最大のコンテンツペイント改善方法のいくつかは次のとおりです。

画像の遅延読み込みに JavaScript の使用を控える
サーバーを最適化して LCP スコアを向上させる
ウェブサイトの画像を最適化する
キャッシュを使用して Web サイトのページアセットを保存する
ブラウザのヒントを活用する
コンテンツ配信ネットワークを使用してスコアを改善してみる

画像の遅延読み込みに JavaScript の使用を控える

しかし、なぜ？ブラウザは JavaScript をロードするという面倒な作業を行う必要があります。その後、イメージをレンダリングする前に、それを解析し、再度実行を待つ必要があります。ということで、かなり時間がかかります！このタスクをブラウザーに任せておくことをお勧めします。

サーバーを最適化して LCP スコアを向上させる

Web サイトの読み込み時間はサーバーに大きく依存します。このため、サイトのパフォーマンス向上に役立つ、より優れたインフラストラクチャを提供する評判の高いサーバーを見つける必要があります。サーバーの速度が十分でない場合、サーバーが完全に応答するまで、サイトユーザーには空のページが表示されます。

ウェブサイトの画像を最適化する

間違った画像サイズを使用すると、最大コンテンツフルペイントスコアが低下します。ブラウザが画像を読み込むのに時間がかかると、Web サイトの読み込み速度が遅くなります。ホスティングサービスが推奨する特定のサイズ設定があるかどうかを必ず確認してください。

キャッシュを使用して Web サイトのページアセットを保存する

HTML ページをサーバー側のキャッシュシステムにキャッシュすると、全体の応答時間を効果的に短縮できます。リバースプロキシを使用して、キャッシュサーバーのように機能させることができます。クラウドシステム (Azure および Firebase) にはキャッシュシステムがあるため、それらを使用できます。

ブラウザのヒントを活用する

最大コンテンツフルペイントスコアを向上させるために、遅延、プリレンダリング、プリロード、プリフェッチなどのブラウザヒントを使用できます。特定のブラウザのヒントは、特定のアクションに適用されます。たとえば、最大のコンテンツフルペイントコンテンツに無関係なファイルに対してブラウザの遅延ヒントを使用します。

コンテンツ配信ネットワークを使用してスコアを改善してみる

CDN サービスは、地理的エリア外にいるユーザーがブラウザを十分に高速にできるようにするのに役立ちます。ユーザーがあなたの場所から離れるほど、サイトを読み込むためにブラウザリクエストが移動する必要があるため、時間がかかります。画像を高速に読み込むために、Content Delivery Network サービスを使用することもできます。

これらのヒントは、 WordPressサイトの最大コンテンツフルペイントを簡単に調整するのに役立ちます。

WordPress でブログを書くための 10 の重要な要素を確認できます。

画像は最大のコンテンツペイントにどのような影響を与えるのでしょうか?

画像が最大のコンテンツフルペイントにどのような影響を与えるかを示す図 — アンドレムサンタナ

Web 上で最も一般的なコンテンツの 1 つは画像です。それには正当な理由があります。これらはインタラクティブであり、簡単に注目を集めることができます。どの Web サイトにも、バナー、広告、製品画像などのさまざまな画像が付属しています。

Largest Contentful Paint に影響を与えない画像を使用する必要があります。前に見たように、間違ったサイズを使用すると、Web サイトの読み込み時間が長くなり、最終的にスコアが台無しになります。

また、画像は必ず非同期でデコードしてください。これは最適化のあまり一般的な方法ではありません。最新の画像形式を選択してください。画像サイズを小さくすると画質に影響が出ますが、この方法なら元の画質を保ったままサイズを小さくできます。その代わりに、Largest Contentful Paint スコアが向上します。さらに、最大のコンテンツフルペイントスタックオーバーフローでその他のヒントを確認することもできます。

最大のコンテンツを含むペイントの例

最大のコンテンツフルペイントのケーススタディのスクリーンショット — GTメトリクス

最大のコンテンツフルペイントの例は、最初のコンテンツフルペイントに似ています。スコアを確認するには特定のツールが必要です。ウェブサイトの最適化前のデータを記録する必要があります。そのためには、最大コンテンツフルペイントスコアが必要になります。

Web Vitals メトリクスを取得するには、 Lighthouse バージョン 6を使用する必要があります。ユーザーはパフォーマンス監査を受けるために Chrome Dev Tools タブを選択しました。画像が表示されるとすぐに、Largest Contentful Paint が動作を開始します。

優れた Largest Contentful Paint スコアに関しては、画像が非常に重要です。ただし、例外もあります。

あるケーススタディでは、Largest Contentful Paint では、Chrome DevTools を使用して判明した H1 タイトルなど、画像以外の要素も考慮していることがわかりました。

一言で言えば、ケーススタディを確認することで、目的の最大コンテンツフルペイントスコアを取得するには、画像だけでなくサイト全体を最適化する必要があります。

最初のコンテンツフルペイントに関するユーザーの質問に対する回答

質問 1: Google は SEO における最大のコンテンツフルペイントをどのように定義していますか?

回答: Google では、最大コンテンツフルペイントを、ユーザーのビューポート内で視認性を確保するためのサイト内の「最大のコンテンツ要素」のレンダリング時間として定義しています。

質問 2: 最大のコンテンツフルペイントの問題は何を意味しますか?

回答: Search Console でデスクトップまたはモバイルで 4 秒を超えるエラーが表示された場合、サーバーがビューポートに表示される最大の要素をレンダリングするのに 4 秒以上必要であることを意味します。スコアが 4 秒を超える場合、Google にとっては悪いスコアとなります。

質問 3: WordPress サイトの最大コンテンツフルペイントを減らすにはどうすればよいですか?

回答: WordPress サイトの最大コンテンツフルペイントスコアを向上させる方法としては、より良いホストを選択する、CDN を使用する、画像を最適化する、キャッシュを使用するなどがあります。

質問 4: Final Cut Pro で First Contentful Paint を増やすにはどうすればよいですか?

回答: First Contentful Paint を増やすには、サーバーの応答時間の短縮、画像の遅延読み込みの回避、ドキュメントオブジェクトモデル (DOM) のサイズの最適化、レンダリングをブロックするリソースの排除など、さまざまな方法を実装できます。

質問 5: WordPress でレンダリングをブロックするリソースを削除するにはどうすればよいですか?

回答:レンダリングをブロックするリソースを取り除くには、既製のプラグインを選択する必要があります。無料のソリューションでは、同じ開発者によって開発された 2 つのプラグインである Async JavaScript と Autoptimize を組み合わせることができます。

質問 6: レンダリングをブロックするスクリプトを見つけるにはどうすればよいですか?

回答: Google PageSpeed Insight ツールを使用して、レンダリングをブロックしている特定のファイルにアクセスします。 PageSpeed Largest Contentful Paint スコアは、ページをブロックしている除去できる正確なファイルを示します。

質問 7: 画像はレンダリングをブロックするとみなされますか?

回答:いいえ、画像はレンダリングをブロックしません。青色のドキュメントオブジェクトモデル (DOM) 行にある場合は無視してかまいません。ただし、安全のために、問題が発生した場合には画像を最適化することをお勧めします。

質問 8: 最大のコンテンツを含むペイントを見つけるにはどうすればよいですか?

回答:最大コンテンツフルペイントを計算するには、<main> 要素と <section> 要素であるブロックレベルの要素が必要です。最大のコンテンツフルペイントテキスト要素を含むブロックレベルの要素を計算の対象として考慮できますが、それは最大の要素である必要があります。

最初のコンテンツフルペイントで低いスコアを獲得し、サイトのパフォーマンスを向上させましょう!

これはブログのアイキャッチ画像です WordPress ウェブサイトが読み込まれません

どの Web サイトでも、検索エンジンの結果で上位にランクされて視認性を高めるには、読み込み速度が非常に重要です。多くの Web サイト所有者は速度の最適化の必要性を理解しておらず、それがサイトに悪影響を及ぼしています。

最初のコンテンツフルペイントと最大コンテンツフルペイントスコアの両方を考慮する必要があります。これらのスコアは、サイトのメインコンテンツの読み込み速度と、ユーザーインタラクションの準備ができているかどうかを理解するのに役立ちます。

ここで説明する戦術は、前述のスコアを向上させるのに役立ちます。 FCP スコアと LCP スコアはどちらも、ユーザーの画面に表示される内容に対応するため、重要な指標です。

FCP と LCP についてさらに質問がある場合は、以下のコメントセクションにご記入ください。

すてきな一日を！