Please Share your website URL!
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.