GSCのコアWebバイタルのLCP「MoreThan」エラーを修正

コンテンツ：

グーグルは検索で新しいレポートをリリースしましたCore WebVitalsという名前のコンソール。これらは速度レポートに取って代わり、2021年にランキング要素と見なされる予定です。コアWeb Vitalsは、ページ速度、HTTPSとともにランキング要素と見なされます。モバイルフレンドリーおよびその他のページ上の要素。

Core Web Vitalは、ページ上のUX要素とUI要素を考慮して、3つのコアメトリックのページの平均を見つけます。

LCP：最大のコンテンツフルペイント
FID：最初の入力遅延
CLS：累積レイアウトシフト

解決する特定の単一のコード化された修正はありません問題がありますが、エラーを解決するためにWebサイトを最適化できます。ここでは、最大のコンテンツフルペイント（LCP）を解決するのに役立ついくつかのプラクティスをリストします。より多い' あなたのウェブページのために。

↑ LCPとは何ですか？

最大のコンテンツフルペイント（LCP）メトリックレポートビューポート内に表示される最大のコンテンツ要素のレンダリング時間。簡単に言うと、ページの読み込みが開始されてから、主要な要素が表示可能な画面に読み込まれるまでにかかる時間です。

優れたユーザーエクスペリエンスを提供するために、サイトは最初の1回以内に最大のコンテンツフルペイントが発生するように努力する必要があります 2.5秒 ページの読み込みを開始します。

↑ LCPではどの要素が考慮されますか？

最大のコンテンツフルペイントで考慮される要素のタイプは次のとおりです。

<img> 要素
<画像> 内部の要素 <svg> 素子
<ビデオ> 要素
を介して読み込まれた背景画像を持つ要素 url（） 関数
テキストノードまたは他のインラインレベルのテキスト要素の子を含むブロックレベルの要素。

↑ 高LCPの原因は何ですか？

サーバーの応答時間が遅い
レンダリングをブロックするJavaScriptとCSS
リソースの読み込み時間が遅い
クライアント側のレンダリング

↑ 高LCPを修正するためにウェブサイトを最適化する方法は？

優れた応答時間と優れたホスティングを使用し、低遅延率。サーバーを最適化し、Cloudflare、jsDelivr、Staticallyなどの無料のサードパーティCDNを使用して、静的アセットを迅速に配信します。あなたがWordPressに取り組んでいるなら、あなたのために仕事をするのを助けることができる多くのプラグインがあります。

次世代の画像形式で圧縮画像を使用するJPEG XR、JPEG 2000、またはWebPのように。これらの最新のフォーマットは、画像の読み込みを50％高速化するのに役立ちます。画像をその場で自動的に圧縮および変換するのに役立つWordPress用のプラグインはほとんどありません。また、WP-PhotonなどのイメージCDNを使用して、サーバーの帯域幅を減らし、サイトの速度を上げます。

キャッシュサービスを使用して静的HTMLをロードできますリクエストごとに変更されるわけではないページ。キャッシュにより、ページが不必要に再作成されるのを防ぐことができます。キャッシュプラグインは、生成されたHTMLのコピーをサーバーに保存し、ページが要求されると、サーバーはキャッシュの負荷を解放します。これにより、最初のバイトまでの時間（TTFB）が短縮され、リソースの使用量が最小限に抑えられます。

Cloudflareのようなサービスを利用することもできますブラウザのバックグラウンドでServiceWorkerを実行し、サーバーからの要求を傍受できます。ページの完全なHTMLキャッシュを取得し、HTMLページをキャッシュファーストで提供するため、読み込み時間を大幅に短縮できます。

考慮すべき他の重要なことは、良いLCPのためにウェブサイトを最適化することです。

ウェブサイトを最適化してLCPを削減し、ページの読み込みを高速化してUXを向上させる方法に関する詳細なガイドを見つけることができます。公式Web.Devサイト.

結論： GSCにコアWebバイタルが導入されましたそしてそれはランキング要素として考慮されています。 LCPは、最大の要素がデバイスのビューポートにロードされるのにかかる時間を記録するため、修正するのに非常に重要なメトリックです。低LCP用にサイトを最適化するための暫定的な修正とソリューションをいくつか提供しました。