【WordPress】functions.phpの記述でレンダリングブロックリソースを削ってパフォーマンスを向上する方法

2020年8月19日

GoogleのPage Speed Insightsや、ChromeのLighthouseでページのパフォーマンスをチェックした時、「Eliminate render-blocking resources(レンダリングを妨げるリソースの除外)」が出てくることがあります。

ただ、WordPressのサイトだとheadタグ内のjsやcssの出力しかたを調整する方法が分かりにくいです。

という事で、今回はfunctions.phpで調整できる範囲でまとめます。

指定のjsにdeferをつける

scriptタグのお尻に、deferをつけるとレンダリングブロックをせずに済むので、つけます。

実行のタイミングが間に合わないと困る場合や、プラグインの動作に問題が出る場合はdeferを外すといいでしょう。

(jquery-coreにdeferをつけると、プラグインのためのjsの動作がおかしくなってしまうかも)

//指定のjsにdefer(レンダリングブロック防止の記述)をつける。
//jqueryの本体にdeferをつけたいときは、handleは'jquery-core'
function add_defer_script($tag, $handle, $url)
{
    if ('jquery-migrate' === $handle) {
        $tag = '<script src="' . esc_url($url) . '" defer></script>';
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_defer_script', 10, 3);

 

指定のCSSを非同期で読み込む

ブロックエディタ用のCSSを、後読みするソースです。(media="print"で読み込んで、読み込み後にall変える)

その他のCSSもifの指定の中に追加すれば、後読みに変更できます。
非同期読み込みで大丈夫なCSSファイルをかき分けられる場合は、追加しましょう。

//指定のCSSを非同期で読み込む
function load_css_async_top($html, $handle, $href, $media) {
    if ('wp-block-library' === $handle) {
        //元の link 要素の HTML(改行が含まれているようなので前後の空白文字を削除)
        $default_html = trim($html);
        //HTML を変更
        $html = <<<EOT
<link rel="stylesheet" id="{$handle}-css" href="$href" media="print" onload="this.media='all'">
<noscript>{$default_html}</noscript>\n
EOT;
    }
    return $html;
}
add_filter( 'style_loader_tag', 'load_css_async_top', 10, 4 );

 

改善結果

サイト内のリソース(画像)が少な目の場合にはなりますが、
レンダリングブロックリソースを抑えることによってほんの少しパフォーマンスが改善しました!

WordPressでレンダリングブロックリソースが気になる際は、ぜひ試してみてください。

参考

レンダリングを妨げるリソースの除外/CSSを非同期で読み込む