FirstLayout

PolyfillのloadCSSを使い全てのブラウザでpreloadによる非同期でのCSSの読み込み方法

loadCSS とは?

CSS は、レンダリングをブロックします。サイト表示を高速にするには、重要ではない CSS を非同期で読み込むことが効果的です。

一般的には JavaScript を使い非同期で読み込みますが、もう 1 つ方法があります。それは HTML に記述するだけの <link rel="preload"> での読み込み。

<link rel="preload"> の詳細については、rel=”preload” によるコンテンツの先読み、または Preload — 事前読み込みをご参考ください。

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

preload のブラウザ対応状況

主要ブラウザは対応予定ですが、開発が停止された 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 は、非同期で読み込んでも問題ありません。可能な限りのプラグインに適用したいところです。

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール