Do you want to prefetch links in WordPress and improve loading speed?
Prefetching is the process of proactively loading documents or sub-resources in the background for pages that the user is expected to visit next.
Link preloading is a browser technology that loads links in the background before a site visitor clicks on them, making your website appear faster.
Prefetching Links lead to near-instant load times, enhancing both the user experience and perceived performance.
In this article, we will show you how to preload WordPress links for faster loading speeds easily.
Table of Contents
Should You Preload Links in WordPress?
Prefetching is a technique that provides benefits only when the visitor is already on the site. It is useful only to users who choose to explore two or more pages on your site.
If a user arrives at your website via a referral from Google or another search engine or external site, they won’t benefit from link prefetching.
If users come from an external source, they will experience the same loading times as they would if link prefetching wasn’t active.
Prefetching links only speeds up the navigation between pages for users already browsing your site.
How to Prefetch Links in WordPress
There are many ways to prefetch links on your WordPress site.
This requires the use of free plugins or the use of premium plugins that have the functionality built in.
Let’s start with my favorite
Perfmatters (Paid or Premium Plugin)
Perfmatters, my favorite speed optimization plugin
You only have to activate the options and start seeing how fast the pages of your sites start to load
Perfmatters uses the instant.page script, you can read that on the plugin’s documentation.
Flying Pages (Free)
A free plugin that does the job is Flying Pages, this plugin was created by Gijo Varghese, the speed expert behind some lightweight speed plugins and Flying Press.
Flying Pages has more options so you can set it up as you want it to work
Instant.Page Script
For those who don’t want to pay for a premium plugin or install a plugin to prefetch links, you can use the Instant.Page Script
You can read their documentation to understand more about the script but basically, you just have to add this script to the footer.
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>In case you don’t want to load the script form an external website, you can self-host it.
By the way,
QuickLink Script
Another script that you might want to try is QuickLink
You just have to add this code to the footer of your site.
<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.3.0/quicklink.umd.js"></script>
<script>
window.addEventListener('load', () => {
quicklink.listen();
});
</script>My Take on Prefetching Links
If you want to prefetch links using Perfmatters, your site will load an additional script.
For those adding the instant.page script, depending on your implementation, that script will make an internal or external request.
So if you feel that users will get to your website via Google and probably won’t explore other pages of your website, don’t prefetch links.
If you have concern about requests, you can add the script directly to the footer.
