Prerender Pages to Improve Browsing (video)

Published on 20 Nov 2013 at 8:41 pm.
Filed under Google,Informative,Search Engine Optimization.

Visitors want to browse your site quickly. In this video we explain how you can use HTML5 to prerender the next page to make it load fast.

Prerender Pages to Improve Browsing Video Transcript

Greetings Brand Builders. This is Brian from Brand Builder Websites and I am here to explain the benefits of using the prefetch and prerender features available in HTML5 compliant browsers. These benefits include faster load times, better ranking in search engines, and possibly an easier browsing experience. But before I get into that let me first explain what I mean by prefetch and prerender.

Prefetch is a feature that was first introduced in Firefox. The basic idea was that you could list off some files, or a link to a next page, and the browser would download those files after it finished loading the current page. Let me be clear. It just downloaded the files. Downloading some files is nice. It does speed up loading the next page but to really be effective you need to know a lot about that next page before hand. This made it somewhat cumbersome to work with.

This complexity is what led Chrome to develop the prerender feature. Instead of listing off some files you want it to load you just tell Chrome what’s the next page. When you do this Chrome will not only download the page but it will do everything that it normally does to load the page. When the person clicks on the page it will load in a snap.

Now that I’ve explained what prefetching and prerendering are and how they can lead to faster loading times let me cover the SEO implications. HTML4 introduced <link> tags called prev and next that, as you might expect, point to the previous and next pages from the current page. In most situations the next page is the page that you are going to want to prefetch or prerender. If the two pages contain next and previous <link> tags then this will send a signal to search engines about your site’s intended navigation. As always, anything you can do to simplify things for search engines will positively affect your SEO.

Now let me talk about the easier browsing experience. You see, Microsoft spent a lot of time in recent years to turn Internet Explorer into a decent browser. Microsoft realized that prefetch and prerender are not mutually exclusive features and implemented both in IE11. But that’s not all was done recently. In IE10 they built out this cool feature called flip ahead browsing that used those next and previous links I just talked aboutso that when you’re in the modern UI or the metro or whatever you want to call it mode in Windows 8 you can move to the next page by simply swiping your finger from right to left. Here, let me show you.

Right now I’m on my Surface Pro visiting our Mobile Websites page. Now watch me swipe twice and now I’m on our Online and Search Marketing page. Swipe backwards and now I’m on our Creative Services page.

Now I know what you’re probably thinking. How do I add this to my site? Good news for all of you clients powered by SiteBrandBuilder. We’ve automatically enabled this for you based on your site’s navigation. If you use WordPress then there are a number of plugins that are available that could add this feature. I recommend the WordPress SEO by Yoast plugin. If you’re a web developer please visit the blog post for this video. The blog post contains transcript that has links that explain everything.

That’s it for this video. Please leave us feedback so that we know if we should do this again in the future. And don’t forget to like this video on YouTube and subscribe to our channel. Please +1 and like this post over on our blog and like us on Facebook, and follow us on Twitter, Google+, and LinkedIn. Thank you and keep on building your brand.

This post was originally published as Prerender Pages to Improve Browsing (video) for Brand Builder Websites.