こんにちは森田です。 前回の記事で サイトパフォーマンス改善でよく見るボトルネックになる要因 を書いたのですが、ではそれをどのように改善すべきか?については深く掘り下げませんでした。 今回はその手段の1つとなりえる rel="preload" についてご紹介します。 rel=”preload” とはrel="preload" は <link> 要素に指定する rel 属性に付ける値です。 また、併せて as属性で種類を指定します。 rel="preload" を指定することでコンテンツの先読みができるようになり、Core Web Vitals の向上やサイト高速化をすることができるようになります。 執筆時現在、IE以外のモバイルを含む主要なブラウザは rel="preload" に対応しています。 2021.04現在の rel=”preload”の対応状況as 属性について併記するas属性
![rel=”preload” を使った Core Web Vitals や サイト高速化の改善](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf4d73002bda0f5e5737dfdf782e6f430aacd58c/height=288;version=1;width=512/https%3A%2F%2Fwp.gaji.jp%2Fwp-content%2Fuploads%2F2021%2F04%2Fdean-ward-BnWz1zYJswI-unsplash-scaled.jpg)