Springfalfal

【WordPress】サイト表示速度を高速化するアセットの読み込み方

WordPressサイトの

表示速度高速化（パフォーマンス最適化）と、

アセット（CSS/JS）の適切な条件分岐読み込み

を徹底して行うための、非常に実戦的な記述をまとめました。

当サイトのfunctions.phpをもとに解説します。

機能別に分かりやすくブロックに分けてまとめました。

1. アセット（CSS・JS）のスマートな読み込みと条件分岐

共通アセットの読み込みと依存関係の整理

function my_enqueue_scripts()
{
 // 管理画面なら実行しない
  if (is_admin()) {
    return;
  }

  // 全ページ共通読み込み
  wp_enqueue_style('reset', get_theme_file_uri('/assets/css/destyle.min.css'), array(), null, 'all');
  wp_enqueue_style('font-awesome', get_theme_file_uri('/assets/fonts/all.min.css'), array(), null, 'all');
  wp_enqueue_style('googlefonts', get_theme_file_uri('/assets/fonts/fonts.min.css'), array(), null, 'all');
  wp_enqueue_style('my-style', get_theme_file_uri('/assets/css/app.min.css'), array('reset', 'font-awesome', 'googlefonts'), filemtime(get_theme_file_path('/assets/css/app.min.css')), 'all');

  wp_enqueue_script('my-script', get_theme_file_uri('/assets/js/app.js'), array('jquery'), filemtime(get_theme_file_path('/assets/js/app.js')), true);

  // トップページならslickを読み込む
  if (is_home() || is_front_page()) {
    wp_enqueue_style('slick-style', get_theme_file_uri('/assets/slick/slick.min.css'), array('reset'), null, 'all');
    wp_enqueue_style('slick-theme', get_theme_file_uri('/assets/slick/slick-theme.min.css'), array('slick-style'), null, 'all');
    wp_enqueue_script('slick', get_theme_file_uri('/assets/slick/slick.min.js'), array('jquery'), '1.8.1', true);
    wp_enqueue_script('my-slick', get_theme_file_uri('/assets/js/slick.js'), array('slick'), filemtime(get_theme_file_path('/assets/js/slick.js')), true);
  }
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

サイト全体で使用するリセットCSS、フォント、メインのCSS・JSを読み込んでいます。

  • 依存関係のコントロール: メインCSS（app.min.css）が読み込まれる前に、必ず『リセット』『Font Awesome』『Google Fonts』が先に読み込まれるよう、array('reset', ...) で厳密に制御しています。
  • キャッシュ対策（バージョン自動更新）: メインCSSとJSのバージョン指定に filemtime() を使用しています。これにより、
    SassのコンパイルやJSの修正でファイルが更新された瞬間にブラウザのキャッシュが自動でクリアされるため、「修正したのに反映されない」というトラブルを防ぎます。

トップページ限定でスライダー（Slick）を読み込む

is_home() || is_front_page() を使い、

トップページが表示されている時だけ Slick Carousel 関連のファイル（CSS2種、JS2種）を読み込んでいます。

下層ページでの無駄なファイル読み込みをカットし、サイト全体の軽量化に貢献しています。

2. CSSの非同期読み込み（レンダリングブロックの防止）

function style_loader_delay($tag, $handle) {
// 読み込みを遅らせるstyleを指定
  $delay_styles = array(
    'font-awesome',
    'slick-style',
    'slick-theme',
    'googlefonts'
  );

  // 読み込もうとしているstyleに指定したハンドル名が含まれている場合、
  if (in_array($handle, $delay_styles)) {
     // media="all"を"print"に変更し読みまなくていいと騙し、全ての読み込みが完了したら"all"に戻してやっぱ読み込んでねと変更
    return str_replace("media='all'", "media='print' onload =\"this.media = 'all'\"", $tag);
  }

  return $tag;
}
add_filter('style_loader_tag', 'style_loader_delay', 10, 2);

style_loader_delay 関数で行っている以下の処理は、

PageSpeed Insights などのスコア向上に直結する強力な軽量化施策です。

return str_replace("media='all'", "media='print' onload =\"this.media = 'all'\"", $tag);

何をしているか

  • font-awesome、slick-style、slick-theme、googlefonts の4つのCSSに対して、
  • 出力されるHTMLの media='all' を media='print' onload="this.media='all'" に書き換えています。

メリット

  • 通常、CSSの読み込み中はブラウザの画面描画が一時停止（レンダリングブロック）してしまいます。
  • この記述により、最初は「印刷時のみ適用されるCSS」としてブラウザの描画を止めずにバックグラウンドで非同期ダウンロードさせ、
  • 読み込みが完了した瞬間にJavaScript（onload）で通常の media='all' に切り替えています。
  • 画面の初期表示（First Contentful Paint）を劇的に早くする定番の手法です。

3. jQueryの最適化と高速化


// jQueryをフッターで読み込み、defer属性を付与する
add_filter('script_loader_delay', function($tag, $handle) {
    // 対象のハンドル名
    $delay_scripts = array(
      'jquery-core',
      'jquery-migrate'
      );

    // 読み込もうとしているscriptに対象のハンドル名が含まれている場合
    if (in_array($handle, $delay_scripts)) {
        // deferを追加し、かつフッターへ移動（str_replaceで調整）
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

// 既存のヘッダー読み込みjQueryをフッターで読み込む
add_action('wp_enqueue_scripts', function() {

   // 管理画面でない場合に実行
    if (!is_admin()) {
        wp_deregister_script('jquery');
        // 標準のjQueryを登録し直し、第5引数をtrue（footer）にする
        wp_register_script('jquery', includes_url('/js/jquery/jquery.min.js'), array(), null, true);
        wp_enqueue_script('jquery');
    }
});

// jquery-migrateを読み込まないようにする
add_action('wp_default_scripts', function($scripts) {
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        if ($script->deps) {
            // jquery-migrateへの依存関係を削除
            $script->deps = array_diff($script->deps, array('jquery-migrate'));
        }
    }
});

WordPressが標準で読み込むコアのjQueryは、通常ヘッダー（<head>内）で読み込まれ、Webサイトの表示速度を遅くする大きな原因になりがちです。

このコードではそれを3つのアプローチで徹底的に最適化しています。

① 読み込み位置をヘッダーからフッターへ変更

wp_deregister_script('jquery') で一度標準のjQueryの登録を解除し、

改めて wp_register_script を使って第5引数を true に設定して登録し直しています。

これにより、

jQueryが <head> 内ではなく、</body> 直前（フッター）で読み込まれるようになります。

② defer属性（非同期実行）の付与

script_loader_delay フィルターを使用し、出力されるjQueryのスクリプトタグに defer 属性を強制的に付与しています。

これにより、ブラウザはHTMLの解析を止めずにjQueryをダウンロードできるようになります。

③ jquery-migrate の停止（不要なファイルの削減）

古いjQueryプラグインとの互換性を保つための

追加ファイル jquery-migrate.min.js への依存関係を

wp_default_scriptsアクションの中で削除しています。

モダンな環境（最新のSlickや自作スクリプト）であれば基本的には不要なファイルであるため、読み込むファイル数を1つ減らして軽量化しています。

4. 共通する安全設計（管理画面への配慮）

コード内の至る所に以下の記述があります。

if (is_admin()) { return; }
// または
if (!is_admin()) { ... }

WordPressの管理画面（投稿編集画面やカスタマイズ画面など）は、

標準のjQueryがヘッダーにあることや、

jquery-migrate が存在することを前提にシステムが組まれています。

このコードは「管理画面以外（公開サイト側）のときだけ最適化を実行する」というガードを入れて、

管理画面のブロックエディタなどがバグを起こさないよう安全に設計しています。

まとめ

これらのコードはPageSpeed Insightsを用いてレンダリングブロック時間が非常に大きかったため、追加したコードです。

一度自身のサイトをPageSpeed Insightsでパフォーマンス測定をしてみてください。

レンダリングブロック時間に改善の余地がある場合、

上記のコードを参考にサイト表示速度がどれくらい変わるか試してみてください。

また、HTMLサイトのWordPress化基本マニュアルも用意しているので、ぜひチェックしてください。

学習記録一覧へ

Automation

関連記事