なんとなく思いついて、このブログに入れてみて機能の紹介。
link rel=prefetch
HTML の機能として、指定した URL の内容を先読みして、内容をキャッシュしておいてくれるものがあります。 詳しいことは MDN を見るとよいかとー。
rel=“preload” によるコンテンツの先読み - HTML: HyperText Markup Language | MDN Link prefetching FAQ - HTTP | MDN
preload と prefetch って？？という場合にはこちらの記事もおすすめです。
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io
なぜ onHover で prefetch ？
ちゃんと計測したことないのでわからないですけど、リンクをセカセカ、サササッ！とクリックすること、あまり無いですよね？読み物系ならとくに。
わずかにホバーする時間があってからクリックするのかなあと思ったので じゃあそのタイミングで先読みしたら爆速 Web サイトが体験できるんじゃ？と思った次第です。
コード
// prefetch link
let prefetchTimers = {};
let prefetcedLinks = {};
document.querySelectorAll('a').forEach((element) => {
element.addEventListener('mouseenter', (event) => {
if (element.href.indexOf('#') !== -1 || element.href.indexOf('javascript:') !== -1) {
return;
}
if (element.target === '_blank') {
return;
}
if (prefetcedLinks[element.href] === true) {
return;
}
prefetchTimers[element] = setTimeout(() => {
const prefetchTag = document.createElement('link');
prefetchTag.rel = 'prefetch';
prefetchTag.href = element.href;
document.head.appendChild(prefetchTag);
prefetcedLinks[element.href] = true;
}, 300);
});
element.addEventListener('mouseleave', (event) => {
if (prefetchTimers[element] !== undefined) {
clearTimeout(prefetchTimers[element]);
delete prefetchTimers[element];
}
});
});
遷移先別に、ホバー用タイマーと読み込み有無を記録しています。 ホバーから外れるとタイマーを削除し、ホバーが外れずにタイマーが経過すると prefetch が登録されます。
爆速 web サイトは体験できるのか？
prefetch 無し (disable cache をつけてすべて読み込むようにしています)
prefetch あり (disable cache を外して、読み込む様子）
すべてキャッシュから読み込んでいるのがわかります。 そのおかげで DOMContentLoadedまで 1 秒ちょっとかかっていたのが 300ms ほどに収まるようになりました！すごい！
まとめ
prefetch で爆速 web 体験ができるかも。 結局作ってみた満足度が高いことが主になっているので、ガチプロダクトでやってくなら本当に効果あるの？その機能使われている？は別途ちゃんと計測しないとねーーー。 あとは prefetch すればギガ減るよね、というかスマホ対応できないなこれ。スマホ対応ってどうすんだろ。