CSSを非同期で読み込んで高速化
Lighthouseのパフォーマンススコアの**「レンダリングをブロックするリソースを排除する」**に対応するための対策方法をメモ。
media=“print” onload=“this.media=‘all’“をつける方法
もっとも簡単な方法です。
<link rel="stylesheet" href="/path/to/my.css" />
これに、media="print" onload="this.media='all'"を加えて以下のようにします。
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'" />
Preloadを併用する方法
Preloadは対応していないブラウザがあるので、併用が必要。
<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Javascriptを使用する方法
// make a stylesheet link
var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// insert it at the end of the head in a legacy-friendly manner
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
または、
<script type="text/javascript">
var delaycss = document.createElement('link');
delaycss.rel = 'stylesheet';
delaycss.href = '/path/to/delaystyle.css';
document.head.appendChild(delaycss);
</script>
loadCSS.jsを使う方法
大抵のブラウザで使えるらしい。
<link rel="preload" href="index.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="index.css”></noscript>
<script src="loadCSS.js"></script>
<script>
loadCSS( "path/to/mystylesheet.css" );
</script>
以下を参考にする。
jQueryでCSSを遅延読み込みする方法
<link id="lazyCss" href="lazy.css" rel="subresource">
<script>
$(function(){
// CSS遅延読み込み
$('#lazyCss').attr('rel', 'stylesheet');
});
</script>
以下では複数のCSSとJSをまとめて非同期で読み込むスクリプト例を掲載しています。
- 複数のJSとCSSをまとめて非同期で読み込むJavascriptのメモ - QWERTY.WORK
- 外部JavaScriptやcssファイルを動的に読み込み（遅延読み込み）HTMLページ描画を高速にする
気になること
CSSを非同期で読み込んでも、そのCCSに実際には使用しないスタイルが含まれていることがあります。その場合、Lighthouseの「未使用のCSSを減らす」に警告が残ります。これを防ぐためには、不要なスタイルを削除したり、分割したりする必要がありますが、それに手間をかけれないので、これは放置するしかないでしょう。
