Performance budgets are an important control mechanism to keep web applications fast and efficient. Tammy Everts shares how to set them up and apply the latest practices for great results.
Show Notes
- Tammy Everts Website: https://tammyeverts.wordpress.com/
- Performance budgets –https://www.speedcurve.com/blog/performance-budgets/
- Performance budgets, pragmatically – https://csswizardry.com/2020/01/performance-budgets-pragmatically/
- Page bloat – https://www.speedcurve.com/blog/page-bloat-web-performance/
- Performance inequality gap – https://infrequently.org/2022/12/performance-baseline-2023/
- Performance plateau – https://www.speedcurve.com/blog/web-performance-poverty-line/
- WPOstats – https://wpostats.com/
Performance Budgets: More Than Just Dollars and Cents
The term “performance budget” might sound financially focused, but it actually refers to establishing clear limits on key technical metrics related to your website’s performance. Think of it like setting a spending limit on your credit card – you’re establishing boundaries to ensure things don’t spiral out of control. In this case, those boundaries help ensure your website loads quickly, functions smoothly, and provides a positive experience for your users.
Scott Moore interviews Tammy Everts, Chief Experience Officer at Speed Curve, who has over a decade of experience in performance engineering. Everts stresses that performance budgets are crucial for maintaining website efficiency and, consequently, user satisfaction. This is particularly important today as websites become increasingly complex with more images, videos, and interactive elements.
Why Performance Matters: It’s About More Than Just Speed
Slow websites can have a significant negative impact on user behavior. Research has consistently shown that slow load times lead to higher bounce rates, decreased user engagement, and ultimately, lower conversion rates. This translates directly to lost revenue and missed opportunities for businesses, especially those relying on e-commerce or online lead generation.
Everts highlights the connection between performance and user experience (UX), emphasizing that speed is just one part of the equation. A truly performant website is one that responds quickly to user interactions, doesn’t have elements jumping around unexpectedly (known as Cumulative Layout Shift or CLS), and loads core content quickly. This holistic approach to performance ensures users have a seamless and enjoyable experience, leading to greater satisfaction and loyalty.
The Misconception of Bandwidth Abundance
It’s tempting to assume that with the rise of high-speed internet connections like 5G and fiber optic, page size is no longer a significant concern. However, Everetts cautions against this assumption. While many users do enjoy fast internet speeds, a significant portion of the global population still relies on slower connections, especially in developing countries or on mobile devices. Large, resource-heavy websites can be incredibly frustrating for these users, creating a digital divide and excluding potential customers.
Everts recommends aiming for lean and efficient websites, citing Alex Russel’s research on “The Performance Inequality Gap” which suggests a maximum page size of 150 KB for HTML, CSS, images, and fonts, and no more than 350 KB for JavaScript. These targets may seem ambitious, but striving for them can help prioritize efficient coding practices and ensure a better experience for a wider range of users.
The Real-World Impact of Performance Budgets
Beyond the theoretical benefits, Everts provides concrete examples of how performance budgets have led to tangible business improvements. She recounts a case study involving a major US sports apparel retailer that saw a significant increase in conversions after implementing a performance budget and optimizing image sizes. This example demonstrates that investing in performance is not just a technical nicety, but a strategic decision that can directly impact a company’s bottom line.
Getting Started with Performance Budgets
If you’re convinced about the importance of performance budgets but unsure where to start, Everts offers several resources. Her comprehensive guide on the Speed Curve website outlines key metrics to track, strategies for setting realistic goals, and tools for monitoring performance. She also emphasizes the importance of correlating performance data with business metrics to demonstrate the value of performance optimizations.
The episode concludes by encouraging viewers to think critically about their own website performance and consider implementing a performance budget. By taking a proactive approach to performance, you can ensure a positive user experience, boost business outcomes, and stay ahead of the curve in the ever-evolving digital landscape.
Check out this other SMC Journal Episode about web performance and Google Core Web Vitals.
🔥 Like and Subscribe 🔥
Connect with me 👋
TWITTER ► https://bit.ly/3HmWF8d
LINKEDIN COMPANY ► https://bit.ly/3kICS9g
LINKEDIN PROFILE ► https://bit.ly/30Eshp7
Want to support the show? Buy Me A Coffee! https://bit.ly/3NadcPK
🔗 Links:
- Scott Moore Consulting: https://scottmoore.consulting
- The Performance Tour: https://theperformancetour.com
- SMC Journal: https://smcjournal.com
- DevOps Driving: https://devopsdriving.com
- Security Champions https://thesecuritychampions.com
- DevPerfOps: https://devperfops.org
- PerfCruise: https://perfcruise.com