link 要素の preload
link要素の rel に ”preload” を指定する事により、コンテンツの先読みが出来るとの事。
この指定を使う事により、ブラウザーのレンダリングを開始する前に読み込みを始めておき、CSS や Javascript などに記述してあるリソースを早く利用することが出来、レンダリングの性能が向上するとあります。
記述例は、この様になります。
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">rel で preload を指定し、その後ろの as で、種類を指定する。
しかし、先読みを行うけれど、その場で実行や適用は、行われないとあります。
なので、再度、この様に、
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>通常のファイルを読み込む必要があります。
大まかなサンプルは、この様になるとの事。
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js" defer></script>
</body>開発者向けのウェブ技術
HTML: HyperText Markup
Languagerel=”preload” によるコンテンツの先読み
を参照ください。
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content