2026年5月20日

WordPressの表示速度を改善する方法

SEO・パフォーマンス

はじめに

WordPressサイトのGoogle PageSpeed Insightsスコアが30点台で「改善が必要」と判定される・ページの読み込みに3秒以上かかっており直帰率が上昇している・Core Web VitalsのLCP（最大コンテンツの描画）やCLS（累積レイアウトシフト）が基準値を超えている・サーバーのTTFBが500ms以上かかっているといった問題は、未最適化の画像・JavaScriptのブロッキング・不要なプラグイン・サーバーリソース不足が原因です。

症状・原因

Google PageSpeed InsightsやGTmetrixで「レンダリングを妨げるリソースを排除する」と指摘される
LCP（最大コンテンツ描画）が2.5秒を超えている
ページ内で使われていないCSSやJavaScriptが大量に読み込まれている
データベースのクエリが遅くTTFBが改善されない

解決手順

ステップ1：現在のパフォーマンスを診断する

# WP-CLIでデータベースのクエリ状況を確認
wp eval "
global \$wpdb;
\$wpdb->show_errors();
// スロークエリを検出
\$slow_queries = \$wpdb->get_results(
    'SELECT * FROM information_schema.PROCESSLIST WHERE TIME > 1 ORDER BY TIME DESC',
    ARRAY_A
);
foreach (\$slow_queries as \$q) {
    echo sprintf('Time: %ds | %s' . PHP_EOL, \$q['TIME'], substr(\$q['INFO'], 0, 100));
}
"

# 不要なTransientをカウント
wp eval "
global \$wpdb;
\$count = \$wpdb->get_var(
    \"SELECT COUNT(*) FROM {\$wpdb->options}
     WHERE option_name LIKE '_transient_%'
     OR option_name LIKE '_site_transient_%'\"
);
echo 'Transient count: ' . \$count . PHP_EOL;
"

# データベースのサイズを確認
wp db size --tables --format=table | head -20

ステップ2：データベースとサーバーを最適化する

# データベースを最適化
wp db optimize

# 不要なデータを削除
wp post delete $(wp post list --post_type=revision --format=ids) --force
wp eval "wp_delete_expired_transients();"
wp transient delete --all

# 投稿リビジョンを制限（wp-config.phpに追加）
# define('WP_POST_REVISIONS', 5);

// wp-config.php: パフォーマンス設定
define('WP_POST_REVISIONS', 5);          // リビジョン数を制限
define('EMPTY_TRASH_DAYS', 7);           // ゴミ箱を7日で自動削除
define('WP_MEMORY_LIMIT', '256M');

// オブジェクトキャッシュを設定（Redis/Memcached）
// define('WP_REDIS_HOST', '127.0.0.1');
// define('WP_REDIS_PORT', 6379);

ステップ3：フロントエンドリソースを最適化する

// functions.php: JavaScriptとCSSの最適化

// ① 不要なWordPressリソースを削除
add_action('wp_enqueue_scripts', function(): void {
    // 絵文字スクリプトを削除
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');

    // Gutenbergブロックスタイルを削除（クラシックテーマの場合）
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('global-styles');

    // jQueryをフッターに移動
    wp_deregister_script('jquery');
    wp_register_script('jquery', includes_url('/js/jquery/jquery.min.js'), [], '3.7.1', true);
    wp_enqueue_script('jquery');
}, 100);

// ② スクリプトにdeferとasyncを追加
add_filter('script_loader_tag', function(string $tag, string $handle): string {
    $defer_scripts = ['my-plugin-script', 'google-analytics'];
    if (in_array($handle, $defer_scripts, true)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

// ③ 重要なCSSをインライン化（クリティカルCSS）
add_action('wp_head', function(): void {
    if (is_front_page()) {
        $critical_css = get_theme_file_path('assets/css/critical.css');
        if (file_exists($critical_css)) {
            echo '<style>' . file_get_contents($critical_css) . '</style>';
        }
    }
}, 1);

ステップ4：画像とメディアを最適化する

// functions.php: 画像最適化設定

// ① 画像の遅延読み込みを強化
add_filter('wp_lazy_loading_enabled', '__return_true');

add_filter('wp_get_attachment_image_attributes', function(array $attr, WP_Post $attachment): array {
    if (!isset($attr['loading'])) {
        $attr['loading'] = 'lazy';
    }
    // サイズヒントを追加（CLSを防ぐ）
    if (isset($attr['width']) && isset($attr['height'])) {
        $attr['decoding'] = 'async';
    }
    return $attr;
}, 10, 2);

// ② ヒーロー画像をpreloadで先読み
add_action('wp_head', function(): void {
    if (is_front_page()) {
        $hero_image = get_theme_mod('hero_image_url');
        if ($hero_image) {
            printf(
                '<link rel="preload" as="image" href="%s" fetchpriority="high">%s',
                esc_url($hero_image),
                PHP_EOL
            );
        }
    }
}, 1);

// ③ WebP対応画像を自動配信
add_filter('wp_calculate_image_srcset', function(array $sources): array {
    foreach ($sources as &$source) {
        $webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $source['url']);
        if (@getimagesize($webp) !== false) {
            $source['url'] = $webp;
        }
    }
    return $sources;
});

ステップ5：Core Web Vitalsを改善する

// functions.php: Core Web Vitals最適化

// ① LCP改善：フォントのプリロード
add_action('wp_head', function(): void {
    $fonts = [
        get_theme_file_uri('assets/fonts/main-font.woff2'),
    ];
    foreach ($fonts as $font) {
        printf(
            '<link rel="preload" as="font" type="font/woff2" href="%s" crossorigin>%s',
            esc_url($font),
            PHP_EOL
        );
    }
}, 1);

// ② CLS改善：画像とアドにwidth/heightを自動追加
add_filter('the_content', function(string $content): string {
    return preg_replace_callback(
        '/<img([^>]+)>/i',
        function(array $m): string {
            if (!str_contains($m[1], 'width=') && preg_match('/src=["\']([^"\']+)["\']/i', $m[1], $src)) {
                $size = @getimagesize($src[1]);
                if ($size) {
                    return '<img' . $m[1] . ' width="' . $size[0] . '" height="' . $size[1] . '">';
                }
            }
            return $m[0];
        },
        $content
    );
});

// ③ FID/INP改善：重いJSを分割して遅延実行
add_action('wp_footer', function(): void {
    ?>
    <script>
    // requestIdleCallbackで重い処理を遅延実行
    if ('requestIdleCallback' in window) {
        requestIdleCallback(function() {
            // 重い初期化処理をここに
        }, {timeout: 2000});
    }
    </script>
    <?php
}, 100);

注意事項

wp-block-libraryスタイルを削除するとGutenbergブロックのスタイルが適用されなくなります。クラシックエディターのみを使用しているサイト、またはブロックエディターのスタイルをカスタムCSSで上書きしている場合のみ削除してください
JavaScriptにdefer属性を追加するとDOMContentLoadedイベント前にスクリプトが実行されなくなります。他のスクリプトに依存しているスクリプト（jQueryに依存するプラグインなど）には順番に注意が必要です
Core Web VitalsのLCPスコアを改善する最も効果的な方法は、LCP要素（ヒーロー画像など）をfetchpriority="high"で優先読み込みすることと、サーバーのTTFBを200ms以下に抑えることです

まとめ

WordPress表示速度改善は①wp db sizeでDBサイズ確認・スロークエリ検出・Transientカウントで問題の特定、②wp db optimizeでDB最適化・wp post deleteでリビジョン削除・WP_POST_REVISIONS=5で今後のリビジョンを制限、③絵文字スクリプト削除・wp-block-libraryスタイル削除・jQueryをフッターに移動・defer属性追加・クリティカルCSSのインライン化、④wp_lazy_loading_enabledで遅延読み込み有効化・ヒーロー画像のpreload・fetchpriority="high"・WebP自動配信、⑤フォントのpreload・画像にwidth/height自動付与でCLS防止・requestIdleCallbackで重い処理を遅延実行の手順で解決します。

Post Views: 17