Faster home page: fix a slow hero image
What the client asked
The home page feels slow on phones. Lighthouse shows a poor Largest Contentful Paint (LCP) score.
How I solved it
The hero image was the LCP element. It was a CSS background image with lazy loading, so the browser found it late.
I changed it to an <img> made with the image_url and image_tag filters. In the first section it loads eagerly with fetchpriority: 'high'. I added widths and sizes, so phones download a smaller file.
Images further down the page keep loading: 'lazy'. To check the result, open Chrome DevTools and use Performance > Insights. It shows the LCP element and its load delay.
Tech
- Liquid
- image_tag
- Lighthouse
- Chrome DevTools