Set an Image Performance Budget

Designers want high-quality images, developers care about keeping load times in check and SEOs want more organic visibility. It's hard to balance these competing perspectives on images. This is where the concept of an image performance budget comes in. An image performance budget that can be used as a communication tool with stakeholders and developers to get them on board with image optimization. So, I'd like to go through the elements that make up an image performance budget and how it can be implemented.

Transcript

1. Image Performance Budget Myriam Jessier PRAGM speakerdeck.com/myriamjessier @myriamjessier
2. Banish Image Bloat Achieving Peak Performance with Image Performance Budgets
3. Bonjour, I’m Myriam Jessier ★ 8+ years in dev centers ★ 15+ years as a technical SEO ★ Lots of tentacles 3 ©Pragm | @myriamjessier
4. @myriamjessier You already know you want to connect with me on LinkedIn? Scan this
5. 0. THE BIG PROBLEM 1. ENTER THE IMAGE PERFORMANCE BUDGET 2. HOW TO IMPLEMENT IT Agenda @myriamjessier
6. 0 | THE BIG HAIRY PROBLEM
7. Designers want premium pixels, marketers want shiny and devs want a site that loads fast. @myriamjessier
8. Developers & SEOs are often caught in the middle, trying to balance these competing demands.
9. Before you slap an image optimization plugin on it and call it a day… @myriamjessier
10. 1 | THE IMAGE PERFORMANCE BUDGET
11. @myriamjessier An image performance budget sets limits and provides a useful framework for discussing performance with stakeholders. Automation can flag when the budget is crossed using Calibre or SpeedCurve. @myriamjessier
12. 12 Things to consider for the budget • The total size of images • The format • Image compression • Responsive images • Lazy loading • Number of images @myriamjessier
13. “A budget exists to reflect your reachable goals.” 13 ©Pragm | Source: Mozilla
14. “It's a tradeoff between user experience, against other performance indicators” Source: Mozilla
15. @myriamjessier Automation can flag when the budget is crossed For example: “Images should not be more than 100kb”
16. 2 | HOW TO DEFINE THE BUDGET
17. 17 Pick your metrics • Quantity-based metrics • Milestone timings • Rule-based metrics @myriamjessier
18. 18 Quantity-based metrics for images • Total Image Weight • Image Requests: total # of HTTP requests made to fetch images on a page. • Image Dimensions @myriamjessier
19. 19 Milestone timing metrics for images • Time to First Image: The time it takes for the first image to appear on the page. • Image Load Time: The time it takes for all images to fully load on a page. @myriamjessier
20. 20 Rule-based metrics for images • Image Format Efficiency • Lazy Loading • Cumulative Layout Shift @myriamjessier
21. Some budget examples • The images on our landing page must not cause any shift in layout, maintaining a Cumulative Layout Shift score under 0.1. • The images on our news page must be lazy-loaded to ensure an initial page load and interactivity time of under 2 seconds on a 3G connection. • The ecommerce product page must not include more than 150 KB of image content on mobile.
22. Establish a baseline @myriamjessier
23. Audit to know what works and how you compare to competitors. 23 ©Pragm |
24. 24 You need to test your findings @myriamjessier
25. 3 | HOW TO IMPLEMENT
26. Step-by-step instructions 1. Define your goals to guide the process: what do you want to achieve? Better UX? Keep the SEO team happy? Etc. 2. Establish a baseline: run an audit and figure out your baseline. 3. Set your budget: figure out your key metrics and thresholds 4. Optimize your images: go time! 5. Monitor performance: monitor the performance with tools. 6. Iterate: revisit and adjust your budget. 7. Educate your team: this includes designers, developers, content creators, etc.
27. An image performance budget has two levels: warning and error to manage performance proactively and reactively. 27 ©Pragm |
28. Like any budget, it involves trade-offs and prioritization. 28 ©Pragm | @myriamjessier REVISIT IT AS THE SITE EVOLVES
29. If something goes over a defined threshold…you can optimize it, remove it or not add it. @myriamjessier
30. Create an actionable budget Example : Shopify website. Tools: Google Lighthouse, CRUX report, and Google Search Console. • Identify the Current Performance: run a Lighthouse performance audit. • Analyzing Current Image Use: audit size, format, templates, etc. • Set a Performance Goal that is achievable considering current performance and image use.
31. @myriamjessier It's essential to monitor a mix of quantity-based and user-focused performance indicators.
32. @myriamjessier Monitor both the numerical measures, like total image weight and number of image requests Quantity-based metrics
33. @myriamjessier …and those directly influencing the user experience, like image load time and time to first image User-centric metrics
34. And then… 1. Create an image optimization strategy: formats, dimensions, responsive, compression, lazy load, etc. 2. Implement the strategy: Shopify has apps to help with this process. 3. Monitor performance: use Google Lighthouse to check your progress towards your goal. 34 ©Pragm |
35. CRUX provides user experience metrics for how real-world Chrome users experience things 35 ©Pragm | 🐙 @myriamjessier
36. 36 Use the Core Web Vitals report in Google Search Console to check Core Web Vitals to see how pages are performing. @myriamjessier
37. 37 Over time, your site will change, and user expectations and devices will evolve. @myriamjessier
38. 4 | CHECK OUT THE ANNEX
39. Annex 1. https:/ /wp-rocket.me/blog/perfo rmance-budgets/ 2. https:/ /www.keycdn.com/blog/w eb-performance-budget 3. https:/ /web.dev/performance-bu dgets-101/ 4. https:/ /addyosmani.com/blog/pe rformance-budgets/ 39 ©Pragm |
40. MERCI MYRIAM JESSIER myriam@pragm.co @tentaclequing @myriamjessier #brightonseo @myriamjessier Let’s work together