Yesterday Google released the stable version of Chrome 13. This new version of Chrome browser has the interesting “Instant Pages” feature enabled by default. In case you didn’t know how Instant Pages work, Chrome pre-renders (preloads) certain pages in the background, like top search results or the ‘next page’ link in an article, which it thinks you will go to next. A pre-rendered page will appear to load instantly when clicked.
Here’s a video of the feature from Google:
You can now add support for this feature on your website and let Chrome, running on the visitor’s computer, know about any one link on your page that visitors are most likely to click next. It will then try to prefetch that page in the background and load instantly when the user clicks.
Enable Prerendering on a WordPress Website
Prerendering in Chrome is triggered by a <link> tag in HTML, similar to how prefetching is triggered in Firefox. So you can ask the browser to prerender a page on your website by inserting the link element with a rel of “prerender”.
Now there are two ways to add prerendering support on a WordPress website – by manually editing your theme template file or by adding a simple function to your theme’s function.php file. Choose the method you are comfortable with.
Template Method:
header.php file in your theme folder and add the following code inside the <head>...</head> tags.php if (is_archive()) { ?>
This code will work on WordPress pages for “category”, “tag” and “archive”, which normally spans to multiple pages. Chrome will automatically preload the next logical page, Ex. “Page 2” if the user is on “Page 1” in the background.
Function Method:
I consider this method as the easier and safest of the two. You can easily make changes to the code and it is preserved even after an automatic theme upgrade.
Open functions.php file found in your theme folder and add the following function anywhere before the last ?>.
function wp_prerender(){
if (is_archive()){
echo '<link rel="prerender" href="' . get_next_posts_page_link() . '"/>';
}
}
add_action('wp_head','wp_prerender');
And you are done!
Enable Prerendering on a Static Website
To trigger prerendering on a static website, add the following code to your html page:
<link rel="prerender" href="http://example.org/index.html">
Replace the page URL with the one you want.
Note: Prerending doesn’t work in Incognito mode in Chrome. More information about prerendering in Chrome can be found here.