How to Use Instant Page on WordPress to Preload Content

How to Use Instant Page on WordPress to Preload Content

If you want to speed up your WordPress site, using Instant Page on WordPress is a lesser-known tactic that harnesses the power of “preloading”.

Ultimately, website navigation is simple. You go to a page, find a link that interests you, click on it, and repeat the process. Behind the scenes, your browser loads each page after you click on a link. However, imagine if your browser loaded new pages before that click. On the front end, the only difference would be the second page loading faster than usual.

That’s what preloading is – using code to tell visitors’ browsers to preload specific pages. As a result, users get to experience faster navigation, and if you implement it correctly, they’ll never notice there’s more data loading in the background.

In this article, we’ll break down how preloading works, then teach you how to use the Instant Page script to add the functionality to WordPress. We’ll also test how much of a difference preloading makes in real life.

Let’s begin!

An introduction to ‘just-in-time’ preloading

Preloading is a <link rel> tag that tells browsers they should load and cache a resource as soon as possible. You can, for example, use this code so the browser will fetch your style.css file right after it loads your page:

<link rel="preload" href="https://themeisle.com/style.css" as="style" />

Usually, you use preload tags to download stylesheets or scripts. However, just-in-time preloading goes a step further. It tells your browser to start loading another page when you interact with a specific link.

Your browser doesn’t do anything with the page it preloads, aside from caching it. This means when you click on a link, loading times should be faster than usual. However, bear in mind that just-in-time preloading only works for:

  • Internal links within your website
  • Links to external pages (if you want to!)

In other words, adding just-in-time preloading to your website should speed up internal navigation. However, it won’t impact loading times from search engines or from other websites.

During our own tests, we found that on average, it took us 200–300 ms to click on a link from the time we hovered over it. In a real-life scenario, this would be a nice bite out of any page’s loading time, even if it was already fast to start with.

It’s worth noting that preloading is not the same as ‘prefetching,’ which is another term you may run into. Prefetching also tells your browser to load assets in the background. However, it does so at a lower priority, which doesn’t suit the purpose of beginning the load almost immediately.

Instant Page makes it easy to set up “just-in-time” preloading

For the uninitiated, Instant Page is an open-source script

[…]

 



This article was written by John Hughes and originally published on ThemeIsle Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top