How to fix Cumulative Layout Shift (CLS) error

Topic summary

The discussion centers on resolving Cumulative Layout Shift (CLS) errors that negatively impact website performance scores in Google PageSpeed Insights.

Primary Solution Identified:

  • Always add explicit width and height attributes to image and video elements in HTML
  • This allows browsers to reserve proper space before content loads, preventing unexpected layout shifts
  • Alternative: Use CSS aspect ratio boxes to reserve space

Implementation Details:

  • For static images: Add width/height directly in HTML tags (e.g., <img src="image.jpg" width="640" height="360">)
  • For Shopify stores: Apply attributes in liquid template code, particularly in loops or blog sections
  • Avoid inserting content above existing elements except during user interactions
  • Prefer CSS transform animations over property changes that trigger layout shifts

Practical Concerns:

  • Multiple users managing stores with 1000+ images seek bulk solutions rather than manual file-by-file fixes
  • No specific Shopify app was identified for automated implementation
  • Several store owners requested direct assistance with their specific sites

Status: The thread remains open with users seeking more detailed implementation guidance and scalable solutions for large image libraries.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hey! This is exactly the issue I am having on my site based on Google inspecting traffic. I am not a dev so I am not sure I understand how to fix the problem. I hope you don’t mind me asking for clarification: when you say Always include size attributes on your images and video elements do you mean the file name should include the size of he file? And since I am in the process of bulk compressing all my photos, can I fix this in bulk? Is there a Shopify app you reco using for this? One that would help me re-name correctly all the files? Thanks for your help! :slightly_smiling_face: