Overview

Part of the Website Performance Series

Improve Site Performance

In the previous article, Website Performance Series - Part 1, we’ve seen how a slow-loading website can have an adverse effect on your page’s conversions. This will lead to an increase in your visitor’s frustration prompting them to abandon your site for your competitor’s.

For the rest of this series, we will be talking about techniques to improve website performance, and NOT techniques for website optimization (using tools such as Optimizely, Adobe Target and Google Optimize). These tools are mainly used by marketing teams for experimentation to increase page and site conversions. Typically, you will only start optimizing your website with these tools once you have maximized your site’s loading speed.

Although these tools may ultimately improve page conversions, they may have a negative effect and can actually slow down your page to some extent, so it may be a counter-intuitive exercise, and best left to be discussed in more detail perhaps in a future post.

Discover your performance gaps

Google has produced several tools to help you discover gaps in your site performance. Because ultimately your site was designed with for an audience, and not just for one person, your site performance may be highly variable due to many factors and multitude of users.

Figure: Tools used for finding gaps in web performance

Visitor’s devices and network latency can affect your site performance however this might not be always obvious in a lab environment.

Google has built tools that can collect both lab data for discovering fundamental performance issues and field data for identifying real-world performance. Here’s a link to the following Google Speed Tools which contains a guide on usage.

Using a combination of these tools like Lighthouse, PageSpeed Insights and Test My Site can give you a pretty good idea of your site’s performance in all sorts of environments, and present you with suggestions to improve. The idea is you can run these tools repeatedly as you improve your site.

Tool: PageSpeed Insights by Google

PageSpeed Insights combines tests from Lighthouse (for lab data) and Chrome User Experience Report (for real-world field data) on both mobile and desktop devices and provides suggestions on how things can be improved.

Tool: Lighthouse by Google

Lighthouse is a tool that you can run against your site as it performs audits against performance, accessibility, PWAs and more.

It can be installed as a CLI and has a neat feature called LightWallet which allows you to create a performance budget to enable you to set build pass, warning or failure as you push your code through your CI/CD.

Setting your performance budget

It’s great to be able to run all these tools to help us improve our sites, however, if we don’t persist with these efforts, we will easily regress over time.

What’s good about Lighthouse is that you can add performance budgets and can easily build this into your CI/CD system. Anytime you go close or get over your set budget, you will know immediately, the fast feedback is there for one to take immediate action. This Lighthouse audit is called Keep Request Counts Low And File Sizes Small and as shown in the image below, produces a list of request count and sizes from different resource types that make up your page.

Keep Request Counts Low And File Sizes Small audit

And as shown in the following, where a project’s performance budget is specified, shows a summary of your results against your budget, and your results exceeding the budgets in RED.

And if you have specified a budget file, you will know your budget status

Conclusion

In this post we have explored some of the tools made available to us from Google. PageSpeed Insights combines the results from a lab-like environment (courtesy of Lighthouse), with real-world field data (from Chrome UX Report) for a result that is more representative of your audience and their devices.

Lighthouse, on the other hand is my pick for the most comprehensive tool available with additional points for also being very easy to integrate into CI/CD systems.

Because these tools make it extremely easy to run audits against your sites, there is no excuse!

Let’s get auditing now!

Resources

2023

Back to top ↑

2022

Back to top ↑

2021

Back to top ↑

2020

DynamoDB and Single-Table Design

9 minute read

Follow along as I implement DynamoDB Single-Table Design - find out the tools and methods I use to make the process easier, and finally the light-bulb moment...

Back to top ↑

2019

Website Performance Series - Part 3

5 minute read

Speeding up your site is easy if you know what to focus on. Follow along as I explore the performance optimization maze, and find 3 awesome tips inside (plus...

Back to top ↑