Speed Up A WordPress Blog With Prefetch

This is a quick tip for web publishers and bloggers who use the WordPress publishing platform – the most popular Content Management System in use on the web. A key goal for any website owner is to make the web browsing experience faster for users. 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 whilst 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 – Internet Explorer doesn’t support it which is just typical of IE, not supporting web standards again…

How To Enable Prefetch and Prerender

1.  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.
2.  Browse the list of templates in the right hand menu and click the Header (header.php) template file to select and edit it.
3.  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 } ?>

We aren’t PHP or HTML developers so let’s break this down into plain English ;-)

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

Obviously if you want to get down and dirty with the code you can change these conditions or add to them to suit your own website but we find them well suited to blog format sites like TechLogon.

What Will The User See?

Both prefetching and prerendering are invisible to the user – but Firefox and Chrome 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).

Poor old Internet Explorer users won’t notice any difference because IE is useless doesn’t support such pre-loading even though it is a web standard.

Any Issues?

Website statistics may be skewed upwards – because pages can be counted even though the user may not visit that page e.g. 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 (pre)loaded – you should check logs daily for a while after turning on prefetching to see if any impact is higher than you wish. Prefetch will only be of benefit to sites that have a high degree of certainty as to where their users will click next – blogs are typically prime candidates for prefetching.

If you update your WordPress theme then your changes in Header.php will be lost – you will have to insert the code again. Any expert coders out there who can suggest how to avoid this?

Conclusion

Fortunately, IE’s market share is still declining to below 50% (and long may it continue to do so!) – so more than half of your visitors should be able to benefit from the improved page loading speed.

It is easy to see for yourself how much of a difference it makes in Chrome and Firefox – clear your temp files/history then visit/read a page of your site other than the homepage, 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 our experience, this tip has been a success and far outweighed any additional bandwidth overhead.

[Code sample via: Cats who Code]

2 Responses to: "Speed Up A WordPress Blog With Prefetch"

  1. Kevtop says:

    thanks, works great i just wish IE worked with it too as half my visitors still use that pos!

  2. Fastunlocker says:

    Nice Article :)