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.

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).