link rel="preload"によるパフォーマンス向上

rel=”preload”によって先読みさせることができる。レンダリング前に読み込まれるので、レンダリングがブロックされにくくなる。また、ブラウザにキャッシュされ、他のページに移動した際にパフォーマンスが向上する。

<link rel=”preload” as=”style” href=”/style.css”>
<link rel=”preload” as=”font” href=”/font/font-awesome.woff” crossorigin>
<link rel=”stylesheet” href=”/style.css”>

上記の様にpreloadを指定した後に普通にスタイルを読み込むだけ。

主にpreload可能なもの。

• as=”audio”
• as=”video”
• as=”font”
• as=”image”
• as=”style”