The Problem: A Beautiful Site That Google Flagged as Slow
A B2B SaaS client came to us with a Webflow marketing site that looked exceptional but had a Largest Contentful Paint of 3.0 seconds on mobile. Google Search Console flagged 80% of their pages as 'Poor' for Core Web Vitals. Organic traffic had plateaued, and they suspected performance was the bottleneck. We ran a full audit and identified five changes that brought LCP down to 1.8 seconds in three weeks.
Step 1: Identifying the LCP Element
The first step is always identifying what the LCP element is. Using Chrome DevTools Performance tab, we recorded a page load and found the LCP element was a 2.4 MB PNG hero image at 3840x2160 pixels—far larger than needed. The image was set to lazy load (Webflow’s default for non-background images), which delayed it even further because the browser waited until the image entered the viewport before fetching it.
Step 2: Optimizing the Hero Image
- Resized the hero image from 3840px to 1920px wide (2x the max display width).
- Converted from PNG to WebP, reducing file size from 2.4 MB to 145 KB.
- Disabled lazy loading on the hero image in Webflow’s image settings.
- Added fetchpriority='high' as a custom attribute to tell the browser to prioritize this resource.
This single change dropped LCP from 3.0s to 2.2s—a 27% improvement. But we were not done.
Step 3: Eliminating Render-Blocking Fonts
The site used three custom font families loaded via Webflow’s font manager: a display font for headings, a sans-serif for body, and a monospace for code snippets. All three loaded in the
as render-blocking resources. We reduced this to two families (dropping the monospace, which appeared on only two pages) and added font-display: swap via a