応用編: パフォーマンス最適化 - WordPressオリジナルテーマ作成

なぜパフォーマンスが重要か？

サイトの表示速度は、ユーザー体験とSEOに直接影響します。

💡 表示速度の影響

ユーザー体験: 3秒以上かかると53%がサイトを離脱
SEO: Googleはページ速度をランキング要因に
コンバージョン: 読み込み時間が1秒遅れるごとに7%低下
モバイル: モバイルユーザーは特に速度に敏感

画像の最適化

画像はページサイズの大半を占めるため、最優先で最適化すべきです。

1. 適切なフォーマットの選択

WebP: JPEGより25-35%小さい（推奨）
JPEG: 写真に最適
PNG: 透過が必要な場合
SVG: ロゴやアイコン

2. レスポンシブ画像の実装

HTML<img src="image.jpg" 
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="説明">

3. 遅延読み込み（Lazy Loading）

HTML<img src="image.jpg" loading="lazy" alt="説明">

functions.php（全画像に自動適用）function mytheme_add_lazy_loading($content) {
    return str_replace('<img', '<img loading="lazy"', $content);
}
add_filter('the_content', 'mytheme_add_lazy_loading');

CSS/JavaScriptの最適化

1. CSSの最小化と結合

functions.phpfunction mytheme_enqueue_scripts() {
    // 複数のCSSを1つに結合（本番環境のみ）
    if (!is_admin()) {
        wp_enqueue_style(
            'mytheme-combined',
            get_template_directory_uri() . '/css/combined.min.css',
            array(),
            '1.0.0'
        );
    }
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

2. 不要なスクリプトの削除

functions.php// jQuery Migrateを削除（不要な場合）
function mytheme_remove_jquery_migrate($scripts) {
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        if ($script->deps) {
            $script->deps = array_diff($script->deps, array('jquery-migrate'));
        }
    }
}
add_action('wp_default_scripts', 'mytheme_remove_jquery_migrate');

// 絵文字スクリプトを削除
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

3. クリティカルCSSの実装

header.php<style>
/* Above-the-fold（初期表示に必要な）スタイルのみ */
body { margin: 0; font-family: sans-serif; }
.header { background: #fff; padding: 1rem; }
.main-content { max-width: 1200px; margin: 0 auto; }
</style>

<!-- メインCSSは非同期読み込み -->
<link rel="preload" href="<?php echo get_stylesheet_uri(); ?>" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"></noscript>

データベースクエリの最適化

1. 不要なクエリを避ける

悪い例<?php
// ループ内でget_post_meta()を呼ぶ（遅い）
while (have_posts()) : the_post();
    $price = get_post_meta(get_the_ID(), 'price', true);
endwhile;
?>

良い例<?php
// update_post_caches()でメタデータを一括取得（速い）
$posts = get_posts(array('numberposts' => 10));
update_post_caches($posts);

foreach ($posts as $post) {
    $price = get_post_meta($post->ID, 'price', true);
}
?>

2. トランジェントAPIでキャッシュ

functions.phpfunction mytheme_get_popular_posts() {
    // キャッシュをチェック
    $popular_posts = get_transient('mytheme_popular_posts');
    
    if (false === $popular_posts) {
        // キャッシュがない場合のみクエリ実行
        $args = array(
            'posts_per_page' => 5,
            'meta_key' => 'post_views',
            'orderby' => 'meta_value_num',
            'order' => 'DESC',
        );
        $popular_posts = get_posts($args);
        
        // 1時間キャッシュ
        set_transient('mytheme_popular_posts', $popular_posts, HOUR_IN_SECONDS);
    }
    
    return $popular_posts;
}

キャッシュプラグインの活用

💡 推奨キャッシュプラグイン

WP Super Cache: シンプルで軽量
W3 Total Cache: 高機能
WP Rocket: 有料だが最強（設定不要）
LiteSpeed Cache: LiteSpeedサーバー専用

キャッシュプラグインなしでの対応

.htaccess（Apache）# ブラウザキャッシュの設定
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>

# Gzip圧縮
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript
</IfModule>

CDNの利用

💡 CDNのメリット

世界中のサーバーから配信（高速化）
サーバー負荷の軽減
DDoS攻撃からの保護
帯域幅の節約

Cloudflare（無料）の設定例

手順1. Cloudflareアカウント作成
2. サイトを追加
3. DNSレコードをCloudflareに変更
4. 自動最適化を有効化
   - Auto Minify（CSS/JS/HTML）
   - Brotli圧縮
   - 画像最適化

フォントの最適化

1. フォントの読み込み最適化

header.php<!-- Google Fontsのプリコネクト -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- フォントの非同期読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" 
      rel="stylesheet" media="print" onload="this.media='all'">

2. システムフォントの利用

style.cssbody {
    font-family: -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", "Noto Sans JP", 
                 "Hiragino Kaku Gothic ProN", 
                 sans-serif;
}

WordPressコアの最適化

functions.php// リビジョンの数を制限
define('WP_POST_REVISIONS', 3);

// 自動保存の間隔を延長（秒）
define('AUTOSAVE_INTERVAL', 300);

// ゴミ箱の自動削除日数
define('EMPTY_TRASH_DAYS', 7);

// Hearbeat APIの最適化（管理画面のAjax通信）
function mytheme_heartbeat_settings($settings) {
    $settings['interval'] = 60; // デフォルト15秒→60秒
    return $settings;
}
add_filter('heartbeat_settings', 'mytheme_heartbeat_settings');

パフォーマンス測定ツール

推奨ツール

Google PageSpeed Insights: 総合評価
GTmetrix: 詳細な分析
WebPageTest: 多地点からの測定
Chrome DevTools: リアルタイム分析
Query Monitor: WordPressプラグイン（DB確認）

最適化チェックリスト

画像

WebP形式を使用
画像を圧縮（TinyPNG等）
レスポンシブ画像を実装
Lazy Loadingを有効化

CSS/JavaScript

ファイルを最小化（minify）
不要なスクリプトを削除
クリティカルCSSを実装
非同期読み込みを活用

サーバー/キャッシュ

キャッシュプラグイン導入
CDNを利用
Gzip圧縮を有効化
ブラウザキャッシュ設定

データベース

不要なクエリを削減
トランジェントでキャッシュ
リビジョンを制限
定期的にDB最適化

まとめ

パフォーマンス最適化により、以下の効果が得られます：

✅ ページ表示速度の向上
✅ SEOランキングの改善
✅ ユーザー体験の向上
✅ サーバー負荷の軽減

🚀 次のステップ

パフォーマンスを最適化したら、多言語対応を学んで、グローバルなサイトを構築しましょう。

⚡ パフォーマンス最適化

なぜパフォーマンスが重要か？

💡 表示速度の影響

画像の最適化

1. 適切なフォーマットの選択

2. レスポンシブ画像の実装

3. 遅延読み込み（Lazy Loading）

CSS/JavaScriptの最適化

1. CSSの最小化と結合

2. 不要なスクリプトの削除

3. クリティカルCSSの実装

データベースクエリの最適化

1. 不要なクエリを避ける

2. トランジェントAPIでキャッシュ

キャッシュプラグインの活用

💡 推奨キャッシュプラグイン

キャッシュプラグインなしでの対応

CDNの利用

💡 CDNのメリット

Cloudflare（無料）の設定例

フォントの最適化

1. フォントの読み込み最適化

2. システムフォントの利用

WordPressコアの最適化

パフォーマンス測定ツール

推奨ツール

最適化チェックリスト

画像

CSS/JavaScript

サーバー/キャッシュ

データベース

まとめ

🚀 次のステップ