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?

Webflow sites can feel sluggish in Google Chrome if large JPEG images are not optimized using newer formats like WebP or AVIF, which Webflow currently doesn't auto-generate. Here’s how to improve performance manually and through Webflow settings.

​

1. Use WebP Images Manually

​

• Manually convert JPEGs to WebP using tools like Squoosh, TinyPNG, or ImageOptim before uploading them.
• Replace JPEGs with WebP versions in Webflow by uploading them in the Asset Manager as stand-alone files.
• Ensure correct filenames and alt text so SEO isn't impacted.

​

2. Optimize Image Dimensions and Compression

​

• Resize images to display dimensions before upload; avoid using oversized images scaled down in the designer.
• Use lossy compression tools (e.g., TinyPNG or ImageOptim) to reduce file size while retaining quality.
• In Webflow’s Image Settings, set Display Size to “Actual Size” to prevent browser scaling overhead.

​

3. Implement Lazy Loading

​

• Webflow auto-applies lazy loading (loading="lazy") on images, but make sure it's working by inspecting your site in Chrome DevTools.
• For any Important Images (above-the-fold), manually disable lazy-loading to prevent LCP (Largest Contentful Paint) delays.

​

4. Limit Custom Code and Third-Party Scripts

​

• Audit third-party scripts (e.g., chat widgets, analytics, embeds) using Chrome’s DevTools Performance tab.
• Defer or remove unused scripts, especially those that block rendering or load unoptimized assets.

​

5. Enable Webflow’s Image DPI Optimization

​

• Go to Project Settings > Hosting, and enable the Responsive Images feature (enabled by default).
• While this won’t generate WebP or AVIF, it ensures Webflow serves scaled versions of your images based on screen resolution.

​

6. Use Site Performance Tools

​

• Use Chrome’s Lighthouse Report or Web Vitals extension to assess real bottlenecks (e.g., LCP, FID, CLS).
• Use PageSpeed Insights to find if Chrome has specific issues with resource payloads.

​

7. Consider Advanced Hosting or CDNs

​

• While Webflow sites are hosted on AWS with global CDN by default, if performance issues persist, consider:
• Reverse proxy setup with Cloudflare for additional image rules or auto WebP conversion (requires technical setup).
• Exporting code and hosting externally with a service that supports on-the-fly AVIF/WebP conversion.

​

Summary

​

Webflow doesn't natively convert JPEGs to WebP or AVIF, which can lead to slower Chrome performance. To improve load speed, manually upload WebP images, compress and scale assets, use lazy loading intelligently, and audit scripts. Additionally, using external tools/CDNs for further optimization may help when native options are limited.