Webflow Performance: Speed Optimization, Images, and Core Web Vitals

Before making any changes, measure your current performance. Go to pagespeed.web.dev, paste your published Webflow site URL, and run the analysis. Run it twice — once for Mobile and once for Desktop using the toggle at the top of the results. Note the four Core Web Vitals: LCP (Largest Contentful Paint — target under 2.5s), CLS (Cumulative Layout Shift — target under 0.1), INP (Interaction to Next Paint — target under 200ms), and FCP (First Contentful Paint). Screenshot or write down the scores before optimizing. The Diagnostics section below the scores lists specific issues ranked by impact — this is your prioritized to-do list.

Images are almost always the #1 cause of poor LCP scores on Webflow sites. Open the Asset Manager (cloud icon, left toolbar). Select all images by clicking the first image, then Shift+click the last to select a range (or Cmd+A to select all). Click the Compress button in the top bar. Choose WebP for broad compatibility or AVIF for the smallest file sizes (AVIF supported in all modern browsers as of 2024). Click Compress — Webflow will replace the original files with compressed versions across the entire site automatically. Also check that all inline Image elements have Style Panel → Size → Loading set to 'Lazy' (Eager for hero/above-fold only). Access this via Element Settings (D) → Loading.

Every Google Font weight you use (Regular, Bold, Italic, SemiBold, etc.) is a separate HTTP request that can block page rendering. Audit your fonts: in the Style Panel (S), check all classes for the fonts and weights used. In Project Settings (Webflow logo menu → Site Settings → Fonts → Google Fonts), remove any font weights that are not actively applied to any element. As a rule: use maximum 2 font families and 2-3 weights per family. If you need a font that is not on Google Fonts, upload it as a custom web font (WOFF2 format) via Project Settings → Fonts → Upload custom fonts — self-hosted fonts avoid the Google Fonts network request entirely. For Google Fonts, add a Preconnect link in Project Settings → Custom Code → Head Code to eliminate the DNS lookup delay.

1<!-- Add to Project Settings → Custom Code → Head Code -->
2<!-- Preconnect to Google Fonts for faster DNS resolution -->
3<link rel="preconnect" href="https://fonts.googleapis.com">
4<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5
6<!-- Optional: Preload your primary font file for even faster LCP -->
7<!-- Replace the URL with your actual Google Font URL from the network tab -->
8<link rel="preload" as="font" type="font/woff2"
9  href="https://fonts.gstatic.com/s/inter/v18/[your-font-hash].woff2"
10  crossorigin>

Third-party scripts injected in Project Settings → Custom Code → Head Code or Before </body> Code are the #1 cause of poor INP and blocked main thread scores. Go to Webflow logo menu → Site Settings → Custom Code. Review every script tag. For each script, ask: Is this actively used on the live site? Can it be loaded with async or defer? Can it be loaded only on specific pages (use Page Settings Head Code instead of Project Head Code)? Common offenders: abandoned analytics snippets, multiple chat widget scripts, A/B testing platforms, and social media embed SDKs loaded site-wide. Remove any script not actively used. For remaining scripts, add async or defer attributes.

1<!-- BEFORE: Render-blocking script -->
2<script src="https://third-party.com/widget.js"></script>
3
4<!-- AFTER: Non-blocking with defer (executes after HTML is parsed) -->
5<script src="https://third-party.com/widget.js" defer></script>
6
7<!-- AFTER: Non-blocking with async (executes as soon as downloaded) -->
8<!-- Use async for scripts that don't depend on DOM order -->
9<script src="https://analytics.example.com/script.js" async></script>

Loading both Webflow's Classic Interactions (Interactions 2.0) and the GSAP Interactions runtime on the same site loads two separate JavaScript runtimes. This happens when a site has some Classic interactions (created before Summer 2025) and some GSAP interactions (created after Summer 2025). To check: Interactions panel (H) → scroll through all page and element triggers. If you see a mix of Classic and GSAP animation types, you are loading both runtimes. The fix is to migrate all interactions to one system — either convert all to GSAP (recommended for new sites) or keep all as Classic. For sites that cannot migrate, at minimum limit GSAP interactions to only pages that need them.

CLS measures how much the page layout shifts during load — a target of under 0.1 is needed for a 'Good' score. Common CLS causes in Webflow: images without explicit width/height (causing reflow when they load), fonts swapping (FOUT — Flash of Unstyled Text), and elements whose size is determined by loaded content. Fix image CLS: Set explicit Width and Height (or use the Ratio setting) on all Image elements so the browser reserves space before the image loads. Fix font CLS: In Project Settings Head Code, add font-display:swap CSS for custom fonts, or rely on Google Fonts (which uses swap by default). Fix interaction CLS: Avoid animating Width, Height, Margin, or Padding properties in Webflow Interactions — use Transform (Move/Scale) and Opacity instead.

1/* Add to Project Settings → Custom Code → Head Code in a <style> tag */
2/* Forces font-display:swap for all custom @font-face rules */
3<style>
4  @font-face {
5    font-family: 'YourCustomFont';
6    font-display: swap;
7    src: url('/fonts/your-font.woff2') format('woff2');
8  }
9</style>

Overly deep DOM nesting (elements nested 10+ levels deep) slows browser rendering. In Webflow, this often happens through nested sections inside containers inside divs inside more divs. Open the Navigator (Z) and collapse the tree — check for unnecessary wrapper divs. Remove any Div Blocks used purely for styling that can be replaced by applying the class directly to the parent element. For unused CSS: go to the Style Selectors panel (G) and click the broom/Clean Up icon — this shows classes with no elements using them. Delete unused classes to reduce the total CSS file size. Finally, check Project Settings → Custom Code for any site-wide CSS that might have grown with overrides across multiple iterations.

The LCP element is usually the hero image or background image visible in the initial viewport. Preloading it tells the browser to fetch it as a high-priority resource before the HTML is fully parsed. For inline hero images: select the Image element → Element Settings (D) → Loading → Eager (this prevents lazy loading on above-fold images). For background images set via Style Panel (which cannot be lazy-loaded natively), add a preload link tag in Project Settings Head Code or Page Settings Head Code. Use Chrome DevTools (F12 → Performance → LCP element) to identify the exact element triggering LCP before writing the preload tag.

1<!-- Add to Page Settings → Head Code for pages with a background image hero -->
2<!-- Replace URL with your actual asset URL from Asset Manager -->
3<link
4  rel="preload"
5  as="image"
6  href="https://uploads-ssl.webflow.com/[your-site-id]/[image-filename].webp"
7  type="image/webp"
8>