重要ではない CSS を link タグだけで非同期で読み込む方法
何もせずにスタイルシートを <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 が必要でしたが、現在は不要になりました。