Speed Up Your Site with Chrome Prerendering

While stumbling upon the web for Web 3.0, I come across a best tool for web designers.  You might know that there is an option for turning on or turning off Network Prediction in Google Chrome. Google claims that this option is useful to decrease load time of a page & the page is instantly loaded on your browser when you click on link. Here is a video on this pre-rendering, a feature of Google Chrome. This feature is also referred as Instant Pages.

What is prerendering?

According to Web developer’s Guide from Google

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 to implement it?

Adding support for Instant Pages to your website is extremely simple. Open your website template or code whatever you call and, before the closing </head> tag, include the following code:

<link rel="prerender" href="http://example.com/page2.html">

The URL (example.com) should point to the next “logical” page. For instance, if you have a photo gallery or a long article that spans multiple pages, the URLs could point to different parts of the page. The prerender tag on Page 1 could point to Page 2 while the prerender tag on Page 2 could point to Page 3 and so on.

How to implement it on WordPress based websites?

Feel yourself lucky. It need some efforts to add this code on each and every page of your site if you are using static website. But as you are WordPress user, just single line of code will do all of your work.

What you have to do is, Just open up header.php from your theme and add following lines before tag.

<!-- Instant Pages for Google Chrome -->
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">

That’s all.

For more information you can visit Google Web Developer Guide.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.