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! ![]()
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.