Image Performance Budget Myriam Jessier PRAGM speakerdeck.com/myriamjessier @myriamjessier

Banish Image Bloat Achieving Peak Performance with Image Performance Budgets

Bonjour, I’m Myriam Jessier ★ 8+ years in dev centers ★ 15+ years as a technical SEO ★ Lots of tentacles 3 ©Pragm | @myriamjessier

@myriamjessier You already know you want to connect with me on LinkedIn? Scan this

0. THE BIG PROBLEM 1. ENTER THE IMAGE PERFORMANCE BUDGET 2. HOW TO IMPLEMENT IT Agenda @myriamjessier

0 | THE BIG HAIRY PROBLEM

Designers want premium pixels, marketers want shiny and devs want a site that loads fast. @myriamjessier

Developers & SEOs are often caught in the middle, trying to balance these competing demands.

Before you slap an image optimization plugin on it and call it a day… @myriamjessier

1 | THE IMAGE PERFORMANCE BUDGET

@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 Things to consider for the budget ● The total size of images ● The format ● Image compression ● Responsive images ● Lazy loading ● Number of images @myriamjessier

“A budget exists to reflect your reachable goals.” 13 ©Pragm | Source: Mozilla

“It's a tradeoff between user experience, against other performance indicators” Source: Mozilla

@myriamjessier Automation can flag when the budget is crossed For example: “Images should not be more than 100kb”

2 | HOW TO DEFINE THE BUDGET

17 Pick your metrics ● Quantity-based metrics ● Milestone timings ● Rule-based metrics @myriamjessier

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 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 Rule-based metrics for images ● Image Format Efficiency ● Lazy Loading ● Cumulative Layout Shift @myriamjessier

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.

Establish a baseline @myriamjessier

Audit to know what works and how you compare to competitors. 23 ©Pragm |

24 You need to test your findings @myriamjessier

3 | HOW TO IMPLEMENT

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.

An image performance budget has two levels: warning and error to manage performance proactively and reactively. 27 ©Pragm |

Like any budget, it involves trade-offs and prioritization. 28 ©Pragm | @myriamjessier REVISIT IT AS THE SITE EVOLVES

If something goes over a defined threshold…you can optimize it, remove it or not add it. @myriamjessier

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.

@myriamjessier It's essential to monitor a mix of quantity-based and user-focused performance indicators.

@myriamjessier Monitor both the numerical measures, like total image weight and number of image requests Quantity-based metrics

@myriamjessier …and those directly influencing the user experience, like image load time and time to first image User-centric metrics

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 |

CRUX provides user experience metrics for how real-world Chrome users experience things 35 ©Pragm | 🐙 @myriamjessier

36 Use the Core Web Vitals report in Google Search Console to check Core Web Vitals to see how pages are performing. @myriamjessier

37 Over time, your site will change, and user expectations and devices will evolve. @myriamjessier

4 | CHECK OUT THE ANNEX

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 |

MERCI MYRIAM JESSIER [email protected] @tentaclequing @myriamjessier #brightonseo @myriamjessier Let’s work together