loadCSS とは？
CSS は、レンダリングをブロックします。サイト表示を高速にするには、重要ではない CSS を非同期で読み込むことが効果的です。
一般的には JavaScript を使い非同期で読み込みますが、もう 1 つ方法があります。それは HTML に記述するだけの <link rel="preload"> での読み込み。
<link rel="preload"> の詳細については、rel=”preload” によるコンテンツの先読み、または Preload — 事前読み込みをご参考ください。
<link rel="preload">は、執筆時点で Chrome しか対応していません。
主要ブラウザは対応予定ですが、開発が停止された IE は対応しません。IE のシェアが高い日本では、これからも <link rel="preload"> を使いにくいのが現状です。
しかし、loadCSS を使うことで全ブラウザに対応できます。
loadCSS は、Filament Group が開発した JavaScript の Polyfill です。
通常 <link rel="preload"> に対応していないブラウザでは、例え記述をしても CSS は非同期で読み込まれません。それに対し loadCSS は、対応していないブラウザでも CSS を非同期で読み込みます。
仕組みは、まずブラウザが <link rel="preload"> に対応しているかを判定。対応していれば、何もしません。
対応していなければ、一時的に media 属性を操作し回避方法を適用。そして、CSS を動的に非同期で読み込みます。
これによりブラウザ対応を気にせず、<link rel="preload"> を使えるようになります。
使い方
loadCSS の使い方は、非常に簡単です。
example.css というスタイルシートを読み込む例として説明します。
通常は、<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 をまるっとコピペします。
サイトで縮小化処理をしていない場合は、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 でご確認ください。
もっと簡単な media 属性を使った読み込み方法
loadCSS は実装が簡単な上に、様々ケースで有効です。
ただ、<link rel="preload"> に対応していないブラウザのために Polyfill を読み込むことは、無駄に感じるケースもあります。
そこで、loadCSS を開発している Filament Group が、The Simplest Way to Load CSS Asynchronously にて新たな方法を提案しています。
それは、loadCSS を使わずに、たった 1 行の HTML だけで CSS を非同期で読み込む方法。media 属性の使い方が特徴です。
<link rel="stylesheet" href="example.css" media="print" onload="this.media='all'"><link rel="preload"> との併用も可能です。
loadCSS を使うのか、media 属性を使うのかは、ケースによって使い分けるといいかもしれません。
WordPress プラグインに適用
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 のハンドル名は、プラグインのスタイルシートの id から -css を除いたものです。
次に <head> タグ内に、以下のコードを追加します。
<?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 は、非同期で読み込んでも問題ありません。可能な限りのプラグインに適用したいところです。