preloadとは 先行読み込みをブラウザに指示する機能。 また、Core Web Vitalsの向上やサイトの高速化をすることができるようになる。 href属性でリソースのパスを指定 as属性でリソースの種類を指定 preloadで先読みできる要素の一覧 as="" 備考 image 画像ファイル embed ＜embed＞要素の中に埋め込まれるリソース object ＜object＞要素の中に埋め込まれるリソース document ＜frame＞や＜iframe＞に埋め込まれるHTML文書 script JavaScriptファイル audio 通常は＜audio＞で使用される音声ファイル font フォントファイル fetch ArrayBufferやJSONファイルのような、フェッチまたはXHR要求でアクセスされるリソース style CSSスタイルシート track WebVTTファイル worker JavaScriptウェブワーカーまたは共有ワーカー　 video 通常は＜video＞で使用される動画ファイル　 rel="preload"をよく使うコンテンツ CSS <link rel="preload" href="stylesheet.css"> CSSは読み込みが完了するまでレンダリングがブロックっされるのでrel="preload"を使うことでより速くCSSが読み込まれることになり、結果的にレンダリングがブロックされにくくなり、ページスピードが速くなります。 JavaScript <link rel="preload" href="main.js" as="script"> CSSと同様にjsファイルも先読みが必要なファイルはrep="preload"が有効です。 <script src="script.js" async> 逆に読み込みがいつでもいいjsはasync属性をつけると非同期読み込みができます。 <script src="script" defer> defer属性で遅延読み込みもできます。 フォント <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> フォントも先読みすることでFOITやFOUTを防ぐことができ、Core Web Vitalsの向上も見込めます。 フォントを指定していない場合、Page Speed Insights の「キーのプリロード」という項目で指摘されます。 フォントの場合はCORSを有効にするためにcrossorigin属性も指定します。 rel="preload"は使い方を間違える逆にページスピードが低下することもあります。 用法・用量を守って正しく使うことが重要となります。 参考サイト

レスポンシブな HTML + CSS を書いている時、デスクトップでだけマウスカーソルのホバー時にツールチップを出したいとかあると思うんです。 こんな感じで。 <a class="link">ちょっと見て！<span class="tooltip">やっぱ見ちゃダメ</span></a> .tooltip { display: none; } .link:hover .tooltip { display: block; /* 位置合わせする */ } で、モバイルデバイスには :hover ステートが無いのでツールチップは表示されません。…と思うじゃないですか。ところが、モバイルデバイスには :hover ステートは無いものの、タップ時に擬似的に :hover が発生して、他の場所をタップするまで発生したままになるんですね。なので、このままだとタップした時にツールチップが表示されそのままになっちゃうんです。ちょっと嫌ですね。 これ、簡単に抑制できます。 .tooltip { display: none; } @media (hover: hover) { .link:hover .tooltip { display: block; /* 位置合わせする */ } } メディアクエリの hover 特性を使って、実際に :hover ステートをサポートするデバイスでのみ CSS が有効なようにすればいいんですね。 分かってしまえば簡単な話なんですが、すぐに忘れそうなので自分用の備忘録に残しておきます。