Google includes something called “Page speed” in their ranking algorithm. Many are aware of this fact, but few have taken any action to find out what it means for their business or actively worked on improving their website’s response times.
In this post, I won’t necessarily dig into all the ways that you can improve your page load speed. But I will touch on why it’s important and then tell you about an awesome trick.
Most of the efforts around your online presence are aimed at either increasing your traffic OR improving your conversion rate.
The beauty of improving website load times is that it actually does both! You increase visitor numbers AND you improve the Conversion rate.
Since page speed is a factor in Google’s algorithm, excellent load times will improve your ranking => you get more organic traffic.
Secondly, improved page speed will give your visitors a better user experience, make them more prone to stay on your site and finish what they came for => improved conversion rates.
Often quoted research on this subject includes an Amazon study that showed a 1% decrease in sales for every 0.1s decrease in response times.
From my experience, Google seems to classify a page that loads quicker than 1.5 seconds as fast, and a page that loads slower than 1.5 seconds as slow.
To find out how quickly your website loads, you can use this free tool.
In a future post, I will talk about how to increase the page load speed of your entire website.
But for now, here’s the cool trick:
Ilya Grigorik is a web performance engineer at Google. He recently shared a study about Google’s use of the directive “rel=prerender” to help Google increase the page load speed of their search results.
The same directive you can use on your own website to speed up your page loading.
This directive allows you to completely load one page in an invisible tab in the background once the initial page completes its loading. If the user then navigates to that URL, it will appear instantly. If they don’t, the page is then unloaded.
Here’s an example of how Google uses it:
Let’s say I Google, “CNN”.
Google displays the CNN website as the top result, and because they anticipate that there is a very large chance that I’m going to click on this result, they have applied the link rel=”prerender” attribute to the link as seen below.
What this link attribute does is once this page finishes loading (which happens in milliseconds), the browser then starts to load the cnn.com page secretly in the background.
So now when I click on that result, the page loads instantly for me, the user, because my browser already loaded it in the background.
This is a great user-experience because I don’t have to wait for cnn.com to load (even though that may only take a few seconds) and I can get on to finding the information that I want.
If I hadn’t clicked on this link – the one that my browser secretly loaded in the background – the browser would have just discarded this pre-load information and loaded the page that i requested as normal. All of this unbeknownst to the Googler.
So how do you use this on your website?
Let’s say that you get 100 visits to your home page every week.
Now, let’s say that 80% of those visitors click on your “Our Services” link at the top of your page (you can determine what your most popular ‘next page’ is by looking at your Google Analytics).
What you would do in this example is place the following line of code into the <head> of your home page:
<link rel=”prerender” href=”http://www.yourwebsite.com/our-services”>
Now, when people come to your home page, your “Our Services” page will load secretly in the background so that when they click on that link, BOOM there’s the information that they need and you don’t lose any conversions because of slow load speeds.
Remember Amazon’s study where they found that a 0.1 increase in load speed led to a 1% drop in sales?
That’s how important it is to shave even fractions of seconds off of your load speeds.
Just a couple of side notes:
You can only do this for one link per page. So you can’t put that line of code into your <head> multiple times to load all of your pages. You have to pick one – and I would suggesting picking the one that is most commonly visited after that page.
So in this example, we found that Our Services was the most popular page visited after the home page so that’s the one we pre-loaded on the home page. Maybe our analytics tell us that once people go to Our Services, they most commonly go to the FAQ page next. So on the Our Services page, we would pre-load the FAQ page with <link rel=”prerender” href=”http://www.yourwebsite.com/faq”>
The last piece of clarification is that this prerender attribute is specific to Chrome. Firefox apparently missed the memo or else just wanted to make things harder so they use an attribute called “prefetch” rather than “prerender”.
But, no biggy.
We can simply change the line of code to include both and kill 2 birds with one stone:
<link rel=”prerender prefetch” href=”http://www.yourwebsite.com/our-services”>
Pretty cool, right?