• ホームページ
  • 記事
  • 技術
  • WordPress の First Contentful Paint (FCP) を改善する方法 (サーバーサイドとフロントエンドの最適化)

WordPress の First Contentful Paint (FCP) を改善する方法 (サーバーサイドとフロントエンドの最適化)

公開: 2024-02-28
WordPress の First Contentful Paint (FCP) を改善する方法
@Cloudwaysをフォローしてください

WordPress サイトの読み込みに時間がかかると感じたことはありませんか? もしそうなら、あなたは一人ではありません。 Web サイトが遅いとユーザーはイライラし、検索ランキングに悪影響を及ぼします。 しかし、WordPress 開発者の皆さん、心配しないでください。 この記事では、主要な指標である First Contentful Paint (FCP) の改善を簡単に説明します。

FCP は、ユーザーがテキストや画像などの実際のコンテンツの最初の部分を見た瞬間と考えてください。 それが早く現れるほど、彼らはより幸せになります。 FCPが遅い？ 有益なコンテンツを見る前にクリックして離れてしまう可能性があります。

この記事では、FCP の改善を、コーディングの訓練中の忍者でも理解できる簡単な手順に分けて説明します。 特別なスタイル (「クリティカル CSS」) の使用と障害 (「レンダリング ブロッキング リソース」) の削除について説明します。

目次
  • FCP とは何ですか?なぜそれが重要ですか?
  • 良い FCP スコアとは何ですか?
  • FCP の問題を診断する
  • FCPを改善するための戦略
    • サーバー側の最適化
    • フロントエンドの最適化

FCP とは何ですか?なぜそれが重要ですか?

FCP は、ブラウザがページ上の意味のあるコンテンツの最初の部分をレンダリングするのにかかる時間を測定する重要な指標です。 これは、テキスト、画像、アイコン、または単なる読み込みスピナーや背景色以外の任意の要素である可能性があります。

本質的に、それは訪問者が最終的に何か具体的なもの、つまりウェブサイトが生き生きとしている兆候を見た瞬間です。 素早い FCP が訪問者に「こんにちは、私たちはここに来て、素晴らしいものをお見せする準備ができています!」と伝えます。

一方、FCP が遅いと、動作が遅く、技術的な問題が発生する可能性があるというイメージが伝わります。 これにより、イライラした訪問者がコンテンツを体験する前に離れてしまう可能性があり、エンゲージメント率やコンバージョン率に影響を与える可能性があります。

FCP を改善するということは、Web サイトで最初の「すごい」瞬間を迅速に提供できるようにすることです。 ページのレンダリング方法を制御することで、ユーザー エクスペリエンスを向上させ、SEO ランキングを向上させ、真に優れた Web サイトを作成できます。

読み込み速度が遅いためにウェブサイトのパフォーマンスが低下しないようにしてください。

今すぐ Cloudways に切り替えて、読み込み速度を加速し、ユーザー エクスペリエンスを向上させてください。

今すぐやってみて下さい

良い FCP スコアとは何ですか?

FCP は 1.8 秒以下を目指します。 この期間により、ほとんどのユーザーはサイトが高速で応答性が高いと認識します。 Google では、これが優れたユーザー エクスペリエンスであると考えています。

1.8秒を目標にしながら、さらなる速さを目指します。 モバイル デバイスとデスクトップ デバイスにわたってセグメント化されたページ読み込みの 75 パーセンタイルは、理想的にはこの範囲内に収まる必要があります。 これにより、一貫性が確保され、さまざまなデバイス タイプとネットワーク速度に対応できます。

内訳は次のとおりです。

0 ～ 1.8秒: 良好です。 ユーザーはあなたのサイトが超高速であると認識します。
1.8 ～ 3秒: まだ良好ですが、潜在的なユーザーの不満を避けるために改善を目指します。
3秒以上: 悪い! 訪問者が遅さを感じて直帰する可能性があります。

– 出典: web.dev

FCP の問題を診断する

Lighthouse、Google PageSpeed Insights、GTmetrix などのツールは、Web サイトを分析し、FCP を遅らせている特定の要素を特定できます。 次のような犯人を探してください。

  • 大きな画像または最適化されていない画像
  • レンダリングをブロックするリソース
  • 重量級フォント
  • 過度に複雑な JS と CSS

容疑者を特定したら、さらに深く掘り下げてその影響を理解します。 Google PageSpeed Insights などのツールは詳細なパフォーマンス分析を提供し、FCP に影響を与える特定のスクリプト、スタイル、ネットワーク リクエストを正確に特定するのに役立ちます。

Google PageSpeed Insights を開き、検索バーにウェブサイトの URL を入力し、[分析]をクリックします。

  • これにより、FCP と全体的なパフォーマンスを向上させるために改善できる領域を強調した詳細なレポートが生成されます。

  • FCP メトリクスに注目してください。 実際のコンテンツの最初のビットが訪問者の画面に表示されるまでにかかる時間を示します。

  • 次に、PageSpeed Insights の診断セクションを確認してください。 サイトの FCP を改善するための具体的な方法がリストされています。

FCPを改善するための戦略

真に魅力的なエクスペリエンスを作成するには、サーバーサイドとフロントエンドの最適化の両方の面で FCP に取り組む必要があります。 それぞれの実行可能な戦略を見てみましょう。

サーバー側の最適化

これは、Web ページを表示するために必要なデータを迅速に送信するためにサーバーに変更を加えるというものです。 これは、適切なキャッシュ方法を使用し、送信前にファイルを圧縮し、サーバーの応答を速くすることで実現できます。

1. サーバー応答時間の短縮 (TTFB)

最初のバイトまでの時間 (TTFB) は、Web サーバーまたはその他のネットワーク リソースの応答性の指標として使用される測定値です。

TTFB の削減は、サーバーのソフトウェア構成を最適化し、効率的なデータベース クエリを確保し、HTTP リクエストを最小限に抑えることで実現できます。

1.1. より良いホスティングプロバイダーを選択する

ホスティング プロバイダーの選択は、サイトのパフォーマンスに大きな影響を与える可能性があります。 優れた稼働時間、強力なセキュリティ対策、高速ハードウェアを提供するプロバイダーを探してください。

Cloudway はパフォーマンスと最適化を優先するため、良い選択となる可能性があります。 さらに、信頼性の高い稼働時間を実現し、ユーザーが Web サイトに常にアクセスできるようにします。 Web サイトのパフォーマンスを向上させるために Cloudways が提供するものを見てみましょう。 詳細については、こちらをご覧ください。

1.2. サーバー ソフトウェアの最適化

これには、最適なパフォーマンスを確保するために Web サーバー ソフトウェア構成を微調整することが含まれます。 これには、圧縮の有効化、速度とセキュリティのための SSL/TLS 構成の最適化、静的ファイルを効率的に配信するためのサーバーの構成などが含まれます。

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

CDN は、世界中のさまざまな場所に分散されたサーバーのネットワークです。

ユーザーがサイトからファイルをリクエストすると、そのファイルは CDN 内の最も近いサーバーから配信されるため、読み込み時間が短縮されます。 CDN は、トラフィックの急増や DDoS 攻撃からサイトを保護するのにも役立ちます。

Cloudways ユーザーにとって、Cloudflare CDN を統合すると、地理的な分散を超えた追加のメリットが得られます。 Cloudways アカウントとシームレスに統合され、セットアップと管理が簡素化されます。 また、Cloudflare CDN には次のような機能が含まれています。

2. サーバーレベルのキャッシュを活用する

サーバーレベルのキャッシュは、サイトのページのコピーを一時的な保存場所に保存することで、Web サイトの速度を大幅に向上させることができます。 これにより、ページ ビューの生成に必要な作業量が削減され、ユーザーの読み込み時間が短縮されます。

2.1. サーバーレベルのキャッシュ用の WP プラグイン

サーバーレベルのキャッシュの実装に役立つ WordPress プラグインがいくつかあります。 これらには次のものが含まれます。

  1. W3 Total Cache: このプラグインは、ページ キャッシュ、オブジェクト キャッシュ、ブラウザ キャッシュなどの包括的なキャッシュ オプション スイートを提供します。
  2. WP Super Cache: この使いやすいプラグインは、動的 WordPress サイトから静的 HTML ファイルを生成します。 Web サーバーは、重い PHP スクリプトを処理する代わりに、これらの HTML ファイルを使用します。

2.2. サーバー側のキャッシュ ルールを構成する

サーバー側のキャッシュの構成には、サーバーがコンテンツをいつどのようにキャッシュするかに関するルールの設定が含まれます。 一般的な手順をいくつか示します。

  • キャッシュを有効にする:これは通常、サーバーの構成ファイル (Apache サーバーの .htaccess など) を通じて行われます。
  • キャッシュ制御ヘッダーの設定:これらのヘッダーは、キャッシュするファイルの種類とそれらを保存する期間を定義します。
  • ETag を構成する: ETag は、キャッシュされたコンテンツが最後にキャッシュされてから変更されたかどうかをブラウザが判断するのに役立ちます。
  • Expires ヘッダーを使用する:これらのヘッダーは、コンテンツをキャッシュする期間をブラウザーに指示します。

フロントエンドの最適化

これは、Web ページをより速く表示するためにユーザーのデバイスに変更を加えるというものです。 これは、ページの速度を低下させるリソースの使用を減らし、CSS および JavaScript ファイルを改善し、必要な場合にのみ画像を読み込むことで実現できます。

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

CSS や JavaScript などのレンダリングをブロックするリソースにより、Web サイトの読み込み時間が遅くなる可能性があります。 この問題に対処する方法は次のとおりです。

3.1. 重要な CSS を特定し、最初にロードする

クリティカル CSS は、Web ページのスクロールせずに見える範囲のコンテンツをレンダリングするために必要なブロック CSS の最小セットです。 HTML ドキュメント内の重要な CSS を特定してインライン化し、他のすべての CSS スタイルの読み込みを延期します。

3.2. クリティカルでない JavaScript の遅延または非同期読み込み

重要ではない JavaScript は、ページのレンダリングを高速化するために遅延または非同期的にロードできます。 これを実現するには、スクリプト タグで defer または async 属性を使用します。

HTML ドキュメントが完全に解析されるまで、重要ではない JavaScript の読み込みを延期するには、スクリプト タグで defer 属性を使用します。

 <script src="non-critical.js" 遅延></script>

あるいは、 async 属性を使用してスクリプトを非同期的にロードします。

 <script src="non-critical.js" 非同期></script>

3.3 未使用のスクリプトとスタイルを削除する

未使用のスクリプトとスタイルを削除して、不要なバイトを削除します。 次のツールは、未使用の CSS を特定して削除するのに役立ちます。

  1. PurifyCSS: このツールは、未使用の CSS を削除するために使用できます。 ソース ファイルをチェックし、未使用のセレクターを CSS から削除します。
  2. UnCSS: PurifyCSS と同様に、UnCSS もスタイルシートから未使用のスタイルを削除します。
  3. Chrome DevTools: Chrome DevTools の [Coverage] タブは、未使用の JavaScript および CSS コードを特定するのに役立ちます。

開発者と代理店向けの最速の WordPress ホスティングを月額わずか 11 ドル*

Cloudways LAMP + NGINX ハイブリッド スタックで驚異的な高速サーバー速度を体験してください。 Cloudways ホスティングで Core Web Vitals を改善し、WordPress を強化しましょう。

無料でお試しください

4. CSS 構造を最適化する

CSS を最適化すると、レンダリング時間が短縮され、ユーザー エクスペリエンスが向上します。 その方法は次のとおりです。

4.1. CSS ファイルの縮小と縮小

縮小化では、コードから不要な文字を削除してサイズを削減し、ロード時間を短縮します。 圧縮により CSS ファイルのサイズが削減され、ブラウザへの配信が最適化されます。 Breeze には組み込みの CSS 縮小機能があり、すべての CSS ファイルを自動的に最小化して読み込み時間を短縮します。 また、重要な CSS をインライン化するための個別のオプションも提供され、FCP がさらに強化されます。

4.2. 主要な CSS リクエストをプリロードする

<link>タグのpreload属性を使用すると、ブラウザーは主要な CSS ファイルをできるだけ早くダウンロードできるため、ページのレンダリングにかかる​​時間を短縮できます。次に、preload 属性を使用して CSS ファイルをプリロードする方法の例を示します。

 <link rel="preload" href="styles.css" as="style">

これにより、styles.cssファイルはすぐに必要になる可能性があるため、すぐにダウンロードを開始するようブラウザーに指示されます。as=”style”属性は、ブラウザーがリソースをダウンロードする際の正しい優先順位を設定するのに役立つため、重要です。

注:リソースをプリロードしすぎると、必要な帯域幅が使い果たされてパフォーマンスが低下する可能性があるため、注意してください。最初のページ読み込みでは重要な CSS ファイルのみをプリロードすることをお勧めします。

5. スクロールせずに見える部分の上に JavaScript に依存する要素を避ける

JavaScript に依存する要素により、Web サイトの読み込み時間が遅くなる可能性があります。 この問題に対処する方法は次のとおりです。

5.1. アニメーションとスライダーに代替ソリューションを使用する

JavaScript ベースのアニメーションやスライダーの代わりに、CSS アニメーションや HTML5 ビデオの使用を検討してください。 これらの代替手段は、ページの読み込み時間への影響を少なくしながら、同様の機能を提供できます。

CSS アニメーションは、JavaScript アニメーションを置き換えることができる強力な機能です。 これらはブラウザのレンダリング エンジンによって実行され、ハードウェア アクセラレーションを使用してパフォーマンスを向上させることができます。

簡単な CSS アニメーションの例を次に示します。

 @keyframes スライド {
  {変換:translateX(0);から}
  に { 変換:translateX(100px); }
}

.myElement {
  アニメーション: スライド 2 秒無限。
}

HTML5 ビデオを使用すると、JavaScript に依存せずにリッチで動的なコンテンツを作成できます。 最新のすべてのブラウザでサポートされており、標準の HTML5 ビデオ API を使用して制御できます。

 <ビデオ幅="1080" 高さ="720" コントロール>
  <source src="movie.mp4" type="video/mp4">
  お使いのブラウザはvideoタグをサポートしていません。
</ビデオ>

5.2. 必須ではない JavaScript の実行を遅延する

必須ではない JavaScript は、ページが読み込まれるまで延期できます。 これにより、ブラウザーはページをより迅速にレンダリングできるようになり、ユーザー エクスペリエンスが向上します。

<script>タグのdefer属性により、ブラウザは HTML ドキュメントが完全に解析された後にスクリプトを実行できます。

 <script src="script.js" 遅延></script>

async属性を使用すると、ページのレンダリングをブロックすることなく、他のリソースと並行してスクリプトをフェッチし、利用可能になるとすぐに実行できます。

 <script src="script.js" 非同期></script>

JavaScript には、 DOMContentLoadedやloadなどのイベントが用意されており、これらのイベントを使用すると、ページが読み込まれるまで重要ではない JavaScript の実行を遅らせることができます。

 window.addEventListener('load', function() {
  // コードはここにあります
});

6. スクロールしないと見えない部分までの画像の遅延読み込みを避ける

遅延読み込みでは、必要なときにのみ画像を読み込むことでパフォーマンスを向上させることができます。 ただし、スクロールせずに見える範囲に表示される画像の遅延読み込みを避けることが重要です。 その方法は次のとおりです。

6.1. 重要なイメージをプリロードする

プリロードにより、ブラウザは重要な画像をできるだけ早くダウンロードできます。 これにより、ページのレンダリングにかかる​​時間が短縮され、ユーザー エクスペリエンスが向上します。 その方法は次のとおりです。

  • HTML のlink要素でrel属性のプリロード値を使用します。これにより、指定されたリソースのダウンロードをできるだけ早く開始するようブラウザに指示されます。
  • サーバーが HTTP/2 をサポートしている場合は、サーバー プッシュを使用して、リソースが要求される前にクライアントにリソースを送信できます。 これは、重要なイメージを事前にロードする場合に特に効果的です。

6.2. スクロールせずに見える範囲の画像最適化手法を使用する

スクロールせずに見える範囲に表示される画像を圧縮し、適切にサイズ変更し、WebP などの最新の画像形式を使用して最適化します。

7. 画像の最適化と圧縮

画像の最適化により、ページの読み込み時間が大幅に短縮され、帯域幅の使用量が削減され、ユーザー エクスペリエンスが向上します。 その方法は次のとおりです。

7.1. 適切な画像形式と圧縮レベルを選択する

画像の内容に応じて、さまざまな画像形式と圧縮レベルを使用できます。 たとえば、写真には JPEG、色数の少ないグラフィックには PNG、ベクター画像には SVG を使用します。

Imagify を使用すると、ワンクリックで画像のサイズ変更と圧縮を簡単に行うことができ、WordPress の画像最適化プラグインの中で最も優れたプラグインの 1 つと考えられています。 手順は次のとおりです。

  • まず、Imagify プラグインを WordPress サイトにインストールし、有効にします。
  • 電子メール アドレスを使用して API キーを生成します。 生成されたら、このキーをコピーして次のパスに貼り付けます:WordPress ダッシュボード > 設定 > Imagify 。
  • WordPress ダッシュボード → 設定 → Imagify → 最適化セクションに移動します。

最適化セクションで、 [サイト上に画像を WebP 形式で表示する]オプションと[<picture> タグを使用する]を選択します。

7.2. レスポンシブ画像技術を使用する

HTML のsrcset属性などの応答性の高い画像技術を使用すると、ブラウザーはデバイスの画面サイズと解像度に基づいて最適な画像ソースを選択できます。 これにより、帯域幅の使用量が削減され、モバイル デバイスの読み込み時間が短縮されます。

8. DOM サイズを削減する

ドキュメント オブジェクト モデル (DOM) のサイズを削減すると、パフォーマンスが向上する可能性があります。 以下にいくつかの戦略を示します。

8.1. HTMLマークアップを最小限に抑える

HTML をクリーンで無駄のないものに保ちます。 不要なタグを削除し、セマンティックな HTML 要素を使用し、可能な限りインライン スタイルを避けます。

HTML をクリーンで無駄のない状態に保つには、次のことができます。

  • W3C Markup Validation Service などの HTML バリデーターを使用して、不要なタグを特定して削除します。
  • <article>、<section>、<nav> などのセマンティック HTML 要素を使用して、コンテンツに関する詳細情報を提供します。
  • <head> セクションでは、インライン スタイルの代わりに外部 CSS スタイルシートまたは内部 CSS を使用します。
 <!-- 良い -->
<頭>
    <スタイル>
        。私のクラス {
            青色;
        }
    </スタイル>
</head>
<本文>
    <div class="myClass">Hello, World!</div>
</body>

<!-- 悪い -->
<本文>
    <div>こんにちは、世界!</div>
</body>

8.2. 不必要なネストされた要素を避ける

要素が深くネストされていると、DOM が大きく複雑になり、ページのレンダリングが遅くなる可能性があります。 HTML 構造をできるだけフラットに保つようにしてください。

DOM が大きくなり複雑になるのを避けるために、次のことができます。

  • レイアウト目的には、ネストされたテーブルや div の代わりに CSS フレックスボックスまたはグリッドを使用します。
  • CSS コンビネータを使用して、HTML を複雑にすることなく要素をスタイル設定します。

深くネストされた要素に直接アクセスするには、Document.querySelector()またはDocument.querySelectorAll()を使用します。

 <!-- 良い -->
<div class="コンテナ">
    <div class="item">アイテム 1</div>
    <div class="item">アイテム 2</div>
</div>

<!-- 悪い -->
<div>
    <div>
        <div>アイテム 1</div>
    </div>
    <div>
        <div>アイテム 2</div>
    </div>
</div>

9. Webフォントのロード中にテキストが表示されたままであることを確認する

Web フォントはサイトの速度を低下させる可能性がありますが、Web フォントの読み込み中にテキストが表示されたままになるようにすることで、これを軽減できます。

9.1. 「スワップ」や「フォールバック」などのフォント表示オプションを使用する

CSS のfont-displayプロパティは、フォントがダウンロードされて使用できる状態になっているかどうか、いつ使用できるかに基づいて、フォントの表示方法を制御します。

「スワップ」値は、カスタム フォントが読み込まれるまでフォールバック フォントを使用してテキストを表示するようにブラウザに指示します。一方、「フォールバック」値は、フォントに短いブロック期間と無限のスワップ期間を与えます。

「スワップ」や「フォールバック」などのフォント表示オプションを使用するには、CSS の@font-faceルールにfont-displayプロパティを追加します。その方法は次のとおりです。

 @フォントフェイス {
  フォントファミリー: 'MyFont';
  src: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
  フォント表示: 交換; /* またはフォールバック */
}

これにより、カスタム フォントが読み込まれるまでフォールバック フォントを使用してテキストを表示するようブラウザーに指示されます。 「フォールバック」を使用すると、フォントのブロック期間は短くなり、スワップ期間は無限になります。

9.2. WebフォントをローカルまたはCDNでホストする

Web フォントをローカルまたはコンテンツ配信ネットワーク (CDN) 上でホストすると、HTTP リクエストの数が減り、ブラウザーのキャッシュが活用され、コンテンツ配信速度が向上するため、読み込み時間を短縮できます。

Web フォントをローカルまたは CDN でホストするには、次の手順に従います。

  • Google Fonts、Font SquirrelなどのソースからWebフォントファイルをダウンロードできます。
  • Web フォントをローカルでホストしている場合は、ファイルをサーバーにアップロードします。 CDN を使用している場合は、CDN の指示に従ってファイルをアップロードします。
  • CSS で@font-faceルールを使用して、フォント ファイルの場所を指定します。
 @フォントフェイス {
  フォントファミリー: 'MyFont';
  src: url('/path/to/myfont.woff2') format('woff2'),
       url('/path/to/myfont.woff') format('woff');
}

これにより、HTTP リクエストの数が減り、ブラウザーのキャッシュが活用され、コンテンツ配信速度が向上するため、読み込み時間を短縮できます。

弊社のマネージド WordPress ホスティングを愛用している 12,000 以上の代理店にご参加ください!

社内に IT チームを置く必要はもうありません。 Cloudways を選択して、超高速ホスティング、年中無休、24 時間年中無休のエキスパートによるサポート、クライアントが代理店に期待するパフォーマンスを体験してください。

無料でお試しください

まとめ

結論として、WordPress サイトの First Contentful Paint (FCP) の改善は、サーバー側とフロントエンドの戦略の両方を含む多面的なプロセスです。 サーバーの応答を改善し、サーバー キャッシュを使用し、レンダリング ブロックを削除し、CSS を強化することにより、FCP が高速化されます。

Lighthouse、Google PageSpeed Insights、GTmetrix などのツールは、FCP の問題を診断し、最適化の取り組みをガイドするのに役立ちます。 優れた FCP スコアは 1.8 秒以下であり、ほとんどのユーザーがサイトが高速で応答性が高いと認識します。