preload
link タグ
の
rel 属性
につけて、コンテンツの先読みをさせる
<link rel="preload" as="image" href="test.jpg">
何を先読みする？
FirstView ファーストビュー
に使うもの
JSに依存してロードする画像、HTML
CSS
の
background image css
の画像
初期表示周辺で使うけど、重たいもの
Before
ブラウザが自動判断して、app.jsなどから、必要な画像やcss、jsをロード
After
優先的に先にロード
プリロードして早くなるか、パターン上げて確認したほうが良い
無闇矢鱈にチェックは、良くない
参考
Common problems with rel="preload"
AddyOsmani.com - Preload late-discovered Hero images faster