マウスホバーでAjaxしてコンテンツを先読みキャッシュ

なんとなく思いついて、このブログに入れてみて機能の紹介。

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 無し

prefetch あり

1 秒ちょっとかかっていたのが 300ms ほどに収まるようになりました!すごい!

まとめ

prefetch で爆速 web 体験ができるかも。
結局作ってみた満足度が高いことが主になっているので、ガチプロダクトでやってくなら本当に効果あるの?その機能使われている?は別途ちゃんと計測しないとねーーー。
あとは prefetch すればギガ減るよね、というかスマホ対応できないなこれ。スマホ対応ってどうすんだろ。

前後の記事

Next:
Prev: