WordPress表示速度を実測改善｜プラグイン5個で何秒縮まるか検証した

// wp-config.php に追記（W3TCを使う場合の推奨設定）
// ※ W3TC のダッシュボードから設定する項目が多いが、
//    wp-config.php で直接制御できる項目もある

// キャッシュの有効化（W3TCが自動追記するが手動でも設定可）
define('WP_CACHE', true);

// デバッグモードを本番で無効化（重要）
define('WP_DEBUG', false);
define('WP_DEBUG_LOG', false);
define('WP_DEBUG_DISPLAY', false);

# .htaccess に追記（Apache環境）
# W3 Total Cache が自動挿入するが、手動でも設定可能

<IfModule mod_expires.c>
  ExpiresActive On

  # 画像ファイル: 1年キャッシュ
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png  "access plus 1 year"
  ExpiresByType image/gif  "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"

  # CSS・JavaScript: 1ヶ月キャッシュ
  ExpiresByType text/css              "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType text/javascript       "access plus 1 month"

  # フォント: 1年キャッシュ
  ExpiresByType font/woff2  "access plus 1 year"
  ExpiresByType font/woff   "access plus 1 year"

  # HTML: キャッシュしない（動的コンテンツのため）
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

# Gzip圧縮（テキストファイルを圧縮して転送量削減）
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

<?php
// functions.php に追記

// 1. 全画像にloading="lazy"を自動付与（WordPress 5.5以降は標準機能だが念のため）
add_filter('wp_lazy_loading_enabled', '__return_true');

// 2. サムネイルにもlazyを付与
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    if (!isset($attr['loading'])) {
        $attr['loading'] = 'lazy';
    }
    return $attr;
}, 10, 3);

// 3. コンテンツ内の<img>にもloading="lazy"を追加
add_filter('the_content', function($content) {
    return str_replace('<img ', '<img loading="lazy" ', $content);
});

// 4. WebP対応: アップロード時にWebPを自動生成（PHP 8.1以降 + GD/Imagick必要）
add_filter('wp_handle_upload', function($file) {
    if (in_array($file['type'], ['image/jpeg', 'image/png'])) {
        $source = $file['file'];
        $dest   = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $source);
        $image  = imagecreatefromstring(file_get_contents($source));
        if ($image) {
            imagewebp($image, $dest, 85); // 品質85
            imagedestroy($image);
        }
    }
    return $file;
});

<?php
// functions.php に追記
// 特定ページ以外でContact Form 7のスクリプトを除外する例

add_action('wp_print_scripts', function() {
    // お問い合わせページのID（自分のサイトに合わせて変更）
    $contact_page_id = 10;

    if (!is_page($contact_page_id)) {
        // Contact Form 7 のCSS/JSを除外
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('wpcf7-recaptcha');
    }
}, 100);

// よく除外されるプラグインのハンドル名一覧
// - 'contact-form-7'        : CF7
// - 'wp-block-library'      : Gutenberg標準スタイル（テーマで対応していれば不要）
// - 'jquery-migrate'        : jQuery移行スクリプト（モダン環境では不要）
// - 'elementor-frontend'    : Elementorが入っているページ以外
// - 'woocommerce'           : ショップページ以外

<?php
// functions.php に追記

// wp-block-library のCSSを除外（テーマが対応している場合）
add_action('wp_enqueue_scripts', function() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('global-styles'); // WordPress 5.9以降
}, 100);

// フロントエンドでブロックエディタUIが不要な場合
// (管理画面の editor.css は別管理なので影響なし)

<?php
// functions.php で手動ミニファイ（小規模サイト向け）
// 通常はプラグインに任せるが、特定ファイルだけ制御したい場合

// インラインCSSの出力時に圧縮する例
add_filter('style_loader_tag', function($tag, $handle) {
    // 特定ハンドルのみ処理
    if ($handle === 'my-custom-style') {
        // CSSのコメントと余分な空白を除去
        $tag = preg_replace('/\/\*.*?\*\//s', '', $tag);
        $tag = preg_replace('/\s+/', ' ', $tag);
    }
    return $tag;
}, 10, 2);

<?php
// wp-config.php に追記（既存の define 群の近くに追加）

// リビジョンの上限を5件に制限（デフォルトは無制限）
define('WP_POST_REVISIONS', 5);

// 自動下書きの間隔を延ばす（デフォルト60秒 → 300秒）
define('AUTOSAVE_INTERVAL', 300);

// ゴミ箱を7日で自動削除（デフォルト30日）
define('EMPTY_TRASH_DAYS', 7);

-- phpMyAdmin やWP-CLIから実行するSQL（バックアップ後に実施）

-- 1. 全リビジョンを削除
DELETE FROM wp_posts WHERE post_type = 'revision';

-- 2. 自動下書きを削除
DELETE FROM wp_posts WHERE post_status = 'auto-draft';

-- 3. ゴミ箱の投稿を削除
DELETE FROM wp_posts WHERE post_status = 'trash';

-- 4. 孤立したpostmetaを削除（投稿が存在しないメタデータ）
DELETE pm FROM wp_postmeta pm
LEFT JOIN wp_posts wp ON wp.ID = pm.post_id
WHERE wp.ID IS NULL;

-- 5. 期限切れトランジェントを削除
DELETE FROM wp_options
WHERE option_name LIKE '_transient_timeout_%'
  AND option_value < UNIX_TIMESTAMP();

DELETE FROM wp_options
WHERE option_name LIKE '_transient_%'
  AND option_name NOT LIKE '_transient_timeout_%'
  AND option_name NOT IN (
    SELECT REPLACE(option_name, '_transient_timeout_', '_transient_')
    FROM wp_options
    WHERE option_name LIKE '_transient_timeout_%'
  );

-- 6. スパムコメントを削除
DELETE FROM wp_comments WHERE comment_approved = 'spam';
DELETE FROM wp_commentmeta WHERE comment_id NOT IN (
    SELECT comment_ID FROM wp_comments
);

-- 実行後にテーブルを最適化（OPTIMIZE TABLE）
OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options, wp_comments;

// Cloudflare Page Rules 設定例（URLパターンとアクション）

// ルール1: WordPress管理画面はキャッシュしない
// URL: example.com/wp-admin/*
// アクション: Cache Level = Bypass

// ルール2: ログインページもキャッシュしない
// URL: example.com/wp-login.php
// アクション: Cache Level = Bypass

// ルール3: 投稿・固定ページは積極的にキャッシュ
// URL: example.com/blog/*
// アクション: Cache Level = Cache Everything
//             Edge Cache TTL = 1 day

<?php
// functions.php に追記
// 静的ファイルのURLをCDNドメインに書き換える

define('CDN_DOMAIN', 'https://cdn.example.com'); // 自分のCDNドメインに変更

add_filter('the_content', 'replace_cdn_urls');
add_filter('widget_text', 'replace_cdn_urls');

function replace_cdn_urls($content) {
    $site_url = get_site_url();
    // 画像・CSS・JSのURLのみ置換（PHPなどの動的ファイルは除く）
    $content = preg_replace(
        '|(' . preg_quote($site_url, '|') . '/wp-content/[^"']+\.(jpg|jpeg|png|gif|webp|css|js|woff2))|i',
        CDN_DOMAIN . '/wp-content/$2',
        $content
    );
    return $content;
}

// wp_enqueue済みのスタイル/スクリプトのURLも置換
add_filter('style_loader_src', function($src) {
    if (strpos($src, get_site_url()) !== false) {
        $src = str_replace(get_site_url(), CDN_DOMAIN, $src);
    }
    return $src;
});

add_filter('script_loader_src', function($src) {
    if (strpos($src, get_site_url()) !== false) {
        $src = str_replace(get_site_url(), CDN_DOMAIN, $src);
    }
    return $src;
});

# curlでHTTPプロトコルバージョンを確認
curl -sI https://example.com | grep -i "HTTP/"
# HTTP/2 200 と表示されればOK

# .htaccessでHTTP/2 Server Pushを設定（Apache 2.4.18以降）
# 重要なCSSを先読みさせることでLCP改善に貢献
<IfModule mod_http2.c>
  H2PushResource /wp-content/themes/swell/style.css
  H2PushResource /wp-content/themes/swell/js/main.js
</IfModule>

/* Google Fontsの読み込みを最適化 */
/* ❌ 従来の方法（レンダリングブロッキング） */
/* <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> */

/* ✅ font-display: swap を明示してFOITを防ぐ */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* ← フォント読み込み中はシステムフォントで表示 */
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
}

/* HTMLの<head>でpreloadする（functions.phpから出力） */
/*
<link rel="preload"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'">
*/

<?php
// functions.php でGoogle Fontsをpreloadする
add_action('wp_head', function() {
    ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
      onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">
    </noscript>
    <?php
}, 1);

<!-- ❌ width/heightなし（CLSの原因） -->
<img src="hero.jpg" alt="ヒーロー画像">

<!-- ✅ width/heightを明示（ブラウザがスペースを事前確保） -->
<img src="hero.jpg" alt="ヒーロー画像" width="1200" height="600">

<!-- ✅ CSSでレスポンシブにしながらも比率を維持 -->
<style>
  img { max-width: 100%; height: auto; }
</style>

<!-- ✅ aspect-ratio を使う方法（CSSのみ） -->
<style>
  .hero-img {
    width: 100%;
    aspect-ratio: 2 / 1; /* 2:1の比率を保持 */
    object-fit: cover;
  }
</style>
<img src="hero.jpg" alt="ヒーロー画像" class="hero-img">

<?php
// WordPress: 画像にwidth/heightを自動付与（5.5以降は標準）
// 古い環境向けに明示的に有効化
add_filter('wp_lazy_loading_enabled', '__return_true');

// サムネイルにもwidth/heightを付与するフィルタ
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
    if (!isset($attr['width']) || !isset($attr['height'])) {
        $meta = wp_get_attachment_metadata($attachment->ID);
        if (!empty($meta['width']) && !empty($meta['height'])) {
            $attr['width']  = $meta['width'];
            $attr['height'] = $meta['height'];
        }
    }
    return $attr;
}, 10, 2);

// PHP バージョン確認（wp-config.php や info.php で確認）
// 管理画面 → ツール → サイトヘルスでも確認可能

// PHP 8.2のJIT設定を有効化したい場合（php.ini）
opcache.enable=1
opcache.jit_buffer_size=256M
opcache.jit=1235

// ※ 共有レンタルサーバーではphp.iniの変更が制限される場合がある
//   エックスサーバーはサーバーパネルからPHPバージョンを変更可能

# WP-CLIのインストール（SSHで接続後）
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

# バージョン確認
wp --version

# ─── 速度改善に使うコマンド ────────────────────────────────

# キャッシュをクリア（W3 Total Cache）
wp w3-total-cache flush all

# キャッシュをクリア（WP Fastest Cache）
wp eval 'wpfc_clear_all_cache();'

# リビジョンを一括削除
wp post delete $(wp post list --post_type='revision' --format=ids) --force

# 自動下書きを一括削除
wp post delete $(wp post list --post_status='auto-draft' --format=ids) --force

# 期限切れトランジェントを削除
wp transient delete --expired

# DBを最適化
wp db optimize

# 不要プラグインを一括無効化
wp plugin deactivate contact-form-7 woocommerce

# プラグイン・テーマを一括更新
wp plugin update --all
wp theme update --all

# WordPress本体をアップデート
wp core update
wp core update-db

# crontabに追加（毎週日曜1:00に実行）
0 1 * * 0 cd /home/username/public_html && wp transient delete --expired --path=/home/username/public_html --quiet && wp db optimize --path=/home/username/public_html --quiet

# エックスサーバーのcronはサーバーパネルから設定
# 「Cronジョブ設定」→ コマンドを追加

# Lighthouse CLIをCI/CDに組み込む例（GitHub Actions）
# .github/workflows/lighthouse.yml

# name: Lighthouse CI
# on: [push]
# jobs:
#   lighthouse:
#     runs-on: ubuntu-latest
#     steps:
#       - uses: actions/checkout@v4
#       - name: Run Lighthouse
#         uses: treosh/lighthouse-ci-action@v11
#         with:
#           urls: |
#             https://yoursite.com/
#             https://yoursite.com/blog/
#           budgetPath: ./budget.json
#           uploadArtifacts: true

# budget.json（スコア下限を設定）
# {
#   "performance": 80,
#   "accessibility": 90,
#   "best-practices": 90,
#   "seo": 90
# }