Webflow sync, pageviews & more.
NEW

Is there a solution to improve the sluggish performance of Webflow websites in Google Chrome, considering the lack of AVIF or WebP support for JPEG images and the unsuccessful attempts to optimize Chrome's performance?

TL;DR
  • Manually compress JPEGs, enable lazy loading, and use third-party tools like Cloudinary to serve WebP with fallbacks.
  • Simplify animations, optimize font loading, audit with Chrome DevTools, and use a custom domain for better CDN performance.

Sluggish performance in Google Chrome on Webflow sites can often be tied to large image sizes or inefficient rendering, especially when WebP or AVIF formats are not utilized. Here's how to improve performance despite these limitations.

1. Use Compressed JPEGs with Manual Optimization

  • Manually compress JPEG files before uploading to Webflow using tools like Squoosh, TinyJPG, or ImageOptim.
  • Export JPEGs with optimized quality settings (e.g., 60–75%) to balance size and clarity.
  • Avoid letting Webflow handle all compression automatically, as it doesn't always reduce file size efficiently.

2. Prioritize Image Lazy Loading

  • Ensure all images are set to lazy load by using Webflow's built-in lazy loading attribute (loading="lazy").
  • Lazy loading delays offscreen images from loading until they're needed, which significantly boosts perceived performance.

3. Use a Utility for WebP Conversion & Fallback

  • Since Webflow doesn’t auto-generate WebP or AVIF, use a 3rd-party tool like Cloudinary or Uploadcare to deliver images in modern formats with JPEG fallback.
  • These tools auto-detect browser support and serve the best format, significantly improving load times in Chrome and other browsers.

4. Simplify Animations and Reduce DOM Complexity

  • Limit use of scroll-based interactions, Lottie animations, and complex native animations when performance is a concern.
  • Clean up unnecessary div wrappers and elements that may increase DOM depth, which slows Chrome rendering.

5. Audit and Adjust Fonts

  • Self-host fonts only when necessary. Otherwise, stick with Google Fonts and preload only used weights/styles.
  • Use font-display: swap in the custom code section to improve text rendering speed.

6. Use Chrome's Performance Tools

  • Open Chrome DevTools → Performance Tab → record page load to identify bottlenecks (e.g., long scripting time, layout shifts).
  • Watch for excessive JavaScript execution from embeds or custom code that may cause delays.

7. Publish to a Custom Domain (Avoid Webflow.io if Possible)

  • Webflow.io staging URLs may not have the same performance as those with custom domains using Webflow’s CDN.
  • Point DNS to Webflow's IPs (a) 75.2.70.75, (b) 99.83.190.102 and use www-prefixed primary domain to enable SSL and CDN features.

Summary

To improve Webflow site performance in Google Chrome without native WebP or AVIF support, use manual image compression, lazy loading, and third-party image delivery tools for modern formats. Additionally, simplify interactions, optimize fonts, and employ Chrome performance audits to identify and reduce render-blocking elements.

Rate this answer

Other Webflow Questions