Advanced performance and optimisation◿
Blog post
Please note: this blog post was written in 2017 so some information may be outdated.
Aim
To apply tools and techniques that can improve the performance of websites.
Objectives
- To understand perceived performance and how it can benefit your site
- To gain a basic understanding of Chrome's dev tools and how to monitor performance
- To apply resource hints that can be used to help improve performance
This blog post will be emphasising the importance of website performance on a much more advanced level than my previous blog post on this subject. It will cover tips and techniques every front-end developer needs to know, whether you are working on a large-scale website or even smaller projects. Because...
Faster is better, less is more
Back in November 2017, I was lucky enough to get tickets for a Harry Roberts advanced CSS and performance workshop (Figure 1).
Harry Roberts giving a talk on the tools and techniques you can use to monitor and improve website performance.
Harry spoke about the perceived performance of websites and explained how fast it is, and how fast it feels are two very different things. For example, the reason why mirrors were implemented into all elevators was to distract people during the ride; “In a usage survey, customers commented that the lifts were faster, although the speed, was, exactly the same” (ASTARLIFTS, 2017:online).
So how does the perceived performance of an elevator relate to websites?
Upon conducting further research, I found that Trainline "reduced overall latency by 0.3 seconds... This resulted in customers spending an extra £8m a year (Holt, 2016:7min 42). On top of this, an article from Double Click by Google shows that "53% of visits are abandoned if a mobile site takes more than 3 seconds to load" (Shellhammer, 2016:online). That's a big problem.
Statistics showing the probability of bounce rate increasing on mobile devices when performance is poor
These examples alone show how much more attention web performance is receiving now. Companies are willing to go to extensive lengths just to cut off milliseconds of load time. However, you may be wondering, "why should I bother"?
The moral side of performance
With the internet being so regularly used as it is today, it's imperative to understand that many of your sites' users may be:
- On a capped data plan
- Unable to download poorly optimised images
- Situated within a poor connectivity region
In order to make the web more accessibile for everyone, "we must give up thinking that we can know people's connective-contexts, and enable a web that's accessible regardless of connection speed" (Kalbag, 2017:32).
Another question every developer needs to ask themselves before releasing a live website is "am I prioritising my ads over my users"? This is known as 'header-bidding' and is evil, but sadly, quite common. "Publishers are already larding their pages with third-party ad tags, which have slowed down web pages and forced alienated readers to install ad blockers" (Bilton, 2015:online).
Now you may be wondering how you can improve the performance of your website. Luckily, Google Chrome dev tools allow us developers to monitor our load times and therefore, enables us to see what is slowing down the site. Let's take a look...
Google Chrome's inspector
Firstly, to open up Google Chrome dev tools you need to have an updated version of Google Chrome installed, then right-click anywhere on the page you want to test and click "Inspect". Once the window has opened up, make sure you click the "Network" tab and "Disable cache" (Figure 3).
Opening up Google Chrome dev tools and making sure disable cache is switched on
These dev tools can be especially useful in firstly, noticing whether any content of your page needs optimising (mostly images). Secondly, to understand what resource hints you should be using in order to make the most important files load first. You even have the option to throttle your own connection speed down to poorer connections (such as 3g and 4g) so you can do more insightful testing (Figure 4).
The option that lets you throttle your own connection speed for testing.
Resource Hints
Resource hints are single line additions that you can add to the <head> of your documents in order to tell the browser what to prioritise. These are essentially front-end freebies that every developer should be aware of.
Preload
See the Pen Preload by Sam Bindloss (@bindloss) on CodePen.
The use of 'preload' can be seen above and is used for anything needed within the page, but whose natural download point can be quite late (use chrome dev tools to see what content loads late). The rule of thumb I would stick to is to preload anything above the fold such as large banner images and fonts in order to at least display a UI skeleton for users' accessing your site on a slower connection.
Preloading is also especially useful for responsive images as you can choose which image to load at a certain screen width, rather than loading all of them at once. However, keep in mind that not all browsers fully support preloading yet.
Preconnect
See the Pen xWgGvP by Sam Bindloss (@bindloss) on CodePen.
Preconnecting "allows the browser to set-up early connections before an HTTP request is actually sent to the server. This, in turn, prevents roundtrip latency and saves time for users" (Jackson, 2018:online). In the example above I have also included DNS-prefetching as preconnect still isn't fully compatible with all browsers.
Prefetch
See the Pen Prefetch by Sam Bindloss (@bindloss) on CodePen.
Prefetching can request anything on subsequent pages to be loaded and will download it in the background. For example, if a large video file is on a subsequent page you can prefetch it so it can be added to the cache, enabling the video to download faster when the user arrives on that page.
Prerender
See the Pen zWNrVY by Sam Bindloss (@bindloss) on CodePen.
Prerendering allows you to prerender entire pages in the background. Be careful though, because if you are going to use this you need to make sure you anticipate the user's next move correctly. A good example would be to prerender the page that the main CTA (Call To Action) links to.
Evaluation
After developing a stronger understanding of these tools and techniques in monitoring and improving website performance, I decided to apply these tricks to my own website. As discussed earlier in this blog post about how important perceived performance can be, by preloading my large banner image I able to make it appear much sooner than before.
Before preloading
After preloading
Image displaying where the banner image laods from after using preload
In figure 5, you'll notice shorter, parallel loading times. This is what you want your site to be aiming for, by delaying the amount of time it takes for 1 connection to get to the next. HTTP 1.1 only allows us to make 6 connections at a time to avoid potential overloading issues. Your connections are valuable, so don't waste them.
Luckily, technology is always developing...
The future
HTTP2 will eventually be the most widely used network protocol as it "allows browsers to parallelize multiple downloads using only one connection" (Krummenacher, 2017:online). So you can imagine that in the future, there will be plenty more tips and tricks to increase website performance to keep up with the ever-changing demands of internet users around the world.
References
ASTARLIFTS. (2017) Do you know why lifts carry mirrors? [Online] [Accessed on 10th March 2018] http://www.astarlifts.com/en/blog-lifts/lifts-lifts/do-you-know-why-lifts-carry-mirrors
Bilton, R. (2015) WTF is header bidding? Digiday. [Online] [Accessed on 13th March 2018] https://digiday.com/media/wtf-header-bidding/
Holt, M. (2016) From Application Metrics to Customer Experience Metrics Fullstack Visibility. [Online video] [Accessed on 12th March 2018] https://www.youtube.com/watch?v=ai-6qwT6ES8&feature=youtu.be&t=462
Jackson, B. (2018) Resource hints - What is preload, prefetch and preconnect. KeyCDN.com [Online] [Accessed on 15th March 2018] https://www.keycdn.com/blog/resource-hints/
Kalbag, L. (2017) Accessibility for everyone. New York. A Book Apart.
Krummenacher, J. (2017) Quick wins for improving performance and security of your website [Online] [Accessed on 15th March 2018] https://www.smashingmagazine.com/2017/10/improving-performance-security/
Shellhammer, A. (2016) The need for mobile speed: How mobile latency impacts publisher revenue [Online] [Accessed on 12th March 2018] https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/