【WordPress】レンダリングをブロックするJavascriptやCSSの読み込みを遅らせる①

1 レンダリングブロックの対策
2 <head>内のjsをフッターに移動させる
- 2.1 実装する方法
- 2.2 注意点
3 <head>内のCSSをフッターに移動させる
- 3.1 実装する方法
- 3.2 注意点

レンダリングブロックの対策

現在はプラグイン「LiteSpeed Cache」を使用していますが、以前はこんな方法でレンダリングをブロックする Javascript や CSS の読み込みを遅らせていました。

rel="preload" で先読みする方法や async・defer 属性を付加する方法（.js）と、function.php でフックを使い </body> の手前に移動させる方法があります。

長くなったので分けました。
rel="preload" で先読みする方法、async・defer 属性を付加する方法はこちらへどうぞ。

<head>内のjsをフッターに移動させる

この方法にはこんなデメリットがあります。

デメリット

読み込む順番によりエラーが出たりすることがある

プラグインを使いたくなかったので、オープンソースのプラグインからコードを拝借しました。こちらの62行目からになります。

参考 Speed Up – JavaScript To FooterWordPress.org

実装する方法

以下を子テーマのfunction.phpに追記するだけです。

function.php

function move_scripts_to_foot(){
  // ヘッダーのスクリプトをキャンセルする
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  // フッターで読み込む
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_to_foot' );

注意点

テーマやプラグインが<head>内にscriptを出力するアクションをキャンセルし、</body> 直前（wp_footerが読み込まれる位置）にそのアクションを移動して読み込ませています。そのため、テーマのファイル（header.phpなど）に直接書かれたものは移動できません。

また、この移動対象のスクリプトファイルを使用するプラグインやスクリプトが動かなくなることがありますので、不具合やエラーが出た場合は function.php を元の状態に戻してください。

<head>内のCSSをフッターに移動させる

この方法にはこんなデメリットがあります。

デメリット

CSSを<body>内で読み込むのは文法違反ではなくなったが、一度レンダリングされた要素にスタイルを再適用するため、サイト全体の読み込みは逆に遅くなるかも

こちらもやっていることは上の Javascript を移動させる方法と同じで、<head> 内で読み込まれる CSS をキャンセルして、フッターで読み込んでいます。

実装する方法

移動させたいCSSファイルのid属性を調べる

適当なページのソースを表示させて、移動させたい CSS を読み込んでいる部分を探してください。ほとんどの場合は <head> 内にあると思います。
例えば、SANGOのFontAwesomeのCSSファイルだとこんな感じです。

html

<link rel="stylesheet" id="sng-fontawesome-css" href="サイトのURL/wp-content/themes/sango-theme/library/fontawesome/css/font-awesome.min.css" type="text/css" media="all">

この id="sng-fontawesome-css" という部分を見てください。

id名「sng-fontawesome-css」から最後の「-css」を抜いた部分が各CSSの識別子のようなもので、これを使って移動させるものを指定していきます。
この例だと「sng-fontawesome」になります。（※実際にこの CSS を移動させると、SANGO ではアイコンが表示されなくなりますのでご注意ください）

調べたidを記述する

調べたidを各（' '）内に記述していきます。
下記は先ほどの FontAwesome とメジャーなプラグインのidを入れた例となっていますので、各自移動させたいもののidに書き換えてください。（同様に書き加えていけば、移動させるCSSをいくつでも追加できます）

function.php

// ヘッダーのCSSをキャンセルする
function dequeue_header_css() {
  wp_dequeue_style('sng-fontawesome');
  wp_dequeue_style('contact-form-7');
  wp_dequeue_style('wordpress-popular-posts-css');
}
add_action('wp_enqueue_scripts', 'dequeue_header_css', 9999);

//フッターで読み込む
function enqueue_footer_css(){
  wp_enqueue_style('sng-fontawesome');
  wp_enqueue_style('contact-form-7');
  wp_enqueue_style('wordpress-popular-posts-css');
}
add_action('wp_footer', 'enqueue_footer_css');