Responsibly harnessing the power of Prefetch using Google Analytics
If you browse the web today, there are many articles that explain what browser pre-loading is and how to use it, but very little explain how to actually use this feature in the real world. The ability to prefetch resources is powerful, but if used incorrectly it can turn out to be inefficient and chew through bandwidth. It's even more important to get this right for mobile devices, because the last thing we want to do is use all of our users' bandwidth!
When a user navigates to a web page, we can often anticipate what they are going to do next. Are they going to follow a link and navigate to another page? Do they drop off and navigate to another site at this point? By answering these questions, we are able to optimize the user's journey through our websites.
This is where the power of prefetching resources comes in. "Prefetching" allows us to simply load a file or URL before it's needed. Prefetching allows us to retrieve a file in the background while the user is interacting with a web page and because it is happening in the background, it won't affect what the user is currently doing which makes it a great way to speed up the next request that a user makes.
For example, the Google Dev Team try and guess the photo that you'll look at next in Picasa Web Albums and start downloading it as soon as possible using prefetching. This way they are able to show the photo as quickly as possible when you actually do navigate to it.
In this article, I am going to show you how you can use Google Analytics and resource prefetching to analyse and speed up the performance of your website. Using data from Google Analytics, I am going to analyse this website and predict which pages users are going to visit next - allowing me to use prefetch responsibly.
Google Analytics
It's important to start with your data first and determine the flow of users through your website. We want to be responsible web developers because prefetching too much will leave a bad impression for our users and they won't appreciate having their network clogged up.
If aren't familiar with Google Analytics, it is a free analytics tool that is easily set up and will give you a great insight into your users. Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic.
Once you have Google Analytics installed on your site, in the menu, choose Audience and then Users Flow.
You should be presented with an image that looks a little like the one below.
From the image above, we can see a flow of users through this website. This website is a blog and most of the incoming traffic is via SEO, which means the most common landing page for all users to this website is a blog page (with the url - /home/blogpost). Using this data in Google Analytics, I can predict that over 60% of all traffic to the blog page will navigate through to my home page.
This makes the most common first interaction for visitors to this site the following:
/home/blogpost -> /home
On the flip side, the second most common interaction is from my home page to a blog page.
/home -> /home/blogpost
Looking at the rest of the data for my website in Google Analytics, I can also see that any navigation to any other web pages is a bit hit-and-miss and I'm not able to accurately predict which pages might benefit from prefetching. Using this knowledge, I can now begin to optimize my site accordingly.
Understanding prefetch and prerender
In his book, High Performance Browser Networking, Ilya Grigorik goes into great detail and explains the different steps that the browser takes during resource pre-fetching.
Prefetching can be used to load images, scripts, stylesheets or even a webpage. Implementing this in the browser is very simple, and if we wanted to fetch a resource before we navigated to another page, you would do so with the following code:
You can also hint to the browser that a page should be prefetched by including the following tag:
However, if we wanted to render and download all of the resources for a webpage, we would use the following code:
Prerendering is a little bit riskier than prefetch. In the case of prerendering, the browser not only downloads the entire page, but also all of the necessary resources for that page. It also begins to render the page in memory (which is not visible to the user) so that when the request for the page is made, it will appear almost instantaneously. Prerendering is a great feature, but should only be done when there is a high confidence that the user will go to that page next.
When used correctly, prerendering can improve page load times, but it is the riskiest of the prefetching options - use it with caution! Although this technique is clearly not for every use case, many more sites could leverage this to improve the user experience.
Putting it all into action
Using the knowledge that we gained from Google Analytics, I am able to begin optimising this website accordingly.
/home/blogpost -> /home
Starting with the home page, the heaviest resources are the home page itself, a jQuery file and the the CSS style for the page. I can add the following markup to my blog page to prefetch those resources.
In the case of the navigation from the blog page to the home page, I could have used prerender, but because there is only a 60% chance that someone might navigate there, I prefer to play it safe and use prefetch.
/home -> /home/blogpost
On the reverse, I need to ensure that the journey from the home page to a blog page has had the appropriate resources prefetched. Looking at my markup, I know that the recaptcha file, an image for the Fast ASP.NET websites book and the page itself are the heaviest resources. I can add the markup accordingly.
Summary
Now that the changes are in place, it is important to test and measure. The good news is that Google Analytics has built in functionality to help you track and measure resource load times. Check out the user timings feature on the Google Analytics website for more information.
If you would like to dive a little deeper and learn more about preloading, I recommend checking out the following articles:
-
Ilya Grigorik's great presentation on prefetching resources.
-
Steve Souders talks about prebrowsing
-
The Google Developers Blog goes into more detail about prefetching
-
I also wrote an article about improving page load times with DNS prefetching
-
Andy Davies article about how the browser pre-loader makes pages load faster