今回ページリニューアルで速度改善の一貫としてcssの遅延読み込みを導入してみました。 cssの遅延読み込み方法はいくつかありますので、いくつかご紹介させていただきます。
『 rel="preload"』を使って非同期に読み込ませる方法
タグの rel という属性に preload という値を指定することによって、href属性で指定したファイルを先読みさせることができます。
ファイルが読み込み終わった時点で(onload属性値に記述したJavaScriptが実行されるので、そこでrel属性値が「stylesheet」に変わり)CSSとして読み込まれる。
PreloadでCSSを取得して、読み込みが終わったらstylesheetを適用させるみたいな感じになる。Preloadはレンダリングをブロックしないので、非同期にCSSを読み込みつつ、読み込み終わったら適用させるみたいなことができる。シンプルで導入しやすい。