rel=”preload” を使った Core Web Vitals や サイト高速化の改善

こんにちは森田です。 前回の記事で サイトパフォーマンス改善でよく見るボトルネックになる要因 を書いたのですが、ではそれをどのように改善すべきか？については深く掘り下げませんでした。 今回はその手段の1つとなりえる rel="preload" についてご紹介します。 rel=”preload” とはrel="preload" は <link> 要素に指定する rel 属性に付ける値です。 また、併せて as属性で種類を指定します。 rel="preload" を指定することでコンテンツの先読みができるようになり、Core Web Vitals の向上やサイト高速化をすることができるようになります。 執筆時現在、IE以外のモバイルを含む主要なブラウザは rel="preload" に対応しています。 2021.04現在の rel=”preload”の対応状況as 属性について併記するas属性

[hapilaki]

“CSS は読み込みが完了するまでレンダリングがブロックされるのでrel=”preload” を使うことでより早くCSSが読み込まれることになり、結果レンダリングがブロックされにくくなり、ページスピードが向上します。”