Stop the page layout from jumping while it loads on Shopify

Why it matters

Cumulative Layout Shift measures how much the content moves around as it loads, and a poor value means visitors lose their place or tap the wrong thing. It is usually caused by elements that have no reserved space.

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. In the theme editor, set image ratios (in the section settings) instead of relying on the natural size of each upload, so slots keep a fixed shape while images load. Use images of the same shape in a collection or slideshow.
2. Look at apps that add banners, popups, review widgets or announcement bars. Choose an overlay position or reserve space for them in the theme, or remove the app. Delete leftover code in the theme files after you remove an app.
3. Update the theme to the latest version and avoid adding several custom font families, which can cause text to reflow.

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
• Make the largest element on the page load faster
• 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