Technologist
Posted Apr 7, 2015
A key goal for any website owner is to make the web browsing experience faster for their visitors. Thanks to HTML5, this is possible through the use of Prefetching and Prerendering.
What Are Prefetching and Prerendering?
In many cases it’s possible to know where a user is likely to click next – if a user is reading a multi-page article then it’s likely they will soon click on the ‘Next page’ link. Likewise, if they are reading an old article, it’s likely they will then click the site homepage to see what’s new. Normally this could result in a few second delay while that next page loads, slowing down the browsing experience for users. However, you can greatly speed up this process. Prefetching and prerendering tell the user’s web browser to begin loading the ‘future’ next page before the user even clicks on it – so that when they do click the link, the new page opens almost immediately. The concept of prefetching is included in the HTML5 specification. Firefox describes such pre-loading of a page as Prefetching whereas the Chrome equivalent is called Prerendering. Microsoft’s documentation states:
Use prerender and prefetch to improve your website’s navigation. Prerender (also called preload) specifies a webpage to be loaded (rendered) in the background while the user reads the current page and prefetch identifies resources to be downloaded in the background. Because both features download content before it’s needed, the resources are instantly available when needed by the user.
How To Enable Prefetch and Prerender
- Log into your WordPress site and go to the ‘Editor’ section – it is under the ‘Appearance’ menu. Here you can edit the individual files in your current theme.
- Browse the list of files for your theme in the right hand menu and click the Header (header.php) template file to select and edit it.
- Within this header.php file insert the following set of prefetch instructions – between the
<head>and</head>tags in the file and save it:
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>">
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>
So what does that do? If the user is looking at an Archive page, and there is more than 1 page in the Archive, and it is not the last page of the Archive – Prefetch and Prerender the next posts page OR if the user is looking at a single page (e.g. a single page article) then Prefetch and Prerender the Homepage.
What Will The User See?
Both prefetching and prerendering are invisible to the user – but Firefox, Chrome, and IE11+ users should get a pleasant surprise e.g. when they click on your homepage and find that it opens instantly (because it has already preloaded in the background). Older Internet Explorer users won’t notice any difference because older versions of IE don’t support pre-loading. Sadly Safari does not support it at all yet either.
Any Issues?
Website statistics may be skewed upwards – because pages can be counted even though the user may not visit that page eg: They may leave the site without ever clicking the Homepage or Next page links that you have prefetched in the background. Your website bandwidth usage may increase because more pages are being loaded. You should check logs daily for a while after turning on prefetching to see if any impact is higher than desired. Prefetch will only be of benefit to sites that have a high degree of certainty as to where their users will click next – blogs like this one are typically prime candidates for prefetching. If you update your WordPress theme then your changes in header.php file will be lost and you will have to insert the code again. This can be avoided by using a plugin like this one.
Conclusion
More than half of your visitors should be able to benefit from the improved page loading speed. It’s easy to see for yourself how much of a difference it makes in Chrome, Firefox, and IE11+. Clear your temp files/history, visit a page of your site other than the homepage, and then click the homepage link. If prefetch/prerender is working it should be displayed almost instantly. Quicker page loading is proven to keep visitors engaged with your site so, in my experience, this tip has been a success and far outweighed any additional bandwidth overhead. There are other steps you can take to improve a WordPress site aside from this. Have a look at what I did for this site.