Layout shift / CLS

Cumulative Layout Shift (CLS) measures how much elements move during page load. Dost's defaults score CLS < 0.1 — anything higher usually traces to one of these:

Common causes

1. Third-party app embeds with no reserved space (most common)

   • Trustpilot widget, Klaviyo signup, chat bubbles
   • Fix: wrap in a fixed-aspect-ratio div via Custom Liquid

2. Custom fonts loaded with font-display: swap for the heading

   • The heading reflows when the custom font swaps in
   • Fix: heading and body fonts in Dost use optional by default (no swap). If you've changed this in Custom CSS, revert.

3. Images without width and height attributes

   • Built-in sections always set them. Custom Liquid sections may not.
   • Fix: add width and height matching the image's intrinsic dimensions

4. Header transparent → solid swap

   • Brief padding shift when sticky kicks in
   • Fix: usually invisible (transition handles it). If visible, ensure your hero image has a stable height.

Diagnose

Chrome DevTools → Performance tab → Record load → look for "Layout Shift" entries. Each entry shows the element that moved.

My sticky header doesn't stay pinned

position: sticky is sensitive to ancestors. Make sure no parent of #header-sticky has any of these applied via custom CSS or an app:

• transform
• filter
• perspective
• overflow: hidden (or auto)

Each one creates a new containing block / scroll container that breaks sticky positioning. The fix is to remove the offending property from the ancestor, not from #header-sticky itself.

Customizer color panel looks stale after upgrade

After pulling a new settings_schema.json (which is what migrated Dost from individual colour pickers to schemes), the Shopify theme customizer can hold onto the old setting tree until you restart the dev server. Run:

shopify theme dev --reset

The --reset flag forces the customizer to rebuild from the current schema. You only need to do this once per upgrade.

Tips

• Run Lighthouse mobile audit periodically. CLS drifts when you add apps.
• If CLS > 0.25, identify the worst offender and isolate (disable the app temporarily, re-test).