Make the largest element on the page load faster on Shopify

Why it matters

Largest Contentful Paint is how long visitors wait before the main image or heading shows, and the value is above the good threshold. A few changes to the main image and caching usually bring it into the good range.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

1. Use the theme editor (Customize) to check the first section. Upload the hero image at about the size it is shown at, because Shopify's CDN serves it in modern formats and at the right widths for the screen. A huge original makes it slower, not better.
2. Make sure the first image is not set to load lazily. Many themes let you choose the image ratio and loading behaviour in the section's settings; the first image should load immediately. Update the theme to its latest version, because themes receive speed fixes.
3. Remove apps you do not use, and delete leftover app code in the theme files (Online Store, Themes, Edit code). Apps that add scripts to every page are a frequent cause of slow loading.
4. Server speed and caching are managed by Shopify and cannot be tuned by the store, so concentrate on images, apps and theme settings.

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Core Web Vitals check
• Make the largest element on the page load faster
• Stop the page layout from jumping while it loads
• Stop the page layout from jumping while it loads
• Make the page respond faster to clicks and taps
• Make the page respond faster to clicks and taps
• Reduce the JavaScript that blocks the page while it loads
• Reduce the JavaScript that blocks the page while it loads
• Collect real-user speed data for your site