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

Mon, 13 Dec 2021 11:20:48 +0900

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>

以下を参考にする。

https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9 https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9

https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadCSS

jQueryでCSSを遅延読み込みする方法

<link id="lazyCss" href="lazy.css" rel="subresource">
<script>
$(function(){
  // CSS遅延読み込み
  $('#lazyCss').attr('rel', 'stylesheet');
});
</script>

以下では複数のCSSとJSをまとめて非同期で読み込むスクリプト例を掲載しています。

気になること

CSSを非同期で読み込んでも、そのCCSに実際には使用しないスタイルが含まれていることがあります。その場合、Lighthouseの「未使用のCSSを減らす」に警告が残ります。これを防ぐためには、不要なスタイルを削除したり、分割したりする必要がありますが、それに手間をかけれないので、これは放置するしかないでしょう。

参考サイト

https://www.filamentgroup.com/lab/async-css.html https://www.filamentgroup.com/lab/async-css.html

https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657 https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657

https://neco913.kirara.st/post-7832/ https://neco913.kirara.st/post-7832/

https://www.nishishi.com/css/css-file-delay-load.html https://www.nishishi.com/css/css-file-delay-load.html

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja

https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/ https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/

http://www.02320.net/link-rel-subresource-and-lazy-load/ http://www.02320.net/link-rel-subresource-and-lazy-load/

LoadCSS.js on qwerty.work