WordPressでレンダリングブロックCSSを排除する方法

自作しているWordPressテーマを改善しようと、レンダリングブロックしているCSSとjavaScriptの排除に取り組んだところPageSpeed Insightsで高得点を出すことに成功しました。

タイミングや検証する記事によって点数は変わりますが、トップページで99点、記事ページでも最高99点という結果に。

トップページの点数

記事ページの点数

これはモバイル用の点数でパソコン用だと若干点数は低くなりますが、アナリティクスやらアドセンスはそのままなので、なかなか良い点数ではないでしょうか。

どんな対策をしたらレンダリングブロックが0になったのか、その方法をCSSとJavaScriptにわけて具体的に解説してみたいと思います。

今回は「CSS編」です。

1
ファーストビューに必要なCSSを圧縮してhead内にインラインで読み込み
2
外部CSSをpreloadで非同期に読み込み
3
CDNに対応していないCSSもインライン化
4
親テーマ（子テーマ）のスタイルシートをbody閉じタグ直前で読み込み
5
プラグインが読み込んでいるCSS対策
6
まとめ

ファーストビューに必要なCSSを圧縮してhead内にインラインで読み込み

基本的な対策になりますが、ファーストビュー（最初に表示される画面）に必要なCSSをインラインで読み込みました。

どれがファーストビューに必要なCSSか調べるツールもありますが、オリジナルテーマの場合は必要なCSSが使用者によって変わるので、コメント欄や関連記事、フッターやスライドメニューなどの「ほぼファーストビューに不要なCSS」を除き、ほぼすべてのCSSをインライン化しています。

（ここら辺、かなりシビアにやると逆に画面がカクつく原因にもなるのでほどほどに）

ただ、インライン化するCSSが多い場合は圧縮したもの（改行、スペース、コメントなどを取り除いたもの）を読み込んだ方がいいです。

専用の圧縮ツールを活用してもいいですが、コードエディタの拡張機能が初心者向けかもしれません。

例えば、僕が愛用しているBracketsでは「JS CSS Minifier」という拡張機能があり、これをインストールするとCSSファイル（とJSファイル）を保存したタイミングで自動で圧縮ファイルを生成してくれます。（2回目以降は上書き）

ですので、編集は通常のスタイルシート、読み込みは圧縮したファイル…とわければメンテナンス性そのままにサイズダウンを図れます。

サンプルコード

色々やり方はありますが、自作テーマの「4536」ではfunctions.phpに以下のようなコードを記述してインライン化しています。

add_action( 'wp_head', function() { //head内にインラインCSSを出力 ?>
<style>
<?php
require_once('css/inline-style.min.css');
if(!is_mobile()) require_once('css/only-pc.min.css');
?>
</style>
<?php });

外部CSSをpreloadで非同期に読み込み

Googleフォント（WEBフォント）
Font Awesome（アイコンフォント）
highlight.js（シンタックスハイライト）

など、CDNに対応している外部フォントは非同期で読み込みレンダリングブロックをさせないようにしました。

参考全ブラウザ対応！preload で CSS を非同期で読み込み高速化

参考rel=”preload” によるコンテンツの先読み

サンプルコード

こちらがFont AwesomeのCSSを非同期で読み込むサンプルコードです。

<?php
add_action('wp_head', function() {
$font_awesome = '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css';
?>
<link rel="preload" href="<?php echo $font_awesome; ?>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?php echo $font_awesome; ?>"></noscript>
<?php css_rel_preload_js();
});
function css_rel_preload_js() { //多用できるように関数化 ?>
<script>
/* cssrelpreload.jsの中身 */
</script>
<?php }

cssrelpreload.jsの中身はこちらのページにあります。

CDNに対応していないCSSもインライン化

「ICOMOON」のような外部CSSとして読み込めないものもインライン化しました。

アイコンフォント「IcoMoon」をAMPページで使う方法 Fantastech!! もっと見る

やり方は関連記事でご紹介しているのと同じなのでチェックしてみてください。

サンプルコード

add_action( 'wp_head', function() { ?>
<style>
//ここにICOMOON関連のコードを記述
</style>
<?php });

必要に応じて、この記事の前半でご紹介しているhead内にインラインで読み込むコードとまとめてください。

また、ファーストビューに不要なものであればstyle.cssに記述するか、wp_headの部分を「wp_footer」に変えてみるのも効果的です。

親テーマ（子テーマ）のスタイルシートをbody閉じタグ直前で読み込み

見た目に強く影響するCSSをインライン化したので、style.cssはwp_footer関数を使い</body>直前で読み込むようにしました。

子テーマを使っている場合、スタイルシート（style.css）を重複して読み込んでしまうので、それを防ぐのが主な理由です。

wp_enqueue_style関数で読み込む場所や順番などを明確に定義して読み込みますが、親テーマのstyle.cssをpreloadで読み込むと重複して読み込んじゃうんですよね。

何か上手い対策があるのかもしれませんが、</body>直前で読み込んでしまえばどちらにしても最適化されるのでいいかなと。

サンプルコード

親テーマではこのようなコードにしています。

add_action( 'wp_footer', function() {
wp_enqueue_style( 'parent-style-4536', get_template_directory_uri().'/style.min.css' );
});

そして、子テーマのfunctions.phpにはこのように記述しています。

add_action( 'wp_footer', function() {
wp_enqueue_style( 'parent-style-4536', get_template_directory_uri().'/style.min.css' );
wp_enqueue_style( 'child-style-4536', get_stylesheet_directory_uri().'/style.css', ['parent-style-4536'] );
});

プラグインが読み込んでいるCSS対策

これは今回の話に限った話ではなく、そもそも対策が必要なことではありますが、プラグインが読み込むCSSの対策も忘れてはいけません。

Contact Form7（お問い合わせフォームのプラグイン）
Download Manager（ダウンロード機能を実装するプラグイン）

など、その機能を使っていないページも含めてすべてのページで読み込んでしまうので完全に「ムダ」です。

ですので、お問い合わせページ以外ではファイルを読み込まない、ダウンロードページ以外ではファイルを読み込まない…といった条件分岐をするのがベストです。

参考WordPressで不要なページでプラグインが出力しているJSやCSSを無効化して軽量化する方法

先ほどご紹介したpreloadで非同期で読み込めばさらに良くなりますが、ページによってはそこまでする必要もなかったりするので適宜対応してみてください。

サンプルコード

add_action( 'wp_enqueue_scripts', function() {
if(!in_category('download') || is_archive()) { //ダウンロードカテゴリーに属する記事以外では読み込まない
wp_dequeue_style( 'font-awesome' );
wp_dequeue_style( 'wpdm-bootstrap' );
wp_dequeue_style( 'wpdm-front' );
}
if(!is_page('contact')) { //お問い合わせページ以外では読み込まない
wp_dequeue_style( 'contact-form-7' );
}
});