Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Set an Image Performance Budget

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.

Myriam Jessier

September 06, 2024
Tweet

More Decks by Myriam Jessier

Other Decks in Marketing & SEO

Transcript

  1. Bonjour, I’m Myriam Jessier ★ 8+ years in dev centers

    ★ 15+ years as a technical SEO ★ Lots of tentacles 3 ©Pragm | @myriamjessier
  2. 0. THE BIG PROBLEM 1. ENTER THE IMAGE PERFORMANCE BUDGET

    2. HOW TO IMPLEMENT IT Agenda @myriamjessier
  3. Developers & SEOs are often caught in the middle, trying

    to balance these competing demands.
  4. @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
  5. 12 Things to consider for the budget • The total

    size of images • The format • Image compression • Responsive images • Lazy loading • Number of images @myriamjessier
  6. @myriamjessier Automation can flag when the budget is crossed For

    example: “Images should not be more than 100kb”
  7. 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
  8. 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
  9. 20 Rule-based metrics for images • Image Format Efficiency •

    Lazy Loading • Cumulative Layout Shift @myriamjessier
  10. 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.
  11. 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.
  12. An image performance budget has two levels: warning and error

    to manage performance proactively and reactively. 27 ©Pragm |
  13. Like any budget, it involves trade-offs and prioritization. 28 ©Pragm

    | @myriamjessier REVISIT IT AS THE SITE EVOLVES
  14. 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.
  15. @myriamjessier Monitor both the numerical measures, like total image weight

    and number of image requests Quantity-based metrics
  16. @myriamjessier …and those directly influencing the user experience, like image

    load time and time to first image User-centric metrics
  17. 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 |
  18. CRUX provides user experience metrics for how real-world Chrome users

    experience things 35 ©Pragm | 🐙 @myriamjessier
  19. 36 Use the Core Web Vitals report in Google Search

    Console to check Core Web Vitals to see how pages are performing. @myriamjessier
  20. 37 Over time, your site will change, and user expectations

    and devices will evolve. @myriamjessier
  21. 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 |