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

《2017年10月14日 16:05 公開/更新》 重要ではないCSSファイルを後から遅れて読み込ませる方法 [基本] CSSファイルによっては後から遅れて読み込ませたい場合もあります。後から読み込まれるJavaScriptだけで使われるCSSとか、ユーザが何らかのアクションを起こさない限り参照されないCSSとか。そのような「先に読んでも仕方がない」(＝事前に読み込んでもウェブページの表示待ち時間を増やしてしまうだけ)なCSSファイルを、できるだけ後回しにして読み込ませる方法を紹介。 重要ではないCSSファイルを後から読み込ませたい HTMLソースの末尾でCSSファイルを読み込ませる方法 (参考) Googleが紹介しているCSSの遅延読み込みソースは rel=”preload”を使って非同期にCSSファイルを読み込ませる(未来の)方法 重要ではないCSSファイルを後から読み込ませたい 画

[tak-kun]

“<script type="text/javascript"> var delaycss = document.createElement('link'); delaycss.rel = 'stylesheet'; delaycss.href = '/path/to/delaystyle.css'; document.head.appendChild(delaycss);</script>”

[localnavi]

最初に書いてあるHTML＋JSの方が、最後に書いてあるスマートなHTMLタグよりpage speed insightsのスコアがちょっと高くなる。ブラウザも選ばないし。