prerender standard and browser implementations have evolved significantly since then. Modern best practices often rely on prefetch or preload instead.
While exploring the latest web technologies, I came across a fantastic tool for web designers. You might already know that Google Chrome has an option to enable Network Prediction. Google built this feature to dramatically decrease page load times by fetching resources in the background, so when a user clicks a link, the page loads almost instantly. This feature is often referred to as “Instant Pages.”
Here’s a quick video from Google explaining how prerendering works:
What exactly is prerendering?
According to the Google Web Developer Guide:
Prerendering is an experimental feature in Chrome (versions 13 and up) that can take hints from a site’s author to speed up the browsing experience of users. A site author includes an element in HTML that instructs Chrome to fetch and render an additional page in advance of the user actually clicking on it.
How do I implement it?
Adding support for Instant Pages to your website is extremely simple. Just open your website’s template code and paste the following snippet right before your closing </head> tag:
<link rel="prerender" href="http://example.com/page2.html">
The URL you provide should point to the next “logical” page the user is likely to visit. For instance, if you have a multi-page article or a photo gallery, the prerender tag on Page 1 would point to Page 2, Page 2 would point to Page 3, and so on.
How do I implement it on WordPress?
If you run a static site, you’d have to add this code manually to every single page. But if you use WordPress, you’re in luck! A single line of PHP is all you need.
Just open up your theme’s header.php file and add the following lines inside the <head> section:
<!-- Instant Pages for Google Chrome --> <link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
And that’s it! Your site will automatically tell Chrome to prerender the next page of posts.
For a deeper dive into the technical details, you can read the Google Web Developer Guide.