Preload Resources with HTML
Meet prefetch, a tag that goes inside of the link element. You may be familiar with link which is an element used to help load resources. Now, we can add prefetch to the tag, and it will preload the resource and add it to the cache.
This won’t slow the page's performance—quite the opposite actually. This preloading gets a low priority and is great for future requests.
It’s great in all kinds of scenarios, for instance, the login page for a secure system. Once I know that the user has logged into the system, I can preload heavy pictures or other resources—anything I want! It could also be useful in wizards, or any scenario in which we can anticipate the user’s next move.
Implementing prefetch is easy. Here’s how it looks:
In this example, I preloaded a picture. If it’s in my HTML, the picture will preload.
On the page of the original article (which is in Hebrew), I put a picture of a cute little puppy from lorem-picsum with a prefetch tag. If you go to the page, open the developer tool, navigate over to the network tab, and then reload the page, you’ll see the call under “other.”
If you reload the page again (assuming you didn’t disable the cache), you'll notice that the picture has been loaded to the cache.
Simple, easy, and you can use it freely. There are some other prefetches that I’ll discuss in the future. But in the meantime, this is a great thing that you can start using today.
What I really love about this is that it’s implemented in pure HTML and works with any kind of file or even an entire site! For example, if I know that from here, you’re going straight over to the site of Haaretz, I can put something like this in my site:
<link rel="prefetch" href="https://www.haaretz.co.il/">
This will preload the entire site and put as much as possible into the cache.
Thanks for reading and see you next time.
About the author: Ran Bar-Zik is an experienced web developer whose personal blog, Internet Israel, features articles and guides on Node.js, MongoDB, Git, SASS, jQuery, HTML 5, MySQL, and more. Translation of the original article by Aaron Raizen.