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 images to WebP and compress them before uploading to Webflow.
- Remove unused JavaScript, limit custom code, and place scripts in the footer with defer/async.
- Minimize number and weights of loaded fonts and eliminate unused ones.
- Define explicit width and height on images to reduce layout shifts.
- Avoid render-blocking resources, reduce complex animations, and use Webflow’s native features for better performance.
Improving your Lighthouse score in Webflow involves several optimizations around image formats, JavaScript, fonts, and site speed. Here's how you can address each area using Webflow's tools and best practices.
---
1. Convert Images to Next-Gen Formats
- Use WebP format for all raster images (JPEG, PNG alternatives).
- In Webflow, most images you upload remain in their original format—convert images to WebP using online tools (e.g., Squoosh or TinyPNG WebP conversion) before uploading.
- Replace older formats in Asset Manager with WebP versions.
---
2. Remove Unused JavaScript
- Audit third-party scripts (e.g., custom embeds, Google Tag Manager, chat widgets). Remove any that are no longer necessary.
- Disable unused interactions/animations inside Webflow Designer to prevent unnecessary JS execution.
- Keep custom code minimal in the Page Settings > Custom Code section and consider lazy-loading heavy scripts using a
setTimeout()or loading them on page interaction.
---
3. Eliminate Render-Blocking Resources
- Go to Page Settings > Custom Code, and ensure that custom CSS and JS are placed in the Footer section instead of the Head.
- Use
deferorasyncwith<script>tags where possible (if adding custom scripts manually). - Avoid using heavy external fonts or scripts in the
<head>.
---
4. Efficiently Encode Images
- Compress images using tools like TinyPNG, ImageOptim, or Squoosh before uploading.
- In Webflow, image compression is not automatic—this must be done externally.
- For CMS images, use Webflow's responsive image feature, which auto-generates different sizes and serves the most appropriate one.
---
5. Reduce the Number of Fonts on Page Load
- Go to Project Settings > Fonts and remove unused fonts.
- In Webflow Designer, set a limited number of fonts (1–2 font families max) across your project styles.
- Avoid loading multiple font weights or styles. Stick to essential weights (e.g., Regular and Bold only).
---
6. Improve Site Speed with a Global CDN
- Webflow automatically hosts your site on Fastly CDN and Amazon CloudFront. No additional action required.
- Make sure SSL is enabled in Hosting Settings to activate optimized global delivery.
- Avoid embedding large third-party resources, which are not cached by Webflow’s CDN.
---
7. Define Explicit Heights and Widths for Images
- Use Webflow Designer to set pixel or percentage values for width and height directly on image elements.
- This helps prevent layout shifts and improves Cumulative Layout Shift (CLS) metrics.
- Enable "Set image as background" sparingly and prefer using plain
<img>elements with set dimensions.
---
8. Minimize Main Thread Work
- Limit animations and page interactions, especially those with scroll or hover triggers.
- Use Webflow’s native interactions instead of custom JavaScript when possible.
- Avoid overloading pages with large numbers of DOM elements, Lottie animations, or complex component nesting.
---
Summary
To optimize your Webflow site's Lighthouse score, convert and compress images, reduce unnecessary scripts, minimize fonts and render-blocking CSS/JS, and set dimensions on images to limit layout shifts. Webflow’s built-in CDN helps with fast global delivery, but careful asset and layout management is key to high performance.