How can I optimize my Webflow site to improve my Lighthouse score? Specifically, I need help with converting images to next-gen format, removing unused JavaScript, eliminating render-blocking resources, efficiently encoding images, reducing the number of fonts loading on page load, improving site speed with a global CDN, defining explicit heights and widths for images, and minimizing main thread work. Thank you!
TL;DR
- Convert and compress images to WebP, set explicit image dimensions, and enable lazy loading to improve loading performance.
- Limit custom code, defer non-critical scripts, reduce font variants, and rely on native Webflow components and CDN hosting to minimize render-blocking and main thread work.
Optimizing a Webflow site for a better Lighthouse score involves streamlining assets, prioritizing performance, and leveraging Webflow’s built-in tools. Here’s how to target each specific area you've mentioned:
1. Convert Images to Next-Gen Format
- WebP is the preferred next-gen image format. Webflow automatically converts JPG and PNG images to WebP for published sites.
- Steps:
- Upload high-quality JPG or PNG images to the Webflow Designer.
- On publish, Webflow generates optimized WebP versions automatically—no extra plugin needed.
- Use lazy loading (enabled by default in Webflow for image elements) to prevent off-screen images from loading immediately.
2. Remove Unused JavaScript
- Minimize custom code where possible, and avoid injecting bulky third-party scripts (especially marketing or tracking tools) unless absolutely necessary.
- Steps:
- Go to Project Settings > Custom Code and remove any scripts in
<head>or<body>that aren’t critical. - In the Designer, reduce or eliminate custom JavaScript within embed elements.
- Consider replacing third-party features (e.g., sliders or forms) with native Webflow components.
3. Eliminate Render-Blocking Resources
- Webflow already minifies CSS and JavaScript and loads them asynchronously where possible.
- Steps:
- Keep styles inside the Webflow Designer instead of embedding large CSS blocks.
- Avoid linking to external CSS files in the
<head>unless they’re critical. - Defer or move non-critical scripts to the end of the
<body>.
4. Efficiently Encode Images
- Use tools like TinyPNG, Squoosh, or ImageOptim to compress images before uploading them into Webflow.
- Even though Webflow optimizes images, pre-compression ensures smaller source files, which results in faster loading.
- Avoid uploading unnecessarily large images. Use dimensions close to actual display size.
5. Reduce Number of Fonts Loading on Page Load
- Every font weight/style is an extra request.
- Steps:
- Go to Project Settings > Fonts and limit to only 1–2 font families with minimal styles (e.g., regular, bold).
- Remove any unused font variants in the Style Manager.
- Use system fonts where possible to eliminate external font requests.
6. Improve Site Speed with a Global CDN
- Webflow hosts all sites on Fastly and AWS CloudFront, both of which are global CDNs, so this is handled automatically.
- Ensure that your site is published to Webflow’s default hosting, not just exported and hosted elsewhere, to benefit from this performance.
7. Define Explicit Heights and Widths for Images
- Always set width and height size attributes for images, especially for inline images (e.g., in Rich Text blocks).
- Use the Size panel to define fixed dimensions or aspect ratios.
- In custom code, always add
width="" height=""to<img>tags to prevent layout shifts.
8. Minimize Main Thread Work
- Limit use of custom JavaScript that runs on page load.
- Avoid large animated elements that trigger constant layout recalculations or paint operations.
- Remove unused or heavy CMS items from the page — large CMS collections can slow down rendering performance.
- If animations are essential, prefer Webflow’s native interactions which are generally GPU-accelerated and less taxing than JavaScript-based options.
Summary
To optimize your Webflow site for Lighthouse, focus on compressing and pre-formatting images in WebP, using fewer fonts and scripts, defining explicit image dimensions, and using Webflow’s built-in performance tools like lazy loading and CDN hosting. Regularly audit your site with real Lighthouse runs to track specific gains, and remove or simplify anything not essential to the user experience.