WordPressでFCPを改善するための8つの実用的な方法

この記事では、WordPressでFCPまたはFirstContentfulPaintを改善するためのいくつかの簡単な方法について説明します。 このパフォーマンス指標を改善することで、WordPress Webサイトのユーザーエクスペリエンスが向上し、Googleで上位にランク付けされ、読み込みが著しく速くなります。 まず、FCPが非常に迅速に機能することを確認してから、WordPressWebサイトでそのメトリックを改善するためのいくつかの簡単な方法について説明します。

FCPとは何ですか？

FCPは、First Contentful Paintとも呼ばれ、Chromeユーザーエクスペリエンスレポートを通じて実際のユーザーから収集された統計です。 これは、実際のユーザーエクスペリエンスのより現実的な尺度の1つです。 これは、個々の訪問者とユーザーがWebサイトのパフォーマンスをどのように認識しているかを測定するように設計されています。 これは、すべてのウェブサイトで消費者のユーザーエクスペリエンスを向上させることを目的として、Googleがウェブサイトの楽しいキャンペーンで使用し始める多くの速度統計の最初の1つでもあります。

First Contentful Paintは、エンドユーザー向けのビジュアルコンテンツレンダリングの最初のインスタンスです。 この例では、FCPは2番目のフレームで発生し、ユーザーにレンダリングされた最初のコンテンツ要素です。 FCPを高速化すると、すべてのコンテンツが読み込まれるまでユーザーがWebサイトにとどまることが保証されます。これは、このコンテンツの読み込みの知覚時間がはるかに速いためです。

FCPとLCPが何であるかについての徹底的な記事で述べたように、これはWebサイトと特定のページに基づいて変更されることを理解する必要があります。 したがって、FCPは、あるページで1つのものになり、別のページで別のものになる可能性があります。 これにより、最適化プロセスが少し複雑になりますが、FCPとは何かを理解し、この記事で説明されている方法に従う限り、問題はありません。

Googleは2021年3月にこれらの指標を深刻なランキング指標として使用し始めるため、その時点より前にFirstContentfulPaintを把握することが最も重要です。

最初の満足のいくペイントのテストと理解

FirstContentfulPaintメトリックの理解とテストは非常に簡単です。 使用する必要があるのは、Googleのpagespeedツールだけです。 URLを入力するだけで、最初の指標の1つに、ウェブサイトの読み込み速度が数秒でわかります。

FCPに関して1秒未満で読み込まれるWebサイトは高速に分類され、FCPが3秒未満で読み込まれるWebサイトは中程度と呼ばれ、3秒以上のFirstContentfulPaintを持つWebサイトは低速と呼ばれます。 ご覧のとおり、ここにはあまり余裕がありません。Googleで上位にランクインするには、3秒よりもはるかに高速なFCPが必要です。

良いニュースは、WordPressで最初のコンテンツフルペイントを改善することには、即座にそして永続的な改善を行ういくつかの実用的な方法があるということです。 これらのソリューションの大部分には、最適化プロセスを自動化するプラグインが含まれており、WordPressでのFCP最適化がはるかに簡単になります。

したがって、FCPの導入が邪魔にならないように、このメトリックを改善する方法を理解しましょう。 優れたFCPを使用している場合でも、ミリ秒単位で改善すると、ユーザーエクスペリエンスが向上し、WordPressWebサイトでのコンバージョンが増加してバウンス率が低下する可能性があります。

最初のバイトまでの時間に焦点を当てる

FCP時間を短縮し、このスコアを上げるために最初に実行できる最も実用的な方法は、最初のバイトまでの時間に焦点を当てることです。 多くのWebサイトでは、TTFBが非常に遅いか、ブラウザがWebページのコンテンツの最初の一口を受信するのにかかる時間があります。 TTFBは、HTTP要求を取得し、その要求を処理するのにかかる時間と、HTTP要求自体の応答時間を合計したものです。

素人の言葉で言えば、Webサイトがサーバーに接続するのに平均よりも時間がかかる場合、コンテンツのレンダリングとダウンロードはエンドユーザーにとって遅くなり、FCPが遅くなります。

FCPは最初に表示されるメトリックであるため、TTFBにほぼ直接関連しています。 WordPress Webサイトで最初のバイトまでの時間を改善する2つの主な方法は、最初のコンテンツフルペイントスコアを直接増やすことです。高速のWordPressホストを選択し、高品質のCDNを使用します。

高速なWordPressホストを使用している場合、データは通常よりもはるかに高速に訪問者のブラウザーに送信され、TTFBが増加します。 サーバーの場所に関して地理的に離れた場所からWebサイトをロードしているユーザーがいる場合、エンドユーザーに物理的に近い個々のノードを持つCDNを利用すると、TFBが大幅に増加し、はるかに優れたFirstにつながります。満足のいくペイントスコア。

優れたWordPressホストとCDNを推奨する場合、これは統合ソリューションである必要があると常に言っています。 個別のCDNと個別のWordPressホストを探すのではなく、サービスにCDNを組み込んだ非常に高速なWordPressホストを探す必要があります。 これによりコストを節約できるだけでなく、複雑さが大幅に軽減され、統合によりおそらくより迅速になります。

したがって、FCPを改善するために最初に実行できることは、優れたホストを調べることです。 統合されたCDN（自動プラットフォーム最適化を含むCloudflareエンタープライズ）を備えた最高のホストはRocket.netです。

これは、月に約100,000人の訪問者にブログを提供するために使用したWordPressホストです。また、プレミアムCDNと超高速ハードウェア、およびフルページキャッシュとの統合により、TTFBは非常に低くなっています。これは、FCPが制限されていないことを意味します。

レンダリングブロッキングリソースを排除する

FCP時間を最小限に抑えるために実行できる次の実用的なことは、レンダリングブロッキングリソースを排除することです。 レンダリングブロックリソースは、Webページのレンダリングプロセス中に呼び出されるWebサイトの要素（通常はCSSおよびJavaScript）です。

これらはレンダリングプロセスをブロックするため、ブラウザは実際にDOM要素を訪問者に表示し、レンダリングブロックリソースをダウンロードして解析し、ページ全体のレンダリングを続行するのを待つ必要があります。

このレンダリングのブロックによってFirstContentful要素もブロックされると想定した場合、これは正しいでしょう。 また、これらのリソースがレンダリングプロセスをブロックする時間が長いほど、First Contentful要素のレンダリングにかかる​​時間が長くなり、FCP時間スコアが高くなります。

レンダリングブロッキングリソースを排除する最良の方法は、Asset Cleanupと呼ばれるサードパーティのプラグインを使用してJavaScriptとCSSを延期し、非同期でロードすることです。 使用されていないWebページでさまざまなスクリプトを無効にして、未使用のCSSを最小限に抑えることもできます。これについては、この記事の後半で説明します。

インラインクリティカルCSS

さらに、重要なCSSをインライン化すると、レンダリングプロセスが終了するまでメインCSSスタイルシートの読み込みを延期できます。 これはアセットのクリーンアップで実行できますが、キャッシングおよび最適化プラグインであるWPRocketを組み合わせることもお勧めします。 これには自動クリティカルCSSジェネレーターがあり、レンダリングブロックリソースの削除に関して非常にうまく機能します。

未使用のCSSを削除

次に、私たちがほのめかしたように、未使用のCSSを削除します。 未使用のスタイルをWebページにロードしている場合、これらはレンダリングブロッキングになる可能性がありますが、単にページが重くなり、転送されるデータが多くなり、FCPが遅くなります。

これらの未使用のCSSスタイルシートを取り除くことは、転送されるデータの量を最小限に抑えるための優れた方法であり、重要なFirstContentful要素をサイトにペイントする方法を明確にします。 これは、有益な方法でFCスコアに直接影響します。

これを行うための自動化されたソフトウェアはありませんが、個々のページとページの範囲からCSSを削除するのに役立つプラグインがあります。 これは、前述のようにアセットクリーンアップであり、スタイルとスクリプトのオンとオフを切り替えることができます。

次に、Webサイトのフロントエンドをテストして、何かが壊れていないかどうかを確認します。壊れていない場合は、未使用のCSSを削除して、Webサイトの読み込みを高速化し、FCPスコアを向上させます。

フォールドの上のスクリプト要素を削除する（JS広告のように）

あなたのウェブサイトの実際の構成に関して、フォールドの上にあるスクリプトベースの要素を削除することは、WordPressウェブサイトの最初のコンテンツフルペイントを改善する確実な方法です。 JavaScriptは可能な限り最適化できますが、その構成により、まっすぐなHTMLやインラインの重要なCSSよりもレンダリングが常に遅くなります。

したがって、Webページの最初のコンテンツフルペイントと見なされるJavaScript（基本的には折り目の上にあるもの、または訪問者に読み込まれる最初のビューポートにあるもの）がある場合は、それを取り除き、置き換える必要があります。純粋なHTMLで。

これは通常、フォールドの上に読み込まれるJavaScriptベースの広告を利用したコンテンツWebサイトの問題です。 これらのスクリプトは、累積的なレイアウトシフトにも大きな悪影響を与える可能性があります。

それらをより高速にロードするHTMLに置き換えることで、HTMLおよびCSSテクノロジの性質上、FirstContentfulPaintを大幅に改善できます。

フォールドの上の遅延読み込みを無効にする（クレイジー、私は知っています）

JavaScriptベースの要素のこのパージを続行し、折り畳みの上に表示される画像を遅延読み込みする場合は、実際にこの機能を無効にする必要があります。

画像の遅延読み込みは、WordPress Webサイトのパフォーマンスを向上させるための優れた方法ですが、JavaScriptライブラリを利用してその機能を有効にするため、実際にはFirstContentfulPaintに悪影響を及ぼします。

したがって、折り畳みの上に読み込まれる画像の遅延読み込みを無効にしますが、画像が適切に最適化されていることを確認します。 これには、それらをWebP形式に変換すること（ShortPixelを使用）、および明確さを維持しながら可能な限り小さくするために完全に圧縮することが含まれます。

インライン画像（SVGまたはBase64）

画像の最適化をさらにクレイジーにしたい場合、主要な解像度要件を持たない小さな画像の場合は、先に進んでインライン化できます。 これは、折り目の上に読み込まれる特定のロゴや小さな画像がある場合に適しています。 それらをSVGまたはbase64形式に変換することで、画像をインライン化し、ダウンロードするための余分なHTTPリクエストを減らし、FCPを改善します。

このアドバイスは特定のユースケースにのみ役立つ可能性があることに注意してください。HTTP2ベースのサーバー、またはインライン化しようとしている非常に重いイメージがある場合は、そのままにしておくことをお勧めします。

ただし、SVGとbase 64のロゴ、検索アイコン、ソーシャルメディアアイコン、背景を利用すると、First Contentful Paintに役立ち、GoogleでのWordPress Webサイトのスコアが向上し、ランキングとユーザーエクスペリエンスに役立つ可能性があります。

DOMサイズに焦点を当てる

あなたができる最後の主要なことはあなたのDOMサイズに焦点を合わせることです。 DOM、つまりドキュメントオブジェクトモデルは、基本的にページ上のすべての要素を参照する構造のようなツリーです。

したがって、本文、スパンラッパー、段落、ヘッダー、メタリンクなどのdivは、DOM要素と見なされます。 ページ上の要素が多いほど、レンダリング時間が長くなり、FirstContentfulPaintの速度が低下します。

したがって、DOM要素の数を減らすことで、Webサイトの読み込みが速くなります。 これは、要素を配置して可能な限り無駄のないページを完全に再構築するか、新しいテーマまたはページビルダーを利用することで実行できます。

たとえば、Elementorはその要素を数十の不要なdivでラップするため、コードの膨張が少ないページビルダーに切り替えると、ページ上のDOM要素の数を最小限に抑え、データ転送を減らし、レンダリング時間を短縮し、 GoogleでのFirstContentfulPaintのスコアが向上しました。

結論

First Contentful Paintは、WordPress Webサイトでの実際のユーザーエクスペリエンスから派生しているため、パフォーマンスの低いアセットでスケートをすることはできません。 代わりに、最初に取り組み、ペイントスコアに正面から取り組み、これら6つの方法を最適化に組み込んで、ユーザーエクスペリエンスを向上させ、ランキングの配置を増やし、バウンス率を下げる必要があります。

WordPress Webサイトの全体的なパフォーマンスを向上させるために使用できる方法は他にもたくさんあります。これは、First Contentful Paintにも役立ちますが、これらの6つの方法は、WordPressWebサイトで最初のテンプルペイントを向上させるための最良の方法です。 追加の最適化の推奨事項がある場合は、下のコメントセクションに自由に残してください。