プラグインを使用してWordPressで最初のコンテンツペイントを改善する方法

WordPress のパフォーマンスに関して言えば、重要な指標の 1 つは First Contentful Paint (FCP) です。 これは、ページの最初のコンテンツがレンダリングされるまでにかかる時間を測定し、ページの読み込み速度を示す良い指標です。 FCP を改善する方法はいくつかありますが、最も簡単な方法の 1 つはプラグインを使用することです。 この記事では、WordPress の First Contentful Paint をプラグインで改善する方法を紹介します。 W3 Total Cache プラグインの使用をお勧めします。 このプラグインには、コンテンツ配信ネットワーク (CDN) の統合や縮小など、FCP の改善に役立つ多くの機能があります。 プラグインをインストールして有効化したら、設定する必要があります。 次の設定を使用することをお勧めします: キャッシュを有効にする: これにより、ページと投稿がキャッシュされ、より迅速に提供できるようになります。 CDN を有効にする: これにより、CDN がサイトに統合され、FCP を改善できます。 縮小を有効にする: これにより、HTML、CSS、および JavaScript ファイルが縮小され、ページのサイズが縮小され、FCP が改善されます。 変更を保存すると、FCP が大幅に改善されるはずです。

読み込み時間とクリック時間という 2 つの指標で Web サイトのパフォーマンスを測定することは不可能です。 ユーザーが Web サイトにアクセスすると、First Contentful Paint (FCP) は、画像またはテキストに基づく最初の要素が表示されるまでにかかる時間を図で示します。 平均して、各要素が 1 つのページに読み込まれるのにかかる時間は、LCP で測定されます。 この記事では、FCP とは何か、そしてそれらの両方を測定する方法について説明します。 PageSpeed Insights は、Web サイトのパフォーマンスをテストし、改善方法に関する推奨事項を取得できる素晴らしいツールです。 サイト キャッシュを有効にすると、訪問者がアクセスするたびにサイトのすべての要素を再読み込みする必要がなくなります。 メディア ファイルはどの Web サイトでも最大の要素の 1 つであるため、圧縮は読み込み時間を短縮するのに役立ちます。

TinyPNG などのオンライン ツールを使用して、サイトへのアップロード前またはアップロード中に画像を圧縮できます。 さらに、Fast Velocity Minify や Autoptimize など、役立つ優れた WordPress プラグインがあります。 最新の Web サイトの大部分は、デザインと機能のために JavaScript と CSS で構築されています。 画像がレンダリングされてからユーザーが下にスクロールするまでにはタイムラグがあるため、一部の画像を見ることができません。 適切な要素のみをロードしている場合、FCP 時間を短縮することはできません。 実際、背景画像に使用したくない場合は、大きなファイル用に保存できます。

灯台の最初のコンテンツ ペイントをどのように改善しますか?

灯台の最初のコンテンツ ペイントを改善するには、いくつかの方法があります。 1 つの方法は、画像を最適化することです。 もう 1 つの方法は、スタイル シートが縮小され、JavaScript ファイルが圧縮されていることを確認することです。 CDN を使用してコンテンツを配信することもできます。

First Contentful Paint メトリックは、Lighthouse のコア メトリックの 1 つです。 このデモでは、人間が認識した DOM 要素をレンダリングするのにかかる時間が示されています。 ページでは、これは画像、テキスト ブロック、または白以外のキャンバス要素である可能性があります。 メトリックは、実装前にすべてのステップを最適化することで改善できます。 ページの読み込み中にイベントをブロックすると、最初のコンテンツ ペイント プロセスを時間どおりに完了できない場合があります。 Time To First Byte (TTFB) は、サーバーが Web サイトによって生成された最初のデータを受信するのにかかる時間です。 TTFB の html コードが悪影響を与える前に、これを行う必要があります。

例として、コードの実行を 1,500 ミリ秒遅くしようとしました。 最新の Lighthouse 監査では、総合スコア 35 と 8.6 FCP が得られました。 元のリクエストが完了するまでに 0.6 秒かかり、FCP は 4831 ミリ秒から 3492 ミリ秒のタイムスタンプにシフトしました。 Render-Blocking リソースは、ロードされるまでページがレンダリングされないようにするファイルです。 最も簡単な解決策は、それらの下に終了タグを使用することです。 この例では、クリティカル CSS NPM を使用してクリティカル CSS を構築しました。 >style> タグを使用して、この CSS をコピーして >head> セクションに貼り付けます。

ほぼ確実に、特定の状況に基づいてテクニックを微調整する必要があります。 読み込みの遅延 (ページが完全に読み込まれるようにするため) やビューポート サイズの調整など、重要な CSS パッケージにパッケージ オプションを追加すると、より正確になります。 Uploadcare による PageDetox 画像パフォーマンス分析ツールは無料で、画像の分析に使用できます。 プロセス全体で、優れたラボ データと優れたユーザー エクスペリエンス (UX) の間の最適なポイントを選択することが重要です。

最初の有意義なペイント時間を改善するための Google のヒント

Google の学習リソースは、最初の有意義な塗装作業を改善するための優れたヒントを提供しています。 レンダリングをブロックするリソースの量を減らすことで、Web サイトの効率に大きな違いをもたらすことができます。 テキストベースのアセットを結合して圧縮することで、ページの読み込みプロセスを高速化することもできます。 クリティカル レンダリング パスを最適化することも可能です。

最初のコンテンツ ペイント Google

First Contentful Paint (FCP) は、Google が Web サイトのパフォーマンスを測定するために使用する指標の 1 つです。 FCP は、ページの最初の読み込みが開始されてから最初のコンテンツが画面に表示されるまでの時間を測定します。 ページの読み込みが速ければ速いほど、ユーザー エクスペリエンスは向上します。

クイック フロー テスト (FFT) は、ユーザーが DOM ページに移動した後、ブラウザーが DOM ページの最初の部分をレンダリングするのにかかる時間を測定します。 HTTP アーカイブのデータを使用して、ページの FCP と実際の Web サイトの時間との時間差に基づく FCP スコアを計算できます。 たとえば、サイトが市場の上位 90% でパフォーマンスを発揮する場合、FCP は 1.2 秒でレンダリングされます。

ウェブサイトの最初のコンテンツ ペイント スコアを高速化する方法

最初のコンテンツ ペイント スコアが適切であると、サイトの読み込みが速くなり、ユーザーが最も重要な情報をできるだけ早く受け取ることができます。 最適な答えは 1 つではありませんが、優れたペイント スコアは、サイトの読み込みを高速化し、ユーザーが最大限のコンテンツを受け取るようにするのに役立ちます。最初のコンテンツ ペイント スコアが 1.8 秒以下の場合、スコアは理想的です。

最初のコンテンツ ペイント修正

First contentful paint は、ユーザーがページのコンテンツを初めて目にすることです。 この指標は、ページの読み込みにかかる時間を測定し、サイトのユーザー フレンドリー度を示す良い指標となるため、重要です。 最初のコンテンツ描画時間を短縮すると、検索エンジンで上位にランクされる可能性が高まり、コンバージョン率も向上します。

First Contentful Paint (FCP) を使用してページの読み込み速度を監視することは、ページの読み込み速度を知る優れた方法です。 Google と訪問者は、Final Cut Pro (FCP) の品質に満足する必要があります。 訪問者が画面上でページを見た後に別のページをクリックしない場合、ページが表示されるまでに時間がかかります。 HTML ページは、First Contentful Paint (FCP) を使用して 1 秒未満でレンダリングできます。 バイトを開始するときは、600 ミリ秒未満の速度で開始するのが最適です。 以下にリストされている解決策は、FCP を頻繁に改善する方法の一部です。 Web サイトに変更を加える前に、PageSpeed の専門家に相談してください。

強力なネットワーク接続の存在は、多くの場合、ページ速度のパフォーマンスの低下に関連しています。 圧縮方法は、サーバーから送信されるデータの量を減らします。つまり、ネットワーク リソースが読み込まれるまでの待ち時間が短縮されます。 Brotli と Gzip は、一般的な 2 つの圧縮技術です。 スクリプトはレイアウトに使用されるため、First Contentful Paint (FCP) に影響します。 リソース ヒントがダウンロードまたは接続を開始する場合、プロセスを独自に完了するのはブラウザー次第です。 ページ速度のアーセナルには、読み込み、プリフェッチ、プリコネクトなどの強力なツールが多数含まれています。 ページの速度が低下する可能性があるため、リソース ヒントには注意することが重要です。

JavaScript で適切にレンダリングされないページは、クラッシュする可能性があります。 外部 CSS ファイルがレンダリングされると、レンダリングのブロックが発生します。 正確には、スタイルシートをできるだけ小さくしてください。 ショートコードを使用して、セレクターの最も重要なプロパティを 1 行に書き留めることができます。 セレクターをコンマでマージし、Enter とスペースを削除し、短いカラー コードを記述することで、CSS のサイズをさらに削減することもできます。 スクリプトをスクリプトタグに追加すると、同時にダウンロードしてページを構築できます。 スクリプトのダウンロード後、スクリプトは HTML コードの元の順序で実行されます。

これによりページの表示がブロックされる可能性もありますが、通常は既に画面に表示されています。 CSS font-face 宣言では、Web フォントの優先順位を指定できます。 通常、このタイプのフォントは、フォントがロードされるまでテキストを表示しません。 ブラウザのデフォルト フォントでテキストを表示する代わりに、font-display:swap ツールを使用して別のフォントに置き換えることができます。

最大のコンテンツペイント 改善方法

最大のコンテンツ ペイント (LCP) は、ビューポート内の最大のコンテンツ要素の読み込みにかかる時間を測定します。 LCP を改善するには、画像と動画を最適化して読み込みを高速化し、サーバーがリクエストに迅速に応答するようにします。 また、プリロードまたはプリフェッチ リソース ヒントを使用して、必要になる前にリソースをロードするようブラウザに指示することもできます。

Google の最大のコンテンツ プール (LCP) の最大のコンテンツは、2021 年に導入された新しい指標です。スクロールせずに見える範囲で最大の要素がページに読み込まれるまでにかかる時間によって、最大の要素が読み込まれるまでの時間が決まります。スクロールしないでロードします。 Web サイトの LCP を下げることで、Web サイトの重要なコンテンツの表示を高速化することができます。 潜在的な LCP の問題を解決する前に、最初に最大の要素の読み込み速度を決定する必要があります。 経験則として、モバイルとデスクトップのページ読み込みの 75 パーセンタイルを測定することをお勧めします。 負荷メトリクスの改善に加えて、画像の最適化はレイアウトの変化を減らし、ユーザー エクスペリエンスを向上させることができます。 デバイスに基づいて表示する画像をブラウザが決定できるようにします。

画像を 600×600 にしたい場合は、最初に 600w を書かなければなりません。 ブラウザは、画像のサイズを選択するのではなく、このメソッドで画像サイズを選択する必要があります。 通常、ヒーロー画像はスクロールせずに見える範囲で最も重要な要素であるため、すばやく読み込む必要があります。 JavaScript 対応のヒーロー画像を含むページを読み込むことで、LCP を大幅に改善できます。 ファイル内のデータ量を減らすために、さまざまなアルゴリズムを使用してファイルを最小化または圧縮します。 これらの手法は、いくつかのホスティング会社と CDN プロバイダーによって定期的に使用されています。 サイトのファイルが縮小または圧縮されていない場合は、すぐに作業することをお勧めします。

Web サイトのパフォーマンスを最大限に引き出すには、JavaScript を最適化する必要があります。 この手法を利用するには、デバイスの種類に応じてさまざまな Critical CSS を使用する必要があります。 Web.dev には、コード分割に関する優れた記事があります。 キャッシングは、Web のパフォーマンスに貢献します。 Service Worker は、共通要素の繰り返しを避けることで、HTML ペイロードのサイズを縮小する責任があります。 静的な HTML はキャッシュできるため、TTFB を大幅に削減できます。 HTTP/2 サーバー プッシュと link rel=preload を使用すると、重要なリソースの配信を高速化できます。

次のステップは、ブラウザーがドメインへの接続を確立するプロセスをすぐに開始するように指定することです。 これにより、重要なドメインへの往復にかかる時間が短縮されます。 接続の際は十分ご注意ください。 テーマが肥大化すると、ロード時間が大幅に増加し、Core Web Vitals が低下する可能性があります。 プラグインを選択したら、慎重に調査し、そのパフォーマンスに注目してください。 LC プロセスについて懸念がない場合は、定期的に分野の問題を探すことをお勧めします。 Google では、28 日間に受信した Core Web Vitals に基づいて、重要なページが少なくとも月に 1 回あると見なしています。

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

First Contentful Paint は Core Web Vitals Largest Contentful Paint (LCP) とは異なります。これは、LCP が Web サイト上の大きな要素が表示されるまでにかかる時間を考慮に入れているためです。 FCP の場合、最初の要素を最初にロードする必要があります。 ただし、最初の要素が必ずしも最大の要素であるとは限りません。

Web サイトにとって Fcp と Lcp が重要な理由

ユーザーが画面上で何かを見ることができるページ読み込みタイムラインの最初のポイントは、高速 FPP とも呼ばれ、ユーザーがシーンを解釈しやすくなります。 最大の要素が画面の中央に表示されるまでにかかる時間によって、かかる時間が決まります。 前回の記事で、ウェブサイトはすぐには読み込まれないと述べました。

最初のコンテンツ ペイント Wp ロケット

First Contentful Paint (FCP) は、ページの読み込みが開始されてから、ブラウザーがそのページのコンテンツの最初のビットをレンダリングするまでの時間を測定します。 これは、Web サイトのユーザー エクスペリエンスを測定するための重要な指標であり、ユーザーがページのコンテンツを表示するまでにどれくらい待たなければならないかを表します。 WP Rocket は、HTML、CSS、および JavaScript ファイルを最適化することで Web サイトを高速化すると主張する WordPress プラグインです。 また、キャッシュの事前読み込み、遅延読み込み、縮小化などの機能も備えています。

First Contentful Paint (FCP) は、コンテンツが Web サイトに表示されるまでにかかる時間を決定します。 ミリ秒単位の測定を使用して、サイトの読み込み速度を計算するために使用できます。 Web サイトには、最大 1.8 秒のアニメーション クリップ形式 (ACF) が必要です。 進行が遅くなる最も一般的な原因は、レンダリングをブロックするスクリプトとスタイルシートです。 First Contentful Paint (FCP) で Web フォントを使用する場合、Web フォントをまったく使用しないよりも悪い結果になります。 スクリプトを Web サイトにロードする場合は、それらが単なるダウンロードではなく、解析、コンパイル、および実行されることを確認してください。 システム内のファイル数を減らすには、サーバーの応答時間を 600 ミリ秒未満に保つようにしてください。

サーバーは、コンテンツをより高速にレンダリングし、不要なネットワーク トリップを回避することで、パフォーマンスを向上させます。 Lighthouse 9.1 で 10% のスコアを獲得すると、最高点に到達するには完璧な経験が必要なポイントに到達します。 サーバーが ISP からデータ センターへのデータを処理するのにかかる時間は、この数値には含まれていません。 DevTools を使用して、Paint Timing API を使用して FCP のパフォーマンスを記録できます。

サイトの最初のコンテンツ ペイント スコアを改善する方法。

ウェブサイトのブラウジング エクスペリエンスを向上させたい場合、Google は First Contentful Paint のスコアを 1.8 秒以下にすることをお勧めします。 ユーザーがリンクをクリックしてからページが表示されるまでの時間を測定します。 その結果、サイトの読み込みプロセスを高速化し、ユーザーの関心を維持しながら、サイトの読み込み時間を短縮できます。 レンダリング ブロック スクリプトとスタイルシートは、First Contentful Paint の速度低下の最も一般的な原因の 2 つです。 使用するリソースの数を減らすと、スコアを大幅に改善できます。 キャッシュやその他のパフォーマンスを向上させる手法に加えて、キャッシュやその他のパフォーマンスを向上させる手法を使用して、ユーザーのエクスペリエンスを向上させることができます。