【WordPress】CSSのpreloadを実装して表示の高速化-非同期読み込み

こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。

この記事では「WordPressサイトでCSS読み込みに非同期読み込みのpreloadを実装して表示を速くする」方法について掲載します。

script版はこちらです。
【WordPress】javascriptをdefer（遅延）読み込みさせて表示を速くする

簡単にWordPressを手軽に構築するならカラフルボックス※広告

カラフルボックスはオールインワンの超快速レンタルサーバー。

まずはWordPressで公開してみたい！という方におすすめです。

CSSにpreload属性を追加する

先に記述方法から書いていきます。

PHPの記述

functions.phpに書きます。

/**
 * themeEnqueueStyle_Js
 * CSSとJSの読み込み
 */
function themeEnqueueStyle_Js() {
    $template = get_template_directory_uri();
    // JS
    // loadCss preload非対応ブラウザ用
	wp_register_script('loadcss', $template . '/js/loadcss.js');
	wp_enqueue_script('loadcss');
}
add_action('wp_enqueue_scripts', 'themeEnqueueStyle_Js');
/**
 * styleLoader
 * CSSにpreload属性を追加、未対応ブラウザの対応
 */
function styleLoader($tag, $handle, $href, $media) {
	if (is_admin()) {
		return $tag;
	}
        // 親テーマは先に読み込まないと見た目が崩れるためperloadしない
	if (in_array( $handle, ['parent-style'])) {
		return $tag;
	}
	// preload属性を追加
	$html = <<<'HTML'
		<link rel="preload" href="%1$s" as="style" onload="this.onload=null;this.rel='stylesheet'" data-handle="%3$s" media="%4$s" />
		<noscript>%2$s</noscript>
HTML;
	return sprintf( $html, $href, $tag, $handle, $media );
}
add_filter('style_loader_tag', 'styleLoader', 10, 4);

CSSにpreloadをつけること自体はjavascriptで後付け可能です。できますが、表示を速くするのに描画時onload javascript実行では意味がありません。PHP、サーバー側で処理させます。

style_loadar_tagにフィルターフックをかけて、実行時にCSSのタグを書き換えています。このときに「rel=”preload”」をつけています。またpreload未対応ブラウザ（2021年2月時点では主にFireFox）でも読み込みに問題が起きないように「onload=”this.onload=null;this.rel=’stylesheet'”」をつけています。

管理画面のときはpreload属性は特につけないようにしています。高速化する理由がないためです。管理画面もやってみたい人はやってみていいかも？

親テーマCSSは先に読み込んでおく方が吉です。いくら表示を速くしたいと言ってもメインの装飾が読み込まれていないと一瞬白くなりますね。画面がちらつくようにも感じますし、見ていて綺麗なものではありません。
もし親テーマCSSにpreloadをつけないことでとても遅くなるなら、それはCSSそのものやテーマ構造を見直した方が良いと思います。