【サンプルコード有】プラグイン不要でWordPressの自作テーマを高速化！コピペでできる対策4選

2023年9月25日2023年11月16日

WordPressで自作テーマを開発する際、ページ速度の最適化を行っていると、ユーザーエクスペリエンスの向上やSEO対策に繋がります。

この記事では、画像の最適化や調整からキャッシュの活用に至るまで、具体的なコードサンプルを用いて、プラグインなしでページ速度の最適化ができる方法を詳しく解説します！

画像の最適化

カスタム画像サイズの追加

WordPressでは、特定のサイズの画像だけをロードすることが可能です。

こちらの方法を用いれば、ページのロード時間を大幅に削減できます。

add_image_size('custom-thumb', 120, 120, true);

このコードが行うのは、新しい画像サイズcustom-thumbを120×120ピクセルで追加することです。

第四引数のtrueは、このサイズがクロップされるかどうかを制御します。

画像品質の調整

画像品質の調整も、ページ速度の最適化方法の一つです。

JPEG画像の品質を下げれば、ページのロード速度を向上させることができます。

add_filter('jpeg_quality', function() {
    return 75;
});

こちらのコードは、JPEG画像の品質を75に設定するものです。

品質を下げることで、画像のファイルサイズが元より小さくなり、ロード速度が向上します。

スクリプトおよびスタイルの最適化

不要なスクリプトとスタイルの削除

ページ上で使用されないスクリプトとスタイルを削除すると、表示速度が向上します。

function remove_unnecessary_assets() {
    wp_dequeue_script('unnecessary-script');
    wp_dequeue_style('unnecessary-style');
}
add_action('wp_enqueue_scripts', 'remove_unnecessary_assets');

こちらのコードは、キューからunnecessary-scriptとunnecessary-styleを削除するもの。

これにより、ページのロード速度が向上します。

スクリプトとスタイルの効率的な登録とキュー追加

スクリプトとスタイルの読み込み順序を管理することも、ページ速度の最適化に役立ちます。

function enqueue_efficient_assets() {
    wp_register_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0.0', true);
    wp_enqueue_script('my-script');

    wp_register_style('my-style', get_template_directory_uri() . '/css/my-style.css', array(), '1.0.0');
    wp_enqueue_style('my-style');
}
add_action('wp_enqueue_scripts', 'enqueue_efficient_assets');

こちらのコードは、my-script.jsを登録し、jQueryに依存するように指定するものです。

trueに設定することでスクリプトがフッターでロードされるため、ページの読み込み速度が向上します。

キャッシュ関連

キャッシュとは、ブラウザ上で一度計算された結果をフォルダに保存し、再利用する技術のことです。

キャッシュを使用すると、同じ計算を何度も行う必要がなくなるため、ページのロード時間を大幅に短縮することができます。

オブジェクトキャッシュの追加と取得

function my_custom_function() {
    $value = wp_cache_get('my_key');

    if (false === $value) {
        $value = compute_expensive_operation();
        wp_cache_set('my_key', $value, '', 3600);
    }

    return $value;
}

こちらのコードは、my_keyのキャッシュされた値を取得し、存在しない場合は新しい値を計算してキャッシュするように定めたものです。

有効期限が3600秒に設定されているため、1時間後には新しい値が計算されます。