WordPressサイトのファーストコンテンツペインティング（FCP）スコアを上げ、ページ読み込みを高速化する方法

ファーストコンテンツペインティング（略してFCP）は、Googleがウェブページの読み込み速度を測定するために使用する主要な指標で、ユーザーがページの読み込みを開始してから、ページ上の最初のコンテンツが表示されるまでの時間を記録します。

WordPressウェブサイトのオーナーにとって、FCPはウェブサイトがどの程度機能しているかを示し、ユーザーエクスペリエンスや検索エンジン最適化（SEO）に影響を与える可能性があります。FCPが速いということは、訪問者が空白の画面を長時間見つめる必要がないということであり、ウェブサイト体験をより楽しいものにし、ユーザーのエンゲージメントを高めることができます。

Googleはユーザーエクスペリエンスを重視しているため、サイトのFCPスコアは検索結果での順位に直接影響します。FCPスコアが良い（ウェブ体験全体の上位25%にランクインするのが理想的）ということは、FCP時間が1.8秒以下であることを意味します。

WordPressのFCPを改善するための最善の戦略

サーバーの応答時間を短縮

WordPressサイトのファーストコンテンツペインティング（FCP）のパフォーマンスを向上させる重要なアクションの1つは、サーバーのレスポンスタイムを短縮することです。

TTFBとは、ユーザーのブラウザがサーバーから最初の1バイトのデータを受信するのにかかる時間のことです。TTFBが遅い場合、以下の原因が考えられます：

• ネットワーク接続の問題。
• サーバーの設定が速度に最適化されていない。
• 同時にオンラインになる訪問者が多すぎて、サーバーが処理しきれない。

TTFBを加速させるためにできることは以下の通りだ：

• 大量のトラフィックを処理できる設備と専門知識を備えた、信頼できるホスティングサービスを選ぶこと。
• コンテンツ・デリバリー・ネットワーク（CDN）を使用すると、世界中の複数の場所でウェブサイトのコピーをホストすることができるため、ユーザーは最も近い場所からサイトを読み込むことができ、ロード時間を大幅に短縮することができます。
• キャッシュを有効にすることで、訪問者が戻ってきたときに、毎回すべてを再読み込みすることなく、素早くサイトを表示することができます。

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

レンダリングをブロックするリソース、主にJavaScriptとCSSファイル。これらのファイルは、ブラウザがページのコンテンツ表示を開始する前に、完全に読み込まれて実行されなければなりません。これらのファイルが大きすぎたり複雑すぎたりすると、最初のコンテンツが表示されるまでのロード時間（FCP）が長くなります。

WordPressサイトの読み込みを速くするには、JavaScriptとCSSファイルの処理方法を最適化する必要があります。簡単に言うと、次のようにします：

JavaScriptファイルの場合

賢明なのはJavaScriptファイルでasync属性とdefer属性を使う. 

非同期ロード」を使用する場合、実際には、JavaScriptファイルがバックグラウンドで静かにロードされる間、ブラウザにページの構築を継続させていることになります。これらのスクリプトがダウンロードされた後、ブラウザはページの構築を一時的に停止し、スクリプトを実行した後、以前の作業を続行します。これらのJavaScriptファイルを特定の順序で実行する必要がない場合は、非同期ロードを使用することをお勧めします。

defer」の利点は、ブラウザがJavaScriptを実行する前に、ページが完全に表示されるまで待つことができることである。

💡 非同期ロードと遅延ロードのどちらを選択するかは、スクリプトの種類に大きく依存します：

• スクリプトの実行順序が重要な場合や、ページが完全に表示された後にスクリプトを実行する必要がある場合は、遅延ロードの方が適切な場合があります。
• スクリプトがページ上のHTML要素とあまり関係がなく、実行順序が重要でない場合は、非同期ロードの方がよいかもしれない。

CSSファイルの場合

ページを読み込むために最初に必要なCSSスタイルを、HTMLに直接書き込むことを検討しましょう。これは、最初にコンテンツをユーザーに見せるために必要な基本的なスタイルを、ウェブページのコードに直接記述することを意味します。そうすることで、ページを読み込む際に外部のCSSファイルを待つ必要がなくなり、ブラウザはより速くページの表示を開始することができます。

また、不要なCSSや未使用のJavaScriptコードを削除することで、ページの表示が速くなり、FCP（First Time Content Painting）が速くなります。

CSSの圧縮

CSSの圧縮とは、余分なスペースやコメント、区切り文字など、ファイルから不要なものを取り除くことであり、そうすることでページの動作に影響を与えることはない。

この方法は、CSSファイルのサイズを大幅に縮小し、読み込みを高速化することで、サイトのコンテンツの最初の表示を高速化します。この圧縮プロセスを自動化するためのツールやプラグインはたくさんあります。WPロケットCSSを圧縮するだけでなく、キャッシュやJavaScriptの遅延読み込みといった機能も提供し、WordPressサイトの高速化をサポートしてくれる。

他のオプションが必要な場合は、以下を試してみることもできる。自動最適化歌で応えるW3 Total Cacheなどのプラグインがある。これらのツールは自動的にCSSを圧縮するので、自分で手動で編集する必要がなく、時間とフラストレーションの両方を節約できる。

JavaScriptに依存する要素を最初の画面より上に配置することは避ける

訪問者に最初に表示されるウェブサイトのコンテンツがJavaScriptに大きく依存している場合、ウェブサイトの最初のコンテンツ表示（FCP）が遅くなる可能性があります。その理由は、ブラウザがコンテンツを表示する前に、JavaScriptコードをダウンロードし、分析し、実行する必要があるからです。

FCPを高速化するためには、サイトのファーストスクリーンコンテンツをJavaScriptではなく、主にHTMLとCSSに依存するのがベストです。つまり、JavaScriptの読み込みを待たずに素早く表示できるように、サイトのレイアウトや基本的なビジュアル要素を配置する必要があります。

この操作の方法は以下の通り：

1. サイトのどの部分がJavaScriptを必要とし、どの部分が必要としないかを評価する。例えば、シンプルなデザイン要素や基本的なコンテンツは、次のようなものであってはならない。必要JavaScriptを使えば、これらの要素を最初に読み込むようにHTMLを構築することができます。CSSはJavaScriptよりも読み込みが速く、同じような視覚効果が得られます。
2. JavaScriptファイルの遅延ロードまたは非同期ロード特に、最初のページレンダリングに重要でないファイル。こうすることで、すべてのJavaScriptの読み込みと実行を待つことなく、メインコンテンツを表示することができます。

ファーストスクリーン・コンテンツのHTMLとCSSの読み込みを優先し、JavaScriptへの最初の依存を減らすことで、FCPを高速化し、WordPressサイトにアクセスした訪問者によりスムーズでレスポンシブな体験を提供することができます。

画像を最適化し、最初の画面の読み込み遅延を防ぐ

ウェブサイト上部の画像が大きすぎると、読み込みが遅くなり、特にページ上部に配置される重要な画像は、ウェブサイト表示の第一印象（FCP）を遅くしてしまいます。

例えば、トップページの大きな背景画像（しばしば「ヒーロー画像」と呼ばれる）が最適化されていないと、渋滞のようにページが遅くなる。

この問題を避けるには、こうすればいい：

• 圧縮画像画像の見栄えをそれほど悪くすることなく、画像ファイルのサイズを小さくすることができます。
• 正しい画像フォーマットを選ぶ例えば写真の場合、JPEG形式のものはPNG形式のものより小さく、読み込みも速い。
• レスポンシブ画像の使用サイトにアクセスするデバイスに応じて、異なるサイズの画像を提供する。例えば、携帯電話ユーザーにはデスクトップユーザーよりも小さな画像ファイルを提供することで、小さな画面デバイスでの読み込みを高速化します。
• 遅延ローディングの実施: 画像が画面に表示されるときだけ読み込む。この方法は、最初の画面以下の画像には有効ですが、最初の画面上の画像には使わない方が読み込み速度に影響しません。
• プラグインでプロセスを簡素化Smushは、画像を自動的に圧縮・最適化してくれる素晴らしいツールです。

これらの方法によって、ウェブサイトの読み込み速度を改善し、訪問者がサイトを開くとすぐにコンテンツを見ることができるようになります。

サーバーレベル・キャッシングの実装

サーバーレベル・キャッシングとは、ウェブサイトのページのコピーをサーバーに保存しておくことです。こうすることで、誰かが再びサイトを訪れたとき、サーバーは毎回ページ全体を再読み込みすることなく、このキャッシュされたページだけを表示することができます。

この方法が素晴らしいのは、ブラウザ・キャッシングではできないことができるからです。ブラウザ・キャッシングとは、訪問者のコンピューターや携帯電話にウェブサイトの情報を保存し、次に訪問したときに速く読み込めるようにすることです。しかし、初めての訪問者にとっては、ブラウザ・キャッシングは役に立ちません。一方、サーバーレベル・キャッシングは、初めての訪問者であろうとなかろうと、すべての訪問者がより速く体験できるようにします。

最近では、WordPressホスティングを提供するサービスの多くにサーバーレベル・キャッシングが含まれており、すべてが非常に簡単になりました。また、WP RocketやW3 Total Cacheのようなプラグインを使用することで、サーバーレベルキャッシングを含む多くのキャッシングオプションを利用することができます。

DOMサイズの縮小

ウェブ開発では、ドキュメント・オブジェクト・モデル、略してDOMと呼ばれるものがあります。DOMはウェブページの設計図で、ブラウザがページの各部分（テキスト、画像、見出しなど）をどのように表示するかを知るのに役立ちます。

DOMは、ウェブページを多くの小さなパーツからなる大きなファミリーツリーに変えます。ウェブページ上で何かをする（ボタンをクリックするなど）たびに、ブラウザはこのファミリーツリーを参照し、アクションに応じてウェブページを更新します。

家系図が単純であればあるほど、ブラウザはウェブページをより速くレンダリングします。しかし、家系図が複雑すぎると、ブラウザが家系図を理解するのに時間がかかり、ウェブページの表示が遅くなります。簡単に言うと、DOMを無駄のない状態に保つことで、ウェブページの読み込みが速くなり、より快適なブラウジングが可能になります。

基本的に、無駄のないDOMは、より高速なインタラクションと、より応答性の高いユーザー体験を可能にする。

DOMサイズを小さくするための便利なヒントをいくつか紹介しよう：

• 不必要なものを最小限に抑えるディヴ要素だ：HTMLのdiv要素を使いすぎると、DOMが大きくなりすぎてしまいます。特定の目的に使用されていないdivを削除することで、ページ構造をシンプルにしましょう。
• CSSをより効率的に使用する：CSSはブラウザの処理速度が速く、多くの場合、より合理的なDOM構造で望ましい視覚的・機能的結果を実現します。このアプローチは DOM を整理し、ページの読み込み時間を短縮します。
• セマンティックHTML：可能な限り、一般的なdiv要素の代わりに
  、

  、

  、
• JavaScriptで生成されたHTMLを最適化する：JavaScriptを使って動的にHTMLを生成する場合は、そのプロセスが効率的であることを確認してください。不必要な要素の入れ子は避け、生成されたHTMLの構造を調べ、単純化する機会を探しましょう。
• コードを見直し、リファクタリングする：ChromeのDevToolsなどのツールは、大きすぎたり複雑すぎたりするDOMの部分を特定するのに役立ちます。コードのリファクタリングとは、要素を組み合わせたり、CSSセレクタを簡素化したり、ページの特定の部分をリファクタリングしたりすることです。
• CSS GridとFlexboxを使用する：GridやFlexboxといった最新のCSSレイアウト・テクニックは、余分なdivや入れ子構造の必要性を大幅に削減します。これらは、より少ないHTMLで複雑なレイアウトを作成する、より効率的な方法を提供します。
• サードパーティ製スクリプトの使用を制限する：サードパーティのスクリプトは、DOMに余分な要素を追加する可能性があります。可能な限り使用を制限し、軽量な代替手段を選びましょう。

コンテンツ・デリバリー・ネットワーク（CDN）の利用

コンテンツ・デリバリー・ネットワーク、略してCDNは、宅配便のようなものだが、これはウェブコンテンツを配信するものだ。CDNは、世界中にサーバー（宅配便の駅だと思ってください）を配置し、どこにいてもウェブページに高速でアクセスできるようにします。

ウェブサイトを閲覧するたびに、CDNサービスが最寄りの「デリバリー・ステーション」（別名サーバー）からコンテンツを素早く配信すると想像してみてほしい。この利点は、データの移動距離が短縮され、ページの読み込みが格段に速くなることだ。

この高速配信は、ウェブページをより速く開くだけでなく、あなたのウェブサイトを検索エンジンで上位にランクさせます。読み込みの速いウェブページは人気が高いため、検索エンジンはそのページをより好みます。簡単に言えば、CDNを使用することは、あなたのウェブサイトにスーパーブースターを装着し、ユーザーの前に飛び立たせるようなものです。

WordPressと互換性のある信頼性の高いCDNが含まれています：

• クラウドフレア:: Cloudflareは、その広範なウェブ機能とセキュリティ機能で広く知られています。非常に強力な無料プランを提供し、WordPressとの容易な統合で知られ、WordPressウェブサイトの所有者に人気のある選択肢となっています。
• アカマイ:: アカマイは最も古く、最も総合的な CDN サービスのひとつで、その広大なサーバーネットワークと高度なセキュリティ機能で知られています。
• MaxCDN（現StackPath）:: StackPathは高速CDNサービスを提供しており、特にユーザーフレンドリーなインターフェースとWordPressのキャッシュプラグインとの効果的な統合で知られており、中小規模のウェブサイトに人気のある選択肢となっています。
• キーシーディーエヌ:: KeyCDNは、手頃な価格で効率的なCDNプロバイダーであり、WordPressを使用して簡単にセットアップでき、トラフィックが変動するウェブサイトにとって魅力的な従量課金制を提供しています。
• Amazon CloudFrontAmazon Web Services（AWS）の一部であるCloudFrontは、他のAWSサービスとうまく統合された強力なCDNサービスです。高度なカスタマイズを必要とし、すでにAWSエコシステムの一部となっているサイトには良い選択です。
• 速く::エッジコンピューティング機能を持つリアルタイムCDNにより、Fastlyはコンテンツを配信するだけでなく、ユーザーに非常に近いところでカスタムコードを実行し、独自のパーソナライズ機能と最適化機能を提供します。
• スクリ:: 主にセキュリティソリューションで知られるSucuriは、セキュリティとパフォーマンスを統合したCDNサービスも提供しており、スピードとセキュリティを重視するWordPressサイトには最適な選択肢となっている。

複数ページのリダイレクトを避ける

リダイレクトはウェブページの踏み台のようなもので、時には私たちや検索エンジンを正しいURLへと導いてくれる。しかし、このプロセスはウェブページを開く速度を遅くする。ブラウザが、ジャンプする必要のある場所に出会うたびに、「道を尋ねる-新しい方向を教えてもらう-もう一度行く」という余計なラウンドをしなければならないことを想像してみてほしい。

道を尋ねると、目的地が変わったので別の道を行く必要があると言われるようなものだ。道を尋ねるたびに、そこに着くまでに時間がかかり、ブラウザがコンテンツを表示するのも遅くなる。

もしウェブページにこのような分岐点（リダイレクトとも呼ばれる）が多すぎると、データの移動が長くなり、ウェブページの読み込みにかかる時間が長くなり、ユーザーを焦らせることになりかねません。そのため、リダイレクトは本当に必要なときだけ使用し、不必要な遅延を避けることで、ウェブページを訪問するすべての人がより幸せでスムーズになるようにする必要があります。

リダイレクトを効果的に管理し、ウェブサイトのパフォーマンスとSEOを最適化するために、以下の手順を踏むことができます：

• サイトのリダイレクトを監査する。グーグルのページスピード・インサイトそしてジーティーメトリックスもしかしたらウェブページテストなどのツールを使ってウェブサイトを分析し、リダイレクトの数や影響をレポートします。不要なリダイレクトを特定するのに役立ちます。
• サーバーの設定を確認する：サーバーのコンフィギュレーション・ファイル（例：Apacheサーバー）で.htaccessを参照してください）。リダイレクトが設定されたまま忘れられていることがあるので、これらの設定を定期的にチェックすることが重要です。
• URL構造の簡素化：目標はシンプルなURL構造です。これにより、リダイレクトの必要性を減らすことができる。
• 内部リンクをチェックする：すべての内部リンクは、中間URLにリダイレクトするのではなく、最終的な目的地URLに直接ポイントするようにします。
• 外部リンクを更新する：外部リンク（他のサイトからのバックリンクなど）をコントロールできる場合は、不要なリダイレクトを避けるため、現在のURLを直接指すようにしよう。
• リダイレクション・チェーン1つのリダイレクトが別のリダイレクトにつながるようなチェーンは避けましょう。リダイレクトが必要な場合は、最終的な目的地のURLに直接飛ぶようにしましょう。
• 恒久的な変更を行うには301リダイレクトを使用します：301リダイレクトは、リダイレクトが必要な場合（ページを恒久的に移動する場合など）に使用します。一時的なリダイレクト（302など）よりも効果的で、SEO対策にもなります。

この問題を解決するプラグインやツールは数多くある：

• リダイレクトは、301リダイレクトを管理・追跡し、WordPressでのリダイレクト処理を簡単にする人気のプラグインです。
• スクリーミングフロッグSEOスパイダーは、あなたのウェブサイトをクロールし、リダイレクトとリダイレクトチェーンを識別し、あなたのウェブサイトのリダイレクト構造を理解し、最適化するのに役立つ強力なツールです。

これらの要素を定期的に監視し、微調整することで、WordPressサイトをスムーズかつ効率的に運営し、訪問者に優れたエクスペリエンスを提供し、強力なオンラインプレゼンスを維持することができます。

FCPスコアを測定するツール

ページの読み込み速度を定期的にチェックすること（FCPモニタリングと呼ばれるプロセス）は、ウェブサイトの健康診断を行うようなもので、何が原因で読み込み速度が低下しているのかを突き止め、読み込み速度を向上させる方法を見つけるのに役立ちます。そうすることで、サイトを訪れるすべての人がスムーズでスピーディーなブラウジングを楽しめるようになります。

この読み込み速度の監視を怠ると、訪問者を動揺させ、サイトへの訪問をやめてしまう可能性があります。インターネットという競争の激しい環境において、ウェブサイトの読み込みを速くすることは、ユーザーを満足させるだけでなく、あなたのウェブサイトを際立たせることにもつながります。

使い方：

1. PageSpeed Insightsのウェブサイトをご覧ください。
2. ウェブアドレスを入力してください。
3. クリック分析済みツールにあなたのページを評価してもらいましょう。

PageSpeed Insightsは、FCPスコアを含む詳細なレポートを提供します。それは異なる範囲にパフォーマンスを分類し、90以上のスコアは良いと考えられている.ツールはまた、サイトの読み込み速度と全体的なパフォーマンスを向上させるために可能な改善を提案.

灯台

灯台もGoogleが提供する無料のツールで、Chromeと統合し、パフォーマンス・スコアリングの一部としてFCPに関する洞察を提供する。 

これについては、Chrome DevTools の灯台Lighthouseは、（管理された条件下での）ラボデータと（実際のユーザー体験を反映した）フィールドデータを提供することで、サイトのFCPパフォーマンスを包括的に把握することができます。

ウェブページテスト

ウェブページテストは、詳細なパフォーマンスインサイトを提供するFCP測定用の多機能ツールです。さまざまな場所やブラウザからテストできるため、さまざまな条件下でのウェブサイトのパフォーマンスをより詳細に把握できます。

ジーティーメトリックス

ジーティーメトリックスGoogle Lighthouseと他のツールのパワーを組み合わせて、FCPを含むウェブサイトのパフォーマンスに関する詳細なレポートを提供します。そのユーザーフレンドリーなインターフェースと包括的な分析により、ウェブサイトの所有者や開発者に人気のある選択肢となっています。

これらのツールを使用することで、ウェブサイトのパフォーマンスを常に把握し、質の高いユーザー・エクスペリエンスを改善・維持するための情報に基づいた意思決定を行うことができます。

概要

ウェブサイトのコンテンツを素早く訪問者に届けることは重要です（「ファーストパスコンテンツマッピング」と呼ばれるプロセス）。より良いユーザーエクスペリエンスを実現するだけでなく、検索エンジンにおけるウェブサイトのランキングを向上させることにもつながります。ですから、この分野の最適化に時間をかける価値は大いにあるのです。

しかし、実際にこのような最適化を行うのは少し難しく、デバッグと最適化を段階的に行う忍耐強さが必要です。複雑なパズルを解くようなもので、少し面倒な作業かもしれませんが、最終的にはウェブサイトを高速化し、ユーザーのブラウジング体験を向上させることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み