Passing Core Web Vitals: A Resizing, Cropping, & CLS Fix
Client: A high-end “Interior Design” firm with a visually stunning (but “broken”) portfolio site.
Challenges We Faced
The client’s site was a “pretty” portfolio that was unusable on mobile and failing all Page Speed tests:
Failing All Core Web Vitals
The GSC (CWV Report) showed 100% of their URLs were “Failing.”
High CLS (Cumulative Layout Shift)
Images would “pop in” as the page loaded, causing the text and buttons to jump around, creating a frustrating UI/UX.
Abysmal Page Speed
The homepage had 20MB of uncompressed images. Google PageSpeed Insights score was 15.
No Image Resizing Service
They were serving 4000px-wide, 5MB images in a 600px container on mobile.
No Lazy Loading
All images loaded at once, making pages slow and frustrating users, especially on mobile devices.
Pass Your Core Web Vitals
“Is your beautiful site failing Core Web Vitals? Our image optimization services will fix your CLS, resize your images, and boost your speed.”
Our Approach – How We Solved These Challenges
Comprehensive Image Audit
We used Screaming Frog to find all oversized and uncompressed images.
Image Resizing Service & Image Cropping Service
We manually resized and cropped all 500+ portfolio images to the exact dimensions needed for their containers (e.g., 800px wide, not 4000px).
Technical SEO (Lazy Loading & CDNs)
We fixed the critical CLS issue by adding width and height attributes to all image tags in the code, “reserving the space” so the layout wouldn’t jump.
Next-Gen Formats (WebP, AVIF)
We converted all the new, resized images to WebP to maintain high quality at a low file size, which is key for web optimization images.
Results
| Metric | Before | After | Growth |
|---|---|---|---|
| Google PageSpeed Score (Mobile) | 15 | 88 | +388% |
| CLS (Cumulative Layout Shift) Score | 0.72 (Poor) | 0.05 (Good) | -93% |
| Mobile Bounce Rate | 90% | 55% | -38.8% |
Free Core Web Vitals Analysis
“Failing your CWV test? Request a Free PageSpeed Analysis and let our image optimization service company build your optimization plan!”
Advice for Marketers & Brand Owners
- A “pretty” site is useless if it’s too slow to load.
- CLS is a “silent killer” of user experience. You must reserve space for your images by defining width and height attributes in your HTML/CSS.
- An Image Resizing Service is critical. Never serve a 4000px image where a 600px image is needed. This is the biggest cause of slow web optimization images.
- Webflow Page Speed Optimization (or any platform) still relies on fundamentals: compression, resizing, and WebP.
Extra Factors That Made It Work
- Fixing the CLS by adding width/height attributes was the key technical win.
- The Image Resizing Service (not just compression) had the biggest impact on total page weight.
- The client’s high-end images looked just as good in WebP format but at 1/10th the file size.
