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 you can use to add just-in-time preloading to your website. The script starts loading new pages as soon as users hover over a link – although it only preloads static content.
According to Instant Page, when a user hovers over a link for around 65 ms, there’s a 50 percent chance that they’ll click on that link. At this point, your browser will have had some time to start loading the page in the background, leading to shorter loading times.
Before adding the script to your website, you’ll want to run a few internal speed tests. To do this, we like to use Chrome Dev Tools. Simply right-click on any page on your website and select the Inspect option. With the tools open to the right, select the Network tab, then click on an internal link:
The DOMContentLoaded section in the bottom right corner tells you how long the page’s HTML took to load. Run a few of these tests and jot down the results – that’s your baseline.
Now, let’s go over how to use Instant Page on WordPress.
The simplest way to use Instant Page on WordPress
While we’ll show you the manual method for how to use Instant Page on WordPress in the next section, the absolute simplest way to get started with Instant Page on WordPress is with the dedicated plugin:
There’s no tutorial needed here – you just install the plugin and it starts working!
How to manually use Instant Page on WordPress
We’d recommend the plugin for most users, but you can also manually add the Instant Page script to your WordPress site.
The small benefit of using the manual method is that you have a little bit more control over how your preloading functions.
The process will differ depending on what method you use. For example, you can use hooks to add code to WordPress or insert the code directly.
We’ll use the latter technique since Instant Page requires only a few lines of code to work.
To do this, you’ll want to access your website via File Transfer Protocol (FTP) and navigate to your WordPress root folder.
Once there, go to wp-content/themes and locate the folder that corresponds to your child theme.
If you’re not using a child theme, or are not sure how to create one, we’d recommend using the plugin method above. If you try to add the code snippet to your theme’s template files without using a child theme, your changes will get overwritten the next time you update your theme.
Then look for the footer.php file, which should contain the last part of your theme’s <body> tags. Open the file with a text editor, and locate the closing body tag (</body>). You can see part of an example footer.php file below, but keep in mind that yours might look a bit different depending on the theme you’re using:
Now, go ahead and paste the following code snippet before that tag. Then you’ll want to save the changes to the file before closing it:
<script src="https://instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
By default, the script will only preload internal links. However, you can tweak it to enable external preloading by adding an attribute to your <body> tag, like this:
<body data-instant-allow-external-links>
You can also modify the delay on hover by adding another attribute. For example, if your pages include a lot of buttons and clickable elements, you may want to increase hover time before preloading. As such, your browser should only preload links your visitors really plan on clicking on:
<body data-instant-intensity="150">
Testing just-in-time preloading in WordPress
We went ahead and set up the instant.page script on one of our websites for testing. You saw our baseline results in the previous section, so let’s give the test another go to see if the script makes a significant difference:
During our tests, we didn’t notice any significant differences in loading times within WordPress. There was a slight reduction according to Chrome Dev Tools, but it was only a few milliseconds, as you can see. It’s not bad, but we’re not even hitting 100 ms in latency reduction.
The results do get better when you use the script on static websites, though. During our tests, we managed to carve out an extra 200 ms of latency off of a fully-static test website:
Ultimately, implementing just-in-time preloading is easy if you’re a WordPress user. The reduction in latency is nice, but our tests in WordPress didn’t show a significant decrease, which means it’s only a game-changer in certain situations based on these results.
Conclusion
Anything you can do to improve your website’s loading times is good for business. Even shaving off a few milliseconds can have a significant impact on user experience. Implementing preloading is great for improving performance even further. In particular, this goes for websites with a ton of content, and a desire to maximize ‘time on site’.
Implementing just-in-time preloading is as simple as adding the instant.page script between your site’s <body> tags. If you use WordPress, there’s even a plugin that does the work for you. However, our tests show the reduction in latency isn’t as dramatic for WordPress sites as it is for static ones, which is to be expected.
If you’re looking for other ways to speed up your WordPress site, you’ll also want to learn about image optimization and caching. We cover other tactics in our post on how to speed up WordPress.
Do you have any questions about how Instant Page or preloading work? Let’s talk about them in the comments section below!
Free guide
5 Essential Tips to Speed Up
Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.
Keep reading the article at ThemeIsle Blog. The article was originally written by John Hughes on 2020-02-05 04:59:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.