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

TIPS 0 Takuya Kobayashi

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”