Creating an engaging ecommerce website requires using alluring photos, but the way these images appear on your website is critical in creating an outstanding user experience. In this episode of Ecommerce Essentials, Developer Advocate Alan Kent speaks to six tips you can use to optimize images on your website. He’ll explore the important concept of Cumulative Layout Shift (CLS), common problems with static images, solutions to these issues, and more!
Chapters:
0:00 – Intro
0:46 – Tip #1: Eliminate image Cumulative Layout Shift
3:56 – Tip #2: Correctly size your images
5:28 – Tip #3: Use the best image file format
7:17 – Tip #4: Compress images appropriately
8:22 – Tip #5: Cache images in the browser
9:37 – Tip #6: Correctly sequence your image downloads
12:59 – Wrap up
URLs:
Cumulative Layout Shift → https://goo.gle/39JgESb
Core Web Vitals → https://goo.gle/3kMXH3m
Chrome usability report (CrUX) → https://goo.gle/3kNwCwO
Page speed insights report → https://goo.gle/3MTYJpX
Browser support for WebP → https://goo.gle/3KOOTVa
Online image compression analysis tool → https://goo.gle/3OZUT0z
Image compression deep dive → https://goo.gle/3LTNVIj
Improving Largest Contentful Paint → https://goo.gle/3vNsnrs
Watch more episodes of Ecommerce Essentials → https://goo.gle/EcommerceEssentials
Subscribe to the Google Search Central Channel → https://goo.gle/SearchCentral
#EcommerceEssentials #imageoptimization #GoogleSearch
source
Nice! this video really helpful to understand page speed insights issue.
Great tips, thanks.
Brillant Explanation Alan, Thanks
Best way to reduce file size of the image and compress to the maximum is to have image as PNG and then convert as WEBP, Ive tested JPG to WEBP result is bad, so best conversion is PNG to WEBP
Always enjoy watching these. 💯
thank you
Great video! Thank you!
Content shift happens in my gmail all the time with the ads. I've clicked a personal email only to have the page shift and it opens an ad. 😢
6:25 page speed
6:50 can I use
8:00 squoosh
Thanks!so informative
Saya berharap ada terjemahannya dalam bahasa indonesia…terimakasih
Intresting 👍
Finally, I understand what all this means. Thank you for the concise and understandable video.
How to turn off the native lazy loading of the hero image in WordPress
Informative
Geniales consejos, ojalá que tuviese un traductor en español, imagino que la comunidad de suscriptores aumentaría. Gracias
If something is annoying to users, it’s annoying to Google.