A Beginner’s Guide to Web Performance
Part One: Identifying Performance Issues
So you’ve committed to improving your website’s performance, but have no idea where to start. It can be an overwhelming task for beginners despite being an increasingly important feature for the modern web. As we’ve expanded our websites to accommodate a responsive landscape, exciting new media formats, and powerful data-gathering tools, our websites have more than doubled in size, growing from an average of 955 kB on January 1, 2012 to 2406 kB on July 1, 2016. There remains a spirited debate on what we can do to bring the overall weight of our sites down, but in this series, we’re going to focus on optimizing the delivery of what we’ve got. In the end, we hope to transform everyone into a (web) performance artist!
First, in Part One, we will focus on how to identify issues that may be causing your site to be less performative than the modern web deserves. Part Two will highlight strategies for fixing common issues or improving the perceived performance of your site. Lastly, Part Three will help you plan a performance budget so you can maintain your site to a specific performance standard. Ready? Let’s dive in!
Part One: What’s Going On Here?
Before we can start solving performance problems, we need to identify what issues we might have. To do that, we need to leverage tools that can help shine a light on what you can improve for your site. Follow along with this section, testing your website using each of the tools listed below. Nothing will highlight the similarities and differences between these tools better than a real live performance test.
PageSpeed Insights
Developed by Google, PageSpeed Insights offers a clean and simple, albeit strict, view of what can be improved for your website, with both mobile and desktop optimization suggestions. The results are based on a single view of your site, with the most critical issues outlined first and suggested fixes and successful performance measurements shown further down the page. It also allows you to download compressed versions of CSS, JS, and imagery, making it a great tool for those that are just starting on their performance journey. Perfect scores on PageSpeed Insights are extremely rare, so aim for a score of 85 or higher to be sure that your site is at peak performance.
WebPagetest
WebPagetest is a more fully-featured tool that provides both first view and repeat view results, showcasing how caching affects the performance of your site. For both views, WebPagetest offers a summary table of data about your website’s performance, including your Speed Index score, total requests, and relative cost of downloading over data. You can use the waterfall view to see how content on your site loads and reference content breakdowns to identify the weight of your resources. Using the repeat view to identify caching shortfalls makes this a more robust tool for continuous site performance monitoring. There is also a grunt tool that allows you to integrate their API with your deploys, so you can do more like fail builds on severe performance shortfalls or get a build-to-build breakdown of your site.
Chrome DevTools
Working on a local environment or needing to test a protected staging site? You can perform some in-browser testing using the Network tab in Chrome’s DevTool. This pane provides a waterfall view of your sites resource loading, can be configured to show screen captures of paint changes as your site loads, and allows you to artificially throttle your connection so you can test how quickly your page loads over various kinds of connections, like 3G or DSL (Pro tip: you can set custom values for quick and easy throttled testing; we recommend finding the average broadband and mobile data speeds for your country or market and testing against those). While it doesn’t provide suggestions of what to fix, it is the fastest way to measure how individual changes may affect the performance of your site, allowing you to try things out and quickly gauge the impact.
User Testing
If your end goal is to provide an experience that feels fast, then your performance testing isn’t complete until you’ve put it in front of human testers. While the analytics provided by the above tools makes for a powerful starting point, getting your site in front of users can help unearth further performance frustrations. Does the page load quickly but lag on inputs, like form submissions or AJAX calls? Do users expect speedy results on search queries but not mind delays in image loading? Putting your site to the test can help you narrow the scope of performance optimizations to make for the greatest benefit to your users.
Next Steps
For the bulk of readers, performance testing ends here. You are now armed with data about why your website is slow and can begin to formulate a plan on how to fix it. For some of you, however, you’re hooked on performance. How can you take this data to the next level?
If you’ve got competitors, run their sites through the suite of performance testing tools you’ve just familiarized yourself with and compare the results. As you look over the numbers, keep in mind that outright better scores are not the metric of success here. We’re looking for scores that indicate a just-noticeable difference, and hopefully in your site’s favour. A good approximation of this is to have a 20% difference between you and your competitor to stand out to your users, as determined by user testing based around the Weber-Fechner Law. Is their time to first byte 1.6 seconds, and yours 3? By aiming to decrease your TTFB to 1.9 seconds, you will fall within 20% of your competitor and your users will likely notice no difference between your sites. Similarly, does your site take 19 seconds to complete loading over 3G while your competitor’s site takes 20? Try to cut your load time down to under 16 seconds, to meaningfully increase the difference between the performance of the two sites.
Not sure how to fix the issues you’ve encountered through your performance tests? We’ve got your back. Continue to Part Two of our performance series and we’ll help shine a light on how to solve them!
