2026年5月20日

WordPressのGTmetrixでサイト速度を診断する方法

SEO・パフォーマンス

はじめに

GTmetrixはWebサイトの表示速度をGoogle PageSpeed InsightsとYSlowの両方の観点から診断できるツールです。Waterfallチャートで読み込みの全体像を把握し、各リソースのボトルネックを特定することで、WordPressサイトのパフォーマンス改善が効率的に進められます。

症状・原因

GTmetrixのGradeがD以下でスコアが低い
LCP（最大コンテンツの描画）が3秒を超えている
Waterfallチャートで読み込みに時間のかかるリソースがある
どこから改善すればよいかわからない

解決手順

ステップ1：GTmetrixの診断結果を正しく読む

【GTmetrix スコアの見方】

GTmetrix Grade: A〜F（A以上が目標）
Performance: PageSpeed Insights のスコア（100点満点）
Structure: YSlow ベースの構造評価（100点満点）

【Core Web Vitals】
LCP (Largest Contentful Paint)  : 2.5秒以下が良好
TBT (Total Blocking Time)       : 150ms以下が良好（INP相当）
CLS (Cumulative Layout Shift)   : 0.1以下が良好

【その他の指標】
FCP (First Contentful Paint)    : 1.8秒以下が良好
TTI (Time to Interactive)       : 3.8秒以下が良好
Speed Index                     : 3.4秒以下が良好

【テスト設定の注意点】
・テストサーバーの場所: 日本のサーバーを選択
・接続速度: Cable（デスクトップ）またはMobile相当
・Throttling: Unthrottled ≠ 実際のユーザー環境
・AdBlockを有効にするとサードパーティの影響が見えなくなる

ステップ2：Waterfallチャートの読み方と改善

【Waterfallチャートの色の意味】
青   : DNS Lookup（DNSの名前解決）
橙   : Connect（TCP接続）
緑   : Send（リクエスト送信）
赤   : Wait (TTFB)（サーバーレスポンス待ち）
灰   : Receive（データ受信）

【ボトルネックの特定】
TTFBが長い（赤が長い）→ サーバー処理・キャッシュの問題
大きなファイル（受信が長い）→ 画像・JS・CSS最適化
多数の外部ドメイン → DNS Prefetch・Preconnect の追加
ウォーターフォールが縦に長い → 並列読み込みできていない

// functions.php: 主要リソースの Preconnect を追加
// GTmetrix で外部ドメインが多い場合

add_action('wp_head', function(): void {
    $preconnect_origins = [
        'https://fonts.googleapis.com',
        'https://fonts.gstatic.com',
        'https://www.googletagmanager.com',
        'https://www.google-analytics.com',
    ];

    foreach ($preconnect_origins as $origin) {
        echo '<link rel="preconnect" href="' . esc_url($origin) . '" crossorigin>' . PHP_EOL;
        echo '<link rel="dns-prefetch" href="' . esc_url($origin) . '">' . PHP_EOL;
    }
}, 1);

ステップ3：LCPを改善する

// functions.php: LCP画像（アイキャッチ）をPreload

add_action('wp_head', function(): void {
    if (!is_singular()) return;

    $thumbnail_id = get_post_thumbnail_id();
    if (!$thumbnail_id) return;

    $src    = wp_get_attachment_image_src($thumbnail_id, 'large');
    $srcset = wp_get_attachment_image_srcset($thumbnail_id, 'large');
    $sizes  = wp_get_attachment_image_sizes($thumbnail_id, 'large');

    if (!$src) return;

    echo '<link rel="preload" as="image"'
        . ' href="' . esc_url($src[0]) . '"'
        . ' imagesrcset="' . esc_attr($srcset) . '"'
        . ' imagesizes="' . esc_attr($sizes) . '"'
        . ' fetchpriority="high">'
        . PHP_EOL;
}, 1);

// アイキャッチに fetchpriority="high" と loading="eager" を追加
add_filter('post_thumbnail_html', function(string $html): string {
    if (!is_singular()) return $html;
    $html = str_replace('loading="lazy"', 'loading="eager"', $html);
    if (!str_contains($html, 'fetchpriority')) {
        $html = str_replace('<img ', '<img fetchpriority="high" ', $html);
    }
    return $html;
});

ステップ4：TTFBを改善する

// TTFB改善: オブジェクトキャッシュを有効化
// wp-config.php

// Redis オブジェクトキャッシュ（Redis Cache プラグイン使用時）
define('WP_REDIS_HOST', '127.0.0.1');
define('WP_REDIS_PORT', 6379);
define('WP_REDIS_DATABASE', 0);

// Memcached（W3 Total Cache 使用時）
// define('MEMCACHE_HOST', '127.0.0.1');

# TTFB をコマンドで計測
curl -s -o /dev/null -w \
    "DNS: %{time_namelookup}s\nConnect: %{time_connect}s\nTTFB: %{time_starttransfer}s\nTotal: %{time_total}s\n" \
    https://example.com/

# PHPの処理時間をプロファイル
wp eval "
\$start = microtime(true);
do_action('wp');
\$end = microtime(true);
echo 'wp hook: ' . round((\$end - \$start) * 1000, 2) . 'ms' . PHP_EOL;
"

# WordPress のスロークエリを有効化（開発環境）
# wp-config.php
# define('SAVEQUERIES', true);

ステップ5：GTmetrixの改善項目を優先度順に対応する

// GTmetrix の典型的な警告と対処

// 1. "Avoid render-blocking resources"
// → style タグを head に inline 化（Critical CSS）
add_action('wp_head', function(): void {
    $critical_css_file = get_template_directory() . '/assets/critical.css';
    if (file_exists($critical_css_file)) {
        echo '<style>' . file_get_contents($critical_css_file) . '</style>';
    }
}, 5);

// 2. "Use efficient cache policy on static assets"
// → .htaccess に Expires ヘッダーを追加（別記事参照）

// 3. "Minify CSS/JavaScript"
// → wp_enqueue_style/script でminifyされたファイルを使用
// → または WP Rocket / Autoptimize でまとめて minify

// 4. "Defer offscreen images" → loading="lazy" を確認
add_filter('wp_lazy_loading_enabled', '__return_true');

// 5. "Properly size images"
add_filter('wp_get_attachment_image_attributes', function(array $attr, $attachment): array {
    // sizes 属性を最適化（必要に応じて調整）
    if (isset($attr['sizes']) && $attr['sizes'] === '100vw') {
        $attr['sizes'] = '(max-width: 768px) 100vw, 800px';
    }
    return $attr;
}, 10, 2);

注意事項

GTmetrixのスコアはテストサーバーの場所や接続速度によって大きく変わります。ユーザーの実際の環境に近い設定でテストしてください
GTmetrixのGrade（A〜F）とGoogle PageSpeed Insightsのスコアは連動していますが、完全には一致しません。実際のユーザー体験はSearch ConsoleのCore Web Vitalsフィールドデータで確認するのが最も正確です
全ての警告を修正しようとすると、かえって開発コストが高くなる場合があります。LCP・TBT・CLSのCore Web Vitals 3指標を優先して改善してください

まとめ

GTmetrixの診断はまずWaterfallチャートでTTFBが長いか・大きなファイルがあるか・外部ドメインが多いかを確認します。LCP改善はアイキャッチのPreloadとfetchpriority="high"、TTFB改善はRedisオブジェクトキャッシュ、TBT改善はスクリプトのdefer/async付与、CLS改善は画像のwidth/height属性付与が主要施策です。Core Web Vitalsの3指標（LCP・TBT・CLS）を優先して対応します。

Post Views: 27