A Beginner’s Guide to Web Performance: 3

Part Three: Maintaining Perfection

Over the last few weeks, we’ve helped you identify and fix core issues, but now is the time to put together a plan to ensure you continue producing performative web experiences. Whether you’re looking to start your next project with a performance plan in place or are wondering how to keep improving your sites as you perform regular maintenance, this article will cover a variety of tools and services to keep you on the fast track.

Performance Budgeting

During the strategy phase of your next project, you’ll need to decide how much of a priority performance will be, as it will impact design and development decisions down the road. If your goal is to provide a quick and lightweight browsing experience, it is worth taking the time to plan out a performance budget. By now we all know that images and scripts are the cause of much of our performance overhead, so setting clear performance goals can help guide decisions around what components will be used, page by page. By placing performance as a priority in your initial planning, you can decide what tradeoffs need to be made to keep you on track with your performance budget.

Not sure where to start? Gather up scores from your sites and sites you think are fast. Compare the differences in load times, speed index (lower is better), requests, and overall size. Based off those findings, set reasonable goals for your next projects, or focus on improving scores on your current one. Using a tool like perfbudget can help keep you on track during development, by alerting you when you fail to meet your goals. Catching issues early will help you mitigate problems before shipping.

Monitoring Performance

Once you begin the development phase, you’ll rely on a combination of manual and automated strategies to ensure your site is performing optimally.

Development

Manual tools are limited for in-development sites, but verifying sections as they are built via Chrome Developer Tools can allow for quick pivots when performance shortfalls are discovered. Be sure to test with final content as soon as is possible with each of your projects, as you can see quickly which images or scripts may be a problem on your live site before they are released.

When pushing builds through a Continuous Integration system, including grunt-perfbudget in your development pipeline can alert you to failed performance builds automatically. It uses the WebpageTest API to complete performance testing on your project and help enforce your performance budget. Alternatively, you can use a private testing instance, which runs on your machines, for faster and private results. Integrating perfbudget into your projects will put performance front-and-centre, helping you meet your performance goals for 3G users while developing over high-speed or fibre connections.

Maintenance

Perhaps the least glamorous part of building websites is the maintenance phase, but it is also the phase in which there is the most potential to iterate over your performance improvements and tailor the experience for your users, using analytic tools to suss out the places most in need of a second look.

Once you’ve completed your initial performance optimizations, you’ll need to check back regularly to ensure your site is still performing as expected. With every bug fix or new feature, be sure to retest your site through PageSpeed Insights and WebpageTest to verify that there wasn’t an inadvertent performance decrease. If a new page is created, run that page through to collect your baseline scores, and be mindful of new images and new scripts, especially when added through tools like Google Tag Manager.

If your site is only receiving security updates for the CMS or server technologies, you should still check in on the performance of your site with every patch. Some server settings may be reconfigured by your host, some plugins or modules may need to be updated or replaced, and scripts included by Google Tag Manager may need to be cleaned up. Additionally, with new server softwares and protocols are rolling out regularly, you have even more options for performance optimizations.

Researching Performance

The web is getting faster, with features like service workers, the AMP project, and HTTP/2 being increasingly used today. We are challenging ourselves to consider faster ways of delivering content and cutting costs for users and on our hosting bills. Now that you’ve done all this performance work for yourself, keeping up with the technologies and strategies on the horizon is your next step.

The web performance community can be found across the web, on Twitter under #perfmatters, on Medium via the Web Performance tag, and in book form for more in-depth reading. Some of the most knowledgeable people and agencies I’ve read covering this extensive topic include Ilya Grigorik, co-chair of the performance working group for W3C with extensive talks and articles on performance for today and tomorrow; Tim Kadlec, principle author of perfbudget, who co-hosts a Path to Performance podcast with performant design advocate Katie Kovalcin; and Scott Jehl and the team at filament group who have written tutorials on performance optimizations highlighting new technologies and techniques. Their work in pushing this field forward is insightful and crucial as we develop a more performative web for every user.

In Conclusion

Over the past weeks, we’ve brought you through the first steps on your performance journey, from what issues to look for, how to solve them, and how to plan for performance for the future. The core principle of bringing a fast web experience to every user on any internet is challenging, but with the tools we’ve highlighted, we hope that the path to performance is clear. Fight for a fast web, champion performance advocates, and remember, #perfmatters.