2026年8月13日

WordPressのFCPを改善する方法

SEO・パフォーマンス

はじめに

サイトの表示速度は、ユーザーエクスペリエンスと検索エンジンからの評価を大きく左右します。First Contentful Paint (FCP) は、ユーザーがウェブページを開いたときに最初のコンテンツが描画された瞬間を示す重要なパフォーマンスメトリックです。この記事では、WordPressサイトのFCPを改善するための具体的な手法と設定方法について紹介します。

症状・背景

このテーマが必要になる主な場面:

FCP値が他のウェブサイトに比べて遅い
ユーザーからのページ読み込みに関する不満やクレームが増えている
SEOツールでパフォーマンス評価が低い
高速かつ魅力的なユーザーエクスペリエンスを提供したい

手順・設定方法

ステップ1: サイトのFCP値を確認する

# Google LighthouseやPageSpeed Insightsなどのツールを使って、サイトのFCP値を調べます。
lighthouse --chrome-flag="--headless" https://example.com/ > report.json

ステップ2: フォントの遅延読み込みとプリロード

# Google Fontsなどの外部フォントが読み込まれる前にサイトの表示を遅らせないために、フォントを遅延読み込みに設定します。
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" onload="this.onload=null;this.rel='preload';">

ステップ3: JavaScriptの遅延読み込みとアセンブル

# WordPressテーマやプラグインが使用するJavaScriptファイルを遅延読み込みし、必要になったタイミングで動的に読み込ませます。
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var script = document.createElement('script');
    script.src = 'path/to/your-script.js';
    document.body.appendChild(script);
  });
</script>

ステップ4: テーマとプラグインの最適化

# WordPressテーマをカスタマイズし、不要なCSSやJavaScriptファイルを削除します。
wp dequeue_style --css-path=style.css
wp dequeue_script --handle=my-script-handle

注意事項

FCP改善に取り組む前に、サイトの全体的なパフォーマンス評価を行ってください。
フォントやJavaScriptファイルを遅延読み込みする際は、ユーザー体験が低下しないように注意してください。
サードパーティ製プラグインは最新バージョンを使用し、不要なものは削除することを推奨します。
定期的にサイトのパフォーマンスをモニタリングし、必要に応じて調整を行ってください。

まとめ

1. FCP値の確認: Google LighthouseやPageSpeed Insightsを使ってFCPを定期的にチェックしましょう。

2. 遅延読み込みとプリロード: フォントやJavaScriptファイルがページ読み込みに影響を与えないよう、適切なタイミングで読み込むように設定します。

3. テーマとプラグインの最適化: 不要なリソースを削減し、サイトのパフォーマンスを向上させます。

4. 定期的なモニタリング: FCP値が改善するか否かを確認するために、定期的にパフォーマンス評価を行いましょう。

Post Views: 2