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

loadCSSを使いCSSを非同期で読み込み

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

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 しか対応していません。

preloadのブラウザ対応状況Can I use… : preload

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

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

loadCSS の使い方

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 をまるっとコピペします。

そのまま貼り付けると <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 のハンドル名は、 プラグインのスタイルシートの 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 の排除は、サイト高速化の基本中の基本。真っ先に取り組むべき高速化対策です。

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

けれど loadCSS を使うことで、 IE を気にせずスタイルシートを非同期で読み込めます。

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