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 <head> 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 <style> block in head custom code. We also preloaded the primary body font with a <link rel='preload'> tag.
Step 4: Deferring Third-Party Scripts
The site loaded five third-party scripts in the <head>: Google Tag Manager, Hotjar, Intercom, a cookie consent banner, and a social proof widget. Each script blocked the main thread during parsing. We moved all scripts except GTM to the page footer (body end code in Webflow) and loaded Intercom and the social proof widget only after user interaction using a small loader script that listened for the first click or scroll event.
// Defer non-critical scripts until first user interaction
function loadDeferred() {
// Intercom
const ic = document.createElement('script');
ic.src = 'https://widget.intercom.io/widget/YOUR_ID';
ic.async = true;
document.body.appendChild(ic);
// Remove listener after first load
window.removeEventListener('click', loadDeferred);
window.removeEventListener('scroll', loadDeferred);
}
window.addEventListener('click', loadDeferred, { once: true });
window.addEventListener('scroll', loadDeferred, { once: true });Step 5: Preloading Critical Resources
Finally, we added preload hints for the two most critical resources: the hero image and the primary web font file. These <link rel='preload'> tags in the <head> tell the browser to fetch these files immediately, before the CSS parser discovers them. Combined with the fetchpriority attribute on the image, this shaved another 200ms off LCP.
Results: Before and After
| Metric | Before | After | Change |
|---|---|---|---|
| LCP (mobile) | 3.0 s | 1.8 s | -40% |
| LCP (desktop) | 2.1 s | 1.2 s | -43% |
| Total page weight | 4.8 MB | 1.9 MB | -60% |
| Render-blocking resources | 8 | 2 | -75% |
| CWV pass rate (Search Console) | 20% | 95% | +75pp |
Within six weeks of these changes going live, the client saw a 22% increase in organic impressions and a 15% increase in organic clicks. The pages that moved from 'Poor' to 'Good' in Search Console saw the biggest ranking improvements, with three target keywords moving from positions 8–12 to positions 3–5.
Want the same results for your Webflow site? We run performance audits with guaranteed improvements.
Get a Performance Audit→
