Preload on hover?

Hi. I wonder about the preload technique. For example, I have a code piece like below:

const links = document.querySelectorAll('a')

Array.from(links).forEach((link) => {

    link.addEventListener("mouseenter", () => {

        const xhr = new XMLHttpRequest()

        xhr.open("GET", link.href)
        xhr.send()

    })

})

or with Fetch

const links = document.querySelectorAll('a')

Array.from(links).forEach((link) => {

    link.addEventListener("mouseenter", () => {

        fetch(link.href, { cache: "force-cache" })

    })

})

Can this code help to improve performance? We have a real estate project. Properties have too many items like images, text etc.

Actually, I couldn't understand if this was working as expected.

What do you think about that?

Comments

[Nick Taylor]

It can. This is one of the techniques Gatsby uses. You can read about the PRPL pattern and other performance techniques here, gatsbyjs.org/docs/prpl-pattern/

[Itachi Uchiha]

I didn't use Gatsby before. I think The PRPL Pattern can help us in our project.

[Antonio Radovcic]

You could check it in the Network-Tab in your DevTools. Dev.to is using something similar. What you could do is to cache the results in an array, and on click replace the HTML of the page with the fetched one, which would give you kind-of-instant page-loads.

[Itachi Uchiha]

I checked now. Looks really useful. I should implement it. Thanks.