最大のコンテンツペイントの説明: 時間を改善する方法

公開: 2023-02-11

Web サイトの Largest Contentful Paint を改善する方法に苦労していますか? あるいは、Largest Contentful Paint が何を意味するのか、そもそもなぜそれを気にする必要があるのかわからない?

あなたがどこから始めようとも、この投稿はあなたのためのものです。Largest Contentful Paint について知っておくべきことをすべて学ぶことができるからです。

これには、Largest Contentful Paint の意味、重要な理由、測定方法、改善方法が含まれます。

以下の目次を使用して、現在の知識レベルに基づいて特定のセクションにジャンプできます。または、読み続けて最初から始めてください。

Largest Contentful Paint (LCP) とは? 最大のコンテンツペイントの意味を説明する

Largest Contentful Paint は、Web ページのメインコンテンツの読み込みにかかる時間を測定するパフォーマンスメトリックです。

Largest Contentful Paint は、Cumulative Layout Shift (CLS) および First Input Delay (FID) とともに、Google の Core Web Vitals メトリクスの一部です。

より技術的なレベルでは、Largest Contentful Paint は、ユーザーがページの読み込みを開始してから、最大のテキストブロック、画像、またはビデオがビューポート内でレンダリングされるまでにかかる時間を測定します。

LCP における「メインコンテンツ」とは何を意味しますか?

主なコンテンツは問題の実際のページによって異なりますが、次のいずれかになります。

テキスト– より具体的には、テキストノードまたは他のインラインレベルのテキスト要素を含むブロックレベルの要素。
画像– <img> 要素内の要素、または <svg> 要素内の <image> 要素。
ビデオ– 任意の <video> 要素 (ポスター画像を使用)。
背景画像を持つ要素– CSS url() 関数を介してロードされた場合のみ (CSS グラデーションには適用されません)。

この投稿の後半で、サイトの任意のページの正確な最大コンテンツペイント要素を見つける方法を学習します。

サイトの UX を改善し、SEO ランキングを最大化したいですか? LCP 時間を最適化すると役立つ場合があります。今すぐ始めましょう️ クリックしてツイート

最大のコンテンツペイントと最初のコンテンツペイント

よくある質問の 1 つは、Largest Contentful Paint と First Contentful Paint の違いは何かということです。これは、もう 1 つの一般的なパフォーマンスメトリックです。

2 つの用語は似ていますが、重要な違いは、Largest Contentful Paint はページの「メインコンテンツ」の読み込みにかかる時間を測定するのに対し、First Contentful Paint は「最初のオブジェクト」の読み込みにかかる時間を測定することです (主な内容です）。

基本的：

LCP = メインコンテンツのみ
FCP = コンテンツの最初の部分、そのコンテンツが何であるかに関係なく

そのため、通常、「メインコンテンツ」要素が最初に読み込まれるわけではないため、LCP 時間はほとんど常に FCP 時間よりわずかに長くなります。

サイトの最大のコンテンツ描画時間が重要なのはなぜですか?

サイトの Largest Contentful Paint 時間が問題になる主な理由は 2 つあります。

ユーザー体験
検索エンジン最適化

ユーザー体験

サイトの最大コンテンツペイント時間に注意する必要がある最大の理由は、このメトリックが、サイトのパフォーマンスに関するユーザーエクスペリエンスを理解するための優れたプロキシであるためです。

ほとんどのユーザーは、Web サイトがすべてのスクリプトと要素を完全に読み込むのにかかる時間を気にしません。代わりに、彼らはあなたのウェブサイトから価値を得始めるのにどれくらいの時間がかかるかを気にしています.

Largest Contentful Paint は、メインコンテンツの読み込みにかかる時間を確認することで、その「価値」の瞬間を測定しようとする優れた仕事をしています。

サイトを最適化して、Largest Contentful Paint 時間の短縮を実現する場合、少なくともパフォーマンスに関しては、サイトでユーザーに堅実なエクスペリエンスを提供していると確信できます (顧客フレンドリーなデザインも必要になります)。使い勝手が良い）。

もちろん、他のパフォーマンスメトリックを無視する必要があるという意味ではありません。サイトのパフォーマンスとボトルネックを総合的に確認することを常にお勧めします。そのため、Kinsta ホスティングを使用している場合に無料で利用できる独自のアプリケーションパフォーマンス監視 (APM) ツール、Kinsta APM を作成しました。

検索エンジン最適化 (SEO)

検索エンジン最適化の最前線では、Largest Contentful Paint は Google の 3 つの Core Web Vitals 指標の一部であり、Google は 2022 年のページエクスペリエンスアルゴリズムの更新で SEO ランキング要因として使用し始めました。

これは、Largest Contentful Paint の時間が短いと、Google の検索結果でのサイトのパフォーマンスが低下する可能性があることを意味します。

コンテンツの品質/関連性やバックリンクなどの他の要素が Web サイトのランク付けに大きな影響を与えますが、SEO の取り組みを最大限に活用するには、サイトの最大コンテンツペイント時間を最適化することが重要です。

最大のコンテンツペイントスコアに影響を与えるものは何ですか?

2 つの「主な」タイプの問題が、ページの最大コンテンツペイント時間に影響を与える可能性があります。

サーバーが最初の HTML ドキュメントで応答するのにかかる時間。
実際の LCP リソースの読み込みにかかる時間。

最初のタイプの問題は、サーバーの応答時間、つまり最初のバイトまでの時間 (TTFB) を扱います。ユーザーのブラウザーがメインコンテンツの読み込みを考える前に、まずサーバーから応答を取得する必要があります。

これに影響を与える一般的な問題のいくつかを次に示します。

ページキャッシングを使用しない– ページキャッシングを使用しないと、サーバーは HTML ドキュメントで応答する前に、より多くの「作業」を行う必要があります。
遅いホスティング– 遅いホスティングプロバイダーは、何をしても、常に TTFB が遅くなります。
CDN を使用しない– コンテンツ配信ネットワーク (CDN) は、ユーザーがサイトのオリジンサーバーからページをダウンロードするのではなく、グローバルネットワークからページを提供することで TTFB を高速化できます。

サイトのサーバーが最初の HTML ドキュメントを配信した後、実際のメインコンテンツ要素を読み込む際にさらにボトルネックが発生する可能性があります。

これに影響を与える一般的な問題のいくつかを次に示します。

レンダリングをブロックする JavaScript または CSS (または一般的に最適化されていない/不要なコード) – ユーザーのブラウザーが、メイン要素を読み込む前に不要な JavaScript または CSS をダウンロードおよび/または処理する必要がある場合、LCP の速度が低下します。
最適化されていない画像– LCP 要素が画像の場合、最適化されていない画像を使用すると時間が遅くなります。大きな画像のダウンロードには時間がかかるためです。
最適化されていないフォントの読み込み– LCP 要素がテキストの場合、最適化されていない方法でカスタムフォントを読み込むと、そのテキストが表示されるまでに時間がかかることがあります。
非圧縮ファイル– Gzip や Brotli などの圧縮技術を使用していない場合、ユーザーのブラウザーがサイトのファイルをダウンロードするのに時間がかかります。

サイトによっては、両方の領域またはいずれかの領域でボトルネックが発生している可能性があります。これらの問題をすべて解決する方法については、この記事の後半で説明します。

適切な最長コンテンツペイント時間とは?

Google は、最大コンテンツペイント時間の「良好」を 2.5 秒未満と定義しています。

ページの最大コンテンツペイント時間が 2.5 ～ 4.0 秒の場合、Google はそれを「要改善」と分類します。また、ページの時間が 4.0 秒を超える場合、Google はそれを「悪い」と定義します。

これを視覚的に示す Google の図を次に示します。

最大のコンテンツペイントを測定する方法: 最高の LCP テストツール

Largest Contentful Paint のサイトのパフォーマンスをテストするために使用できるツールは多数あります。最も便利なものをいくつか見ていきましょう。

PageSpeed インサイト

PageSpeed Insights は、次の 4 つの有用な情報を提供するため、Largest Contentful Paint を評価するための最良のツールの 1 つです。

Chrome UX レポートから、実際のユーザーによるサイトの最大コンテンツペイント時間を見ることができます (レポートに含めるのに十分なトラフィックがサイトにある場合)。
シミュレートされたテストを実行して、サイトのパフォーマンスを確認できます。
Google は、テストに使用している実際の LCP 要素を教えてくれるので、どの要素を最適化すればよいかがわかります。
Google は、LCP 時間を改善するための提案を提供します。

使用方法は次のとおりです。

PageSpeed Insights の Web サイトにアクセスします。
テストするページの URL を入力します。
[分析]をクリックします。

その後、Google はモバイルとデスクトップの両方の結果を表示します。必ず両方を確認してください。

Google が LCP の計算に使用している主要な要素を見つけるには、 [診断]セクションまで下にスクロールし、 [最大のコンテンツペイント要素]セクションを展開します。

繰り返しになりますが、LCP 要素はそれぞれで異なる可能性があるため、モバイルとデスクトップの両方を確認してください。

Chrome デベロッパーツール

[パフォーマンス] タブまたはその Lighthouse 監査機能を使用して、Chrome デベロッパーツールから直接、Largest Contentful Paint 時間をテストすることもできます。より多くの情報が得られる[パフォーマンス]タブを使用することをお勧めします。

開始方法は次のとおりです。

テストするページを開きます。
Chrome デベロッパーツールを開きます。
[パフォーマンス]タブに移動します。
[Web Vitals]ボックスがオンになっていることを確認します。
[リロード]ボタンをクリックします (下記参照)。

サイトの完全な分析が表示されるはずです。

[ネットワーク]タブで LCP にカーソルを合わせると、時間が表示されます。

[タイミング]タブで LCP にカーソルを合わせると、実際の LCP 要素が表示されます。

Googleサーチコンソール

Google Search Console では、個々のページの最大コンテンツペイント時間をテストすることはできませんが、サイト全体のパフォーマンスを評価するには非常に役立ちます。

サイトの各ページには異なる LCP 時間が設定されているため、ホームページをテストして 1 日で終わるわけにはいきません。

Google Search Console を使用すると、サイトの各ページが Google の「良い」、「改善が必要」、「悪い」のカテゴリのどこに該当するかを確認できます。パフォーマンスデータは Chrome UX レポートから取得されるため、実際のユーザーデータに基づいています。

まだ行っていない場合は、まず Google Search Console でサイトを確認する必要があります。

それが完了したら、LCP レポートにアクセスする方法は次のとおりです。

サイトの Google Search Console を開きます。
[エクスペリエンス]タブの下にあるCore Web Vitalsに移動します。
モバイルまたはデスクトップのグラフの横にある[レポートを開く]をクリックします。
「URL が適切と見なされない理由」セクションで問題を探します。問題をクリックすると、問題の原因となっている URL に関する詳細情報が表示されます。

※PC版とモバイル版ではデータが異なる場合がありますので、必ず両方の結果をご確認ください。

WebPageTest

WebPageTest は、シミュレートされたパフォーマンステストを実行するためのもう 1 つの便利なオプションです。

PageSpeed Insights とは異なり、WebPageTest では、テストの場所、接続速度、デバイスなど、さまざまなテストメトリックを完全にカスタマイズできます。これが、他のツールよりも優れている主な利点です。テストを構成するためのオプションが増えます。

テストを実行する方法は次のとおりです。

WebPageTest に移動します。
テストするページの URL を追加します。
詳細設定オプションを展開して、テストを完全に設定します。

結果ページには、LCP データとその他の多数のパフォーマンスメトリック (ウォーターフォール分析を含む) が表示されます。

最大のコンテンツペイント要素を見つける方法

Largest Contentful Paint を改善したい場合は、Google が LCP 時間を計算するために使用している要素を正確に知ることが非常に役立ちます。

たとえば、Google がホームページの LCP 要素としてヒーロー画像を使用していることがわかっている場合、ホームページの LCP 時間を改善するには、そのヒーロー画像をできるだけ早く提供する方法を見つける必要があることがわかります。

前述したように、PageSpeed Insights または Chrome 開発者ツールを使用して、Largest Contentful Paint 要素を見つけることができます。

LCP 要素はデバイスによって異なる可能性があるため、モバイルとデスクトップの両方の結果を確認してください。

WordPress（または他のプラットフォーム）で最大のコンテンツペイントを改善する方法

Largest Contentful Paint についてすべて理解したところで、WordPress で Largest Contentful Paint を改善するための実用的なヒントをいくつか見ていきましょう。

これらのヒントについては WordPress に焦点を当てますが、すべてのヒントは普遍的であり、他の種類の Web サイトにも当てはまります。

サーバーの応答時間を改善するためのキャッシュの設定

キャッシュを使用すると、完成した HTML ドキュメントを訪問者のブラウザに配信する前にサーバーが実行する必要がある処理作業を減らすことで、サーバーの応答時間を改善できます。

KinstaでWordPressサイトをホストしている場合、Kinstaが自動的に最適化されたキャッシングを実装するため、キャッシングの設定について心配する必要はありません.

他の場所でホストしている場合は、WP Super Cache などの無料のプラグインまたは WP Rocket などの有料のプラグインを使用して、サイトでキャッシュを有効にすることができます。

その他のオプションについては、最高の WordPress キャッシュプラグインを掲載した投稿をご覧ください。

より高速な WordPress ホスティングにアップグレードする

このリストにある戦術はすべて LCP タイムを改善するのに役立ちますが、他に勝るものはありません。

低速で最適化されていない WordPress ホスティングを使用している場合、LCP 時間は常にホストの品質によって制限されます。

もう少し改善できるかもしれませんが、ホストが遅い場合、2.5 秒未満の LCP 時間を達成するのは常に苦労します。

Largest Contentful Paint時間を改善する最も簡単な方法が必要な場合は、サイトをKinstaに移行できます. Kinsta は、パフォーマンスが最適化されたホスティングインフラストラクチャを提供するだけでなく、このリストにある他の多くの最適化を処理する組み込み機能も備えています。

つまり、Largest Contentful Paint の時間の最適化をいじる代わりに、サイトの成長に集中できるということです。

興味があれば、Kinsta は任意のホストから無制限のウェブサイトを無料で移行します。無料移行の詳細については、こちらをご覧ください。

まだ迷っている場合は、このリストの残りのヒントを最初に試してください。ただし、このリストのすべてを実行してもまだ苦労している場合は、より良いホスティングが必要になる可能性があります.

コンテンツ配信ネットワーク (CDN) を使用する

CDN がない場合、サイトのすべての訪問者は、ホスティングサーバーからページの HTML および静的アセットをダウンロードする必要があります。

訪問者がサーバーの近くにいる場合、通常は問題になりません。しかし、訪問者が世界中に分散している場合、訪問者とサイトのサーバー間の物理的な距離が原因で、サイトの速度が低下する可能性があります。

CDN を使用すると、サイトの静的アセット (またはサイトの完成した HTML ページでさえも) を CDN のグローバルネットワークに配布できます。そうすれば、訪問者は CDN の最も近い場所からファイルをダウンロードできるため、はるかに高速になります。

Kinstaでホスティングしている場合は、最良の結果を得るためにKinstaのエッジキャッシング機能を使用することをお勧めします.

Kinsta のエッジキャッシング機能は、サイトの完全な HTML ページと静的アセットを Cloudflare のグローバルネットワークにキャッシュすることによって機能します (ほとんどの CDN ソリューションのように静的アセットをキャッシュするだけではありません)。

これは、サイトの訪問者が最も近いエッジロケーションから完全なページをダウンロードできることを意味します。これにより、サーバーの応答時間とLCP リソースの読み込み時間が短縮されます。

Kinsta のエッジキャッシングを有効にするには、MyKinsta のサイトのダッシュボードにある[エッジキャッシング]タブに移動します。

他の場所でホスティングしている場合は、KeyCDN、Bunny、StackPath などの一般的な CDN サービスを使用して、サイトの静的アセットの CDN を設定できます。

レンダリングをブロックする JavaScript を回避する (保留または削除)

レンダリングをブロックする JavaScript は、メインの LCP 要素の前に読み込まれる JavaScript ですが、その時点では必要ではありません。

LCP 要素の読み込みを遅らせることで、LCP の読み込み時間が遅くなります。

これを修正するには、実装できるいくつかの戦略があります。

可能であれば、不要な JavaScript を削除してください。
JavaScript を延期して、サイトのメイン要素の読み込みをブロックしないようにします。
ユーザーがサイトを操作するまで JavaScript を遅らせます。

ほとんどの人にとって、この機能を実装する最も簡単な方法は、Autoptimize や WP Rocket などのプラグインを使用することです。

これを行う方法の完全なガイドについては、非常に詳細な 2 つの投稿があります。

WordPress でレンダリングをブロックするリソースを排除する方法
JavaScript の解析を遅らせる方法

レンダリングをブロックする CSS を回避し、CSS 配信を最適化する

最適化されていない JavaScript がサイトの速度を低下させるのと同じように、最適化されていない CSS も同じことを引き起こします。

基本的に、できるだけ少ない CSS をロードする必要があります。また、ロードする必要のある CSS については、最適な方法でロードする必要があります。通常、これは、重要でない CSS をロードプロセスの後半まで遅らせながら、重要な CSS を早期にロードすることを意味します。

開発者でない場合、これを実現する最も簡単な方法は、Perfmatters、WP Rocket、FlyingPress などのパフォーマンス最適化プラグインを使用することです。

たとえば、WP Rocket には、使用されていない CSS をページごとに削除し、最適な方法で CSS を提供する組み込み機能が用意されています。

これらすべてを行う方法をさらに詳しく知りたい場合は、CSS を最適化する方法に関する完全なガイドをご覧ください。

HTML、CSS、および JavaScript を縮小する

上記のコード最適化手法に加えて、サイトの HTML、CSS、および JavaScript も縮小する必要があります。

基本的に、これによりサイトのコードから不要な文字と空白が削除され、サイズが縮小されます。

Kinsta でホスティングしている場合、Kinsta は Cloudflare 統合を介して自動的にミニフィケーションを処理できます。この機能を制御する方法は次のとおりです。

MyKinstaでサイトのダッシュボードを開きます。
[CDN]タブに移動します。
[画像の最適化] の横にある[設定]をクリックします。
CSSとJSのチェックボックスをオンにして、設定を保存します。

サイトを別の場所でホストしている場合は、Autoptimize などの無料のプラグインを使用してコードを縮小するか、Perfmatters、WP Rocket、FlyingPress などのプレミアムで包括的なプラグインの 1 つを使用できます。

または、詳細については、完全なコード縮小チュートリアルをご覧ください。チュートリアルは JavaScript に焦点を当てていますが、同じメソッドとプラグインを使用して他のコードを縮小することもできます。

サーバーレベルの圧縮 (Gzip または Brotli) を使用する

サーバーレベルの圧縮では、Gzip や Brotli などのテクノロジを使用して、サイトのファイルのサイズを縮小できます。

たとえば、Kinsta ウェブサイトに使用する圧縮により、Kinsta ホームページのファイルサイズが 85.82% 削減されました。

KinstaでWordPress Webサイトをホストしている場合、KinstaはすべてのサイトでBrotli圧縮を自動的に有効にするため、これについて心配する必要はありません.

サイトを別の場所でホストしている場合は、GiftOfSpeed のこの無料ツールを使用して、サイトで Gzip または Brotli が有効になっているかどうかを確認できます。

サイトで圧縮を使用していない場合は、Gzip 圧縮を有効にして設定する方法に関するガイドに従ってください。

サイトのコンテンツを提供するために Cloudflare を使用している場合、Cloudflare には Brotli 圧縮を有効にする組み込みの設定もあります。

Cloudflare ダッシュボードでサイトを開きます。
サイドバーメニューの[速度] → [最適化]に移動します。
Brotliトグルを有効にします。

画像の圧縮とサイズ変更

LCP 要素が画像の場合、その画像ファイルのサイズを縮小する方法を見つけることで、ユーザーのブラウザーが画像をダウンロードするのにかかる時間を短縮できます (したがって、LCP の時間を短縮できます)。

画像のサイズを小さくするには、画像を実際に使用しているサイズにサイズ変更し、非可逆圧縮または可逆圧縮を使用して圧縮し、WebP などの最適化された形式で提供する必要があります。

このアプローチは、一般的にはパフォーマンス最適化のベストプラクティスであり、Largest Contentful Paint に固有のものではありません。

より包括的な外観については、Web サイトの画像最適化に関する詳細なガイドをご覧ください。

そうそう、KinstaでWordPressサイトをホストしている場合、Kinstaにはサードパーティのツールを必要とせずにサイトの画像を自動的に最適化する組み込み機能があるため、これについて心配する必要はありません.

この機能を有効にする方法は次のとおりです。

MyKinstaでサイトのダッシュボードを開きます。
[CDN]タブに移動します。
[画像の最適化] の横にある[設定]をクリックします。
好みの画像最適化レベルを選択して設定を保存します。Lossyを使用すると、速度が最大に向上しますが、画質にわずかな影響がある可能性があります。

最大のコンテンツペイントイメージをプリロードする

LCP 要素が画像の場合、LCP を改善するもう 1 つの戦略は、Largest Contentful Paint 画像をプリロードすることです。これが、PageSpeed Insights で「最大のコンテンツペイント画像をプリロードする」などの推奨事項が表示される理由です。

プリロードを使用すると、サイトの LCP 要素である特定の画像など、特定のリソースのダウンロードを優先するようにユーザーのブラウザーに指示できます。

LCP イメージをプリロードする最も技術的でない方法は、Perfmatters などのプラグインを使用することです。このプラグインは、専用のPreload Critical Images機能を提供します。プリロードする画像の数を指定するだけで済みます。プリロードするアセットが多すぎると悪影響が及ぶ可能性があるため、最初は 1 つから始めることをお勧めします。

WordPress.org には、WPZOOM の Preload Featured Images プラグインや、FlyingPress などの他のプレミアムプラグインなど、これを実現するための無料のプラグインもあります。

遅延読み込みの問題を確認する

PageSpeed Insights で「Preload Largest Contentful Paint image」メッセージをトリガーする可能性のある別の問題は、WordPress サイトが画像を遅延読み込みする方法の問題です。

または、PageSpeed Insights で「最大の Contentful Paint 画像が遅延ロードされました」という警告をトリガーすることもできます。

遅延読み込みを使用すると、ユーザーがサイトの操作を開始するまで特定のリソース (画像など) の読み込みを待機することで、サイトの初期読み込み時間を短縮できます。

これは通常は良いことですが、サイトが LCP 要素である画像を遅延ロードしようとすると、LCP 時間が遅くなる可能性があります。このため、サイトが最初のビューポートに表示される画像を遅延読み込みしないようにする必要があります。

WordPress が WordPress 5.5 で導入したネイティブブラウザの遅延読み込み機能を使用している場合、WordPress は WordPress 5.9 の時点で最初のコンテンツ内画像をすでに自動的に除外しているため、この問題は発生しません。

最初の画像以外を除外したい場合は、 wp_omit_loading_attr_threshold 関数を使用できます(ただし、ほとんどの人はここで何もする必要はありません)。

ただし、JavaScript を利用した遅延読み込みプラグインを使用している場合は、プラグインの設定でこの除外を手動で設定する必要がある場合があります。たとえば、Perfmatters プラグインには、最初の「X」画像を遅延読み込みから除外できるオプションが含まれています。

遅延読み込みプラグインでこの種の除外を設定できない場合は、設定できる別のプラグインに切り替えることができます。

Font-Display を使用してフォントの読み込みを最適化する: オプション

LCP 要素がテキストの場合、サイトのフォント読み込みプロセスによってテキストの表示が遅くなり、LCP 時間が遅くなる可能性があります。

通常、これはカスタムフォントを使用している場合に発生します。カスタムフォントが読み込まれるまでテキストのレンダリングを待機するようにサイトが構成されている場合、カスタムフォントファイルの読み込みに時間がかかると処理が遅くなります。

これを修正するには、Font-Display: Optional CSS 記述子を使用できます。

これは、カスタムフォントが小さなウィンドウ (通常は約 100 ミリ秒以下) 内に読み込まれない場合に、代替フォントを使用するようにブラウザーに指示します。

平易な言葉で言えば、これは基本的に、ブラウザーがカスタムフォントを読み込む機会を与える必要があることを意味します。ただし、カスタムフォントが十分に速く読み込まれない場合、ブラウザはフォールバックシステムフォントを使用して、コンテンツの遅延を回避する必要があります。

または、Font-Display: Swap を使用することもできます。これは、フォールバックフォントをすぐに読み込み、カスタムフォントが読み込まれるとカスタムフォントで「スワップ」します。ただし、この方法では、フォントのサイズが異なる場合、Cumulative Layout Shift で問題が発生する可能性があるため、注意が必要です。

Web サイトのデザインにカスタムフォントが絶対に必要な場合を除き、Font-Display: Optional を使用することが、Core Web Vitals の観点から通常は最適なオプションです。

CSS を直接使用することに慣れている場合は、子テーマのスタイルシートで Font-Display プロパティを手動で編集できます。

CSS を使用したくない場合は、これを行うのに役立つプラグインを見つけることもできますが、そのほとんどは Google フォントの最適化に重点を置いています。

アセットクリーンアップ – 無料の Google フォントと、Pro バージョンのカスタムローカルフォントをサポートします。
Perfmatters – Google Fonts の機能を提供します。

Elementor を使用してサイトをデザインしている場合、Elementor には、Elementor で作成したページにこれを使用できる組み込みオプションも含まれています。

Elementor → 設定に移動します。
詳細設定タブを開きます。
Google Fonts LoadドロップダウンをOptionalに設定します。

Font-Display の設定方法: Elementor ではオプションです。

LCP とは何か、なぜ LCP の改善が重要なのかわからない? このガイドが役に立ちます！ LCP の意味、重要性、改善方法については、こちらをご覧ください。

まとめ

Largest Contentful Paint を改善する方法を学ぶことは、サイトのユーザーエクスペリエンスを改善し、検索エンジンのランキングを最大化するために重要です。

Largest Contentful Paint を改善するには、通常 2 つの部分があります。サーバーの応答時間を高速化し、サイトのコードを最適化して LCP 要素をできるだけ速くレンダリングします。

サーバーの応答時間が遅いことを心配したくない場合は、WordPress サイトを Kinsta に移行できます。 Kinstaのパフォーマンスが最適化されたアーキテクチャは、サイトをできるだけ早く提供するように特別に設計されています.

さらに、Kinsta のエッジキャッシング機能を使用すると、サイトのページを Cloudflare のグローバルネットワークにキャッシュできます。これは、世界中の訪問者が超高速のサーバー応答時間 (したがって、超高速の LCP 時間) を享受できることを意味します。

詳細については、これらのページで、Kinsta のマネージド WordPress ホスティングまたは Kinsta のマネージド WooCommerce ホスティングの詳細を確認してください。

カスタムLCPパフォーマンスの最適化について専門家に支援してもらいたい場合は、Kinsta Agency Directoryでプロバイダーを見つけることもできます.