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

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>

 

以下を参考にする。

Link

seo measures⑤ css asynchronous loading -cssの非同期読み込みについて-

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

Link

github - filamentgroup/loadcss: load css asynchronously

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

参考サイト

Link

modern asynchronous css loading | filament group, inc.

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

Link

cssを非同期ロードする最も簡単な方法 - qiita

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

Link

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

Link

重要ではないcssファイルを後から遅れて読み込ませる方法 - スタイルシートtipsふぁくとりー

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

Link

css の配信を最適化する  |  pagespeed insights  |  google developers

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

Link

seo measures⑤ css asynchronous loading -cssの非同期読み込みについて-

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

Link

rel=subresourceでcssの遅延読み込みをやってみて元に戻した

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

PAGETOP