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

CSS は、レンダリングをブロックします。

サイトを高速にするためには、重要ではない CSS を非同期で読み込むことが重要。

一般的には javascript を使い非同期で読み込みますが、もう 1 つ方法があります。

それは HTML に記述するだけの <link rel="preload"> での読み込み。

現在 Chrome しか対応していませんが、 loadCSS を使うことで全ブラウザに対応できます。

多くの海外サイトが使用している loadCSS を使い、サイトを高速化されてはいかがでしょうか。

<link rel="preload"> って何？と思われた方は、 rel=”preload” によるコンテンツの先読み、または Preload — 事前読み込みをご参考ください。

全ブラウザ対応の loadCSS

loadCSS は、 Filament Group が開発した javascript ライブラリです。

通常 <link rel="preload"> に対応していないブラウザでは、例え記述をしても CSS は非同期で読み込まれません。

それに対し loadCSS は、対応していないブラウザでも CSS を非同期で読み込みます。

仕組みは、まずブラウザが <link rel="preload"> に対応しているかを判定。

対応していれば、何もしません。

対応していなければ、一時的に media 属性を操作し回避方法を適用。そして、 CSS を動的に非同期で読み込みます。

これによりブラウザ対応を気にせず、 <link rel="preload"> を使えるようになります。

<link rel="preload"> は、執筆時点で Chrome しか対応していません。

Can I use… : preload

主要ブラウザは対応予定ですが、開発が停止された IE は対応しません。 IE のシェアが約 25% と高い日本では、これからも <link rel="preload"> を使いにくいのが現状です。

しかし、 loadCSS を使うことで、今すぐにでも CSS を非同期で読み込めます。

loadCSS の使い方

loadCSS の使い方は、非常に簡単です。

サーバーに設置した example.css というスタイルシートを読み込む例として説明します。 javascript ライブラリを使う時に、よくあるパターン。

通常は、 <head> タグに下記のように記述します。

<link rel="stylesheet" href="example.css">

一方、 loadCSS を使う場合には、まず下記のように <head> タグに記述します。

<link rel="preload" href="example.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="example.css"></noscript>

次に、上記の HTML の下に cssrelpreload.js をまるっとコピペします。

そのまま貼り付けると <head> タグ内が汚くなるので、 Online JavaScript/CSS/HTML Compressor などで縮小してから貼り付けます。

<link rel="preload" href="example.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="example.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>

5 行目に縮小した cssrelpreload.js を貼り付けます。

これで終わり。すごく簡単。

これだけで CSS がレンダリングをブロックしなくなり、サイトが速くなります。

複数の <link rel="preload"> がある場合には、それぞれの後ろに cssrelpreload.js を付けると最高の結果を得られるとのこと。

詳しい使い方や説明は、 GitHub 内でご確認ください。

プラグインの CSS に適用

WordPress をお使いであれば、プラグインの CSS も loadCSS で読み込むとサイトが高速化します。

多くの WordPress サイトが使っている Contact Form 7 を例にあげます。

id が 10 の固定ページに、 Contact Form 7 でお問い合わせページを作っているとします。

まず子テーマの functions.php に、以下のコードを追加。

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'contact-form-7' );
    if( is_page( 10 ) === false ) {
        wp_dequeue_script( 'contact-form-7' );
    }
});

Contact Form 7 のスタイルシートの読み込みを全ページで停止し、スクリプトはお問い合わせページ以外では読み込まない内容です。

wp_dequeue_style で指定する contact-form-7 のハンドル名は、プラグインのスタイルシートの <link> タグの id から -css を除いたものです。

次に <head> タグを呼び出している、または <head> タグにコードを追加するテンプレートに、以下のコードを追加します。 Simplicity をお使いであれば、子テーマの header-insert.php に追加。

<?php 
if( is_page( 10 ) === true ) {
?>
<link rel="preload" href="/wp-content/plugins/contact-form-7/includes/css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/plugins/contact-form-7/includes/css/styles.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>
<?php
}
?>

8 行目に縮小した cssrelpreload.js を貼り付けます。

お問い合わせページでのみ、 Contact Form 7 のスタイルシートを loadCSS を使って非同期で読み込んでいます。

ほとんどのプラグインの CSS は、非同期で読み込んでも問題ありません。あらゆるプラグインに適用したいところです。

テーマの CSS に適用

お使いのテーマの CSS も、 loadCSS を使い非同期で読み込めます。

このサイトで使っている Simplicity は、複数のスタイルシートを読み込みます。そのうち、親テーマの responsive.css 、 narrow.css 、 media.css を非同期で読み込んでみます。

まず子テーマの functions.php に以下のコードを追加し、 3 つのスタイルシートの読み込みを停止します。

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( array( 'responsive-mode-style', 'narrow-style', 'media-style' ) );
});

次に <head> タグに以下の HTML を追加します。

<link rel="preload" href="/wp-content/themes/simplicity2/responsive.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/themes/simplicity2/responsive.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>
<link rel="preload" href="/wp-content/themes/simplicity2/css/narrow.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/themes/simplicity2/css/narrow.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>
<link rel="preload" href="/wp-content/themes/simplicity2/css/media.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/themes/simplicity2/css/media.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>

これで 3 つのスタイルシートが非同期で読み込まれ、レンダリングをブロックしなくなります。

<head> タグ内をきれいにしたい場合には、 1 つのスタイルシートにまとめます。

子テーマに 1 つファイルを作成し、ファイル名を combination.css とします。 combination.css に、読み込みを停止した 3 つのスタイルシートの CSS を全てコピペします。

そして、 combination.css を loadCSS を使い非同期で読み込みます。

<link rel="preload" href="/wp-content/themes/simplicity2-child/combination.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/themes/simplicity2-child/combination.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>

Simplicity に限らず、複数のスタイルシートを読み込んでいるテーマに適したカスタマイズです。

ただ、ちょっと面倒なので、「コピペだけで高速に！ CSS のインライン化」でご紹介している方法もおすすめです。

Autoptimize プラグインも、 loadCSS を使い CSS を非同期で読み込みます。

レンダリングをブロックする CSS の排除は、サイト高速化の基本中の基本。真っ先に取り組むべき高速化対策です。

<link rel="preload"> は今後主流になるであろう CSS の読み込み方法ですが、 IE への対応がネック。

けれど loadCSS を使うことで、 IE を気にせず CSS を非同期で読み込めます。

私はファーストビューの CSS は <style> タグで、その他の CSS は loadCSS での非同期読み込みが定番になりました。