言語(PHP他)PHPHTML/CSSWordPress
投稿日 : 2021年2月13日

【WordPress】CSSの非同期読み込みpreloadを実装して表示を速くする

【WordPress】CSSの非同期読み込みpreloadを実装して表示を速くするの画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして7年~の経験があります。WordPressは2年半~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

この記事では「WordPressサイトでCSS読み込みに非同期読み込みのpreloadを実装して表示を速くする」方法について掲載します。爆速!とまではいきませんが若干早くなる場合があります。

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

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そのものやテーマ構造を見直した方が良いと思います。

loadcss.jsについて

preload属性が効かないブラウザでも問題なく非同期読み込みして表示してくれるライブラリです。

Filament Groupが開発しているとのこと。MITライセンスです。ソースはGitHubに公開されています。

実装した体感

元々とても遅いサイトではないので、実装したからと言ってそこまでの効果は感じられませんでした。それよりも画像の大きさを調整したりなどの方が効果があると思います。
あとは広告などの外部jsを減らすなどが効果的か…と思いますが、それ外したらサイトとして問題になる場合もありますよね。ほどほどに。

ちなみに、エンジニア婦人ノートの場合はヘッダ画像が大きいので、そこが表示速度のネックになっています。でもいいんです、要望通り作成して頂いたお気に入り画像ですから。表示できないわけでもありません。

まとめ

WordPressサイトにCSSの非同期読み込み、preloadを実装しました。preloadが対応していないブラウザでも非同期読み込みを実行するためにはloadcss.jsを使います。

過度な期待は禁物ですが、それなりに速度改善に効果はあります。気になる方はやってみてください。