pagespeedinsightsで『レンダリングを妨げるリソースの除外』する #2
カトウ
遅延ロードする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" />