株式会社ズコーデザイン
かとう
BLOG
pagespeedinsightsで『レンダリングを妨げるリソースの除外』する #2
CSSを遅延ロードする
前回の『JavaScript(JS)を遅延ロードする』に続き、『レンダリングを妨げるリソースの除外』の中でCSSが原因になっている部分を解消していきます。
遅延ロードするCSSに記述されているスタイルは、初回のレンダリングに使用されないので、少しのブレも許されない場合はインライン化など、遅延しない方法で対応してください。
デフォルト(同期読み込み)
<head>内
rel属性が『stylesheet』のものは、同期読み込みになります。
なので、複数のCSSを読み込んでいる場合、全てが揃わないとレンダリングが開始できません。
遅延ロード(非同期読み込み)
<head>内
rel属性を『subresource』に変更することで、非同期読み込みなります。
ただ、このままではCSSとしての効果も無いので、JavaScriptを使いrel属性を『stylesheet』に変更します。
</body>の直前
</body>の直前
WEBフォントを遅延ロードする場合
デフォルトでは外部のフォントデータが読み込まれるまでレンダリングされません。
なので、遅延していないCSSの中にWEBフォントを使用する記述がある場合、レンダリングを妨げてしまいます。
フォントデータがまだ無い状態でも、各端末にあるフォントで代替するには、『@font-face』の中に『font-display: swap;』が必要です。
googleフォントではhrefのパスに『&display=swap』を付けることで、『font-display: swap;』が含まれたCSSが読み込まれるので簡単です。
パスで指定できないWEBフォントの場合は、一旦ファイルをダウンロードし、『font-display: swap;』を追記したものを自サーバに設置する必要があります。
fonts.css
<head>内
<head>内