CSSを非同期で読み込むいろいろな方法

CSSを非同期で読み込んで高速化

Lighthouseのパフォーマンススコアの「レンダリングをブロックするリソースを排除する」に対応するための対策方法をメモ。

media="print" onload="this.media='all'"をつける方法

もっとも簡単な方法です。

<link rel="stylesheet" href="/path/to/my.css" />

<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を減らす」に警告が残ります。これを防ぐためには、不要なスタイルを削除したり、分割したりする必要がありますが、それに手間をかけれないので、これは放置するしかないでしょう。

参考サイト