メインコンテンツまで移動する
FirstLayout

重要ではない CSS を link タグだけで非同期で読み込む方法

  • 公開日
  • 更新日

Akira Web デザイナー

何もせずにスタイルシートを <link> で読み込む場合は、レンダリングをブロックしてしまいます。

また、rel="preload" を使えばレンダリングブロックは防げますが、他のリソースの読み込みからブラウザのリソースを奪うという代償が伴います。

そのため、可能な限り CSS のサイズを小さくし、<style> を使いインラインで CSS を読み込むのが一般的です。

ただ、どうしても CSS のサイズが大きくなる場合は、重要ではない CSS を非同期で読み込むといいかもしれません。<link> に 2 つの属性を付けるだけでスタイルシートを非同期で読み込めます。

 <link
  rel="stylesheet"
  href="スタイルシートのパス"
  media="print"
  onload="this.media='all'" /> 

<link>media="print"onload="this.media='all'" を付けるだけです。

詳しい説明は、The Simplest Way to Load CSS Asynchronously をご参考ください。以前までは loadCSS などの JavaScript が必要でしたが、現在は不要になりました。

シェアする

著者

Akira

福岡在住の Web デザイナー。役に立ちそうなことや学んだことを書き留めています。オンラインツールのブックマークサイト Benrito も運営しています。

フォローする

興味があるかも