ブログ

pagespeedinsightsで『レンダリングを妨げるリソースの除外』する　#2
CSSを遅延ロードする

カトウ
前回の『JavaScript(JS)を遅延ロードする』に続き、『レンダリングを妨げるリソースの除外』の中でCSSが原因になっている部分を解消していきます。
 
遅延ロードするCSSに記述されているスタイルは、初回のレンダリングに使用されないので、少しのブレも許されない場合はインライン化など、遅延しない方法で対応してください。
 

デフォルト(同期読み込み)

<head>内
<link href="/css/style.css" rel="stylesheet" />
rel属性が『stylesheet』のものは、同期読み込みになります。
なので、複数のCSSを読み込んでいる場合、全てが揃わないとレンダリングが開始できません。
 

遅延ロード(非同期読み込み)

<head>内
<link href="/css/style.css" rel="subresource" class="lazy-css" />
rel属性を『subresource』に変更することで、非同期読み込みなります。
ただ、このままではCSSとしての効果も無いので、JavaScriptを使いrel属性を『stylesheet』に変更します。
 
</body>の直前
<script>
(function(window,document){
	// .lazy-cssを探します
	var lazyCss=document.querySelectorAll('.lazy-css');
	for(var i=0,l=lazyCss.length;i<l;i++){
		// 一つずつ『stylesheet』に変更します
		lazyCss[i].rel='stylesheet';
	}
})(window,document);
</script>
 

WEBフォントを遅延ロードする場合

デフォルトでは外部のフォントデータが読み込まれるまでレンダリングされません。
なので、遅延していないCSSの中にWEBフォントを使用する記述がある場合、レンダリングを妨げてしまいます。
フォントデータがまだ無い状態でも、各端末にあるフォントで代替するには、『@font-face』の中に『font-display: swap;』が必要です。
 
googleフォントではhrefのパスに『&display=swap』を付けることで、『font-display: swap;』が含まれたCSSが読み込まれるので簡単です。
<link href="https://fonts.googleapis.com/css?family=XXXXX&display=swap" rel="subresource" class="lazy-css" />
 
パスで指定できないWEBフォントの場合は、一旦ファイルをダウンロードし、『font-display: swap;』を追記したものを自サーバに設置する必要があります。
fonts.css
@font-face {
	font-family: 'XXXXX';
	font-style: normal;
	font-weight: 400;
	src: url(https://example.com/XXXXX.woff2) format('woff2');
	font-display: swap; // それぞれの@font-faceに追加してください
}
 
<head>内
<link href="/css/fonts.css" rel="subresource" class="lazy-css" />