SEO measures⑤ CSS Asynchronous Loading -CSSの非同期読み込みについて-

サイト高速化にあたり、PageSpeed Insightsを使用している際、「キーリクエストのプリロード」という項目が出現しました。

「<link rel=“preload”> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください」とのこと。

この改善はサイト高速化に有効なので、今回は、preloadについて説明していきます。

preload（プリロード）とは

ブラウザがWebページを表示する為に行う、一連の描画処理のことを「レンダリング」と言います。

外部ファイル化して、headタグ内のlinkタグで読み込んでいるCSSファイルは、ページのレンダリングに必要な為、ブラウザがCSSを解析し、利用できる準備が整うまで描画をしません。

これが「レンダリングブロック」です。

CSSは、レンダリングをブロックするので、サイトを高速にする為には、重要ではないCSSを「非同期」で読み込むことが重要になりますが、これに使用するのが「preload」です。

「preload（プリロード）」とは、文字通り、プリ＝先行、ロード＝読み込み、で先行読み込みをブラウザに指示する機能になります。

HTMLでは、＜link＞タグのrel属性にpreloadという値を指定することによって、href属性で指定したリソース（通常はファイル）を先読みさせることができます。

CSSファイルを先読みする場合、次の様に記述します。

<link rel=“preload” href=“index.css” as=“style”>

※補足：as 属性にファイルの種類を指定することにより、ブラウザがファイルに合った最適なタイミングを判断することができます。

上記のコードは、ブラウザに対し「このリソースは早めに読み込んで下さい」という指示になります。

そして、ブラウザはこのリソースをなるべく早いタイミングで読み込み、非同期で実行されます。

よって、レンダリングをブロックしません。これにより、レンダリングが速くなり、サイトが高速化するというわけです。

但し、注意点があります。

この先読みは、あくまで「リソースを先に読み込んでおくだけであり、実行（適用）はされない」という点です。

実行（適用）を行うためには、そのリソースを通常通りに読み込む記述が別途、必要になります。

CSSファイルの場合、先読みした後、以下の記述を動的に追加する必要があります。

<link rel=“stylesheet” href=“index.css”>

これをJavaScriptで行うには、以下のコードを記述します。

<script>
let preloadedStyle = document.createElement(“link”);
preloadedStyle.href = “index.css”;
preloadedStyle.rel = “stylesheet”;
document.head.appendChild(preloadedStyle);
</script>

これを実行すると「index.cssファイルは既に取得済」とブラウザが判断し、ダウンロードすることなく、このスタイルシートが適用されます。

逆に言うと、リソースとなるファイルを適用するタイミングを、Webページの製作者が決定できるということです。

なお、CSSファイルが先読みできたらすぐに適用させたい場合、次のように＜link＞タグを書くことで可能になります。

<link rel=“preload” href=“main.css” as=“style” onload=“this.onload=null;this.rel=‘stylesheet’">

上記のコードは、onloadイベント（読み込み時）に、この＜link＞タグ自身のrel属性値を“stylesheet”に書き換えています。

preloadの注意点

レンダリングをブロックする要素を全てpreloadを使用し、先読みした場合、同時に読み込まれるファイルサイズが大きくなりすぎ、結果、逆に遅くなるという可能性もある為、注意が必要です。

preload で先読みできる要素について

上述の通り、preloadはas属性で要素を指定する必要があります。

以下、指定可能な要素の一例です。

image ：＜img＞や＜picture＞等を利用する際に使用。
script ：＜script＞を利用する際に使用。
embed ：＜embed＞を利用する際に使用。
document ：＜iframe＞や＜frame＞を利用する際に使用。
object ：＜object＞を利用する際に使用。
audio ：＜audio＞を利用する際に使用。

prefetch

preloadの他に、「prefetch」というものがあります。

これは、ユーザーが次に訪問する可能性が高いページを開発者がわかっている場合、リソースを前もって取得しておく方法です。

つまるところ、「次のページの準備しておこう」ということですね。

prefetchの場合、次のように記述します。

<link rel=“prefetch” href=“index.css”>

ただし、JavaScriptやCSS等、キャッシュ可能なリソースに限られます。

また、現在ページのリソースをダウンロードしている最中、指定した次のページで使用するリソースもダウンロードされることになる為、現在ページの表示速度に影響する可能性があることに注意しましょう。

prefetchとpreloadの違いは、「prefetch」は、画面を遷移する前に、次の遷移先で必要となるリソースを先読みするのに対し、「preload」は現在表示しようとしているページに遷移した後、そのページ内でのリソースを先読みします。

loadCSS

perloadは、モバイルで多く利用されているSafariやChromeでは利用できますが、残念ながら、IE、Firefoxでは未対応です。

しかし、loadCSSを使うことで全ブラウザに対応できます。

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

通常、preloadに対応していないブラウザの場合、例え記述をしてもCSSは非同期で読み込まれませんが、loadCSSは、preloadに対応していないブラウザでもCSSを非同期で読み込むことができます。

仕組みとしては、まずブラウザが <link rel=“preload”>に対応しているかを判定し、対応していれば、何もしません。

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

これによって、ブラウザ対応を気にせず、preloadを使用することが可能です。

loadCSSの使い方

以下、index.cssというスタイルシートを読み込む例です。

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

<link rel=“stylesheet” href=“example.css”>

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

<link rel=“preload” href=“index.css” as=“style” onload=“this.onload=null;this.rel=‘stylesheet’">
<noscript><link rel=“stylesheet” href=“index.css”></noscript>

JavaScriptをオフにしている環境では、通常のスタイルシートを読み込んでもらう為、noscriptタグでrel=“stylesheet"のlinkタグを囲みます。

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

とはいえ、そのまま貼り付けると＜head＞タグ内が汚くなるので、Online JavaScript/CSS/HTML Compressor 等で縮小してから貼り付けましょう。

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

これで完了です。

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

詳細は、GitHub で確認を。