How can I improve the mobile version of my client's website in Webflow to increase its page score, considering that some recommended file formats are not supported?

To increase the mobile page score of your client’s website in Webflow, even when some modern file formats (like AVIF or WebP) aren’t fully supported, you can still make impactful optimizations using tools available within Webflow and complementary tactics.

1. Compress and Resize Images Manually

• Use compressed JPG or PNG files if you can’t use WebP or AVIF formats.
• Tools like TinyPNG, ImageOptim, or Squoosh can significantly reduce file sizes without noticeable quality loss.
• Scale images to display size before uploading; avoid oversized images.

2. Enable Lazy Loading

• Webflow automatically includes lazy loading (loading="lazy") on images added through the image element.
• For background images or CMS images, replace background images with image elements where possible to benefit from lazy loading.

3. Minimize Unused Interactions and Animations

• Review your Interactions panel and remove unused animations, especially those that impact initial load.
• Avoid using heavy Lottie files or overly complex animations on mobile unless essential.

4. Use System Fonts

• Replace custom fonts with system fonts (e.g., Arial, Helvetica) for faster rendering on mobile.
• If brand guidelines require a specific font, limit weights/styles to only what's necessary.

5. Optimize Fonts in Project Settings

• In Project Settings > Fonts, remove unnecessary font files and weights.
• Use WOFF2 format if hosting fonts externally.

6. Reduce JavaScript and Third-Party Scripts

• Minimize or defer use of third-party scripts like chat widgets or trackers—these often slow mobile load.
• Use defer or async settings wherever possible when embedding code via Page Settings > Custom Code.

7. Limit Use of Large Background Videos

• Avoid video backgrounds on mobile or use image fallbacks that display only on small breakpoints.
• Use visibility controls in the Style panel to show lighter content alternatives on mobile.

8. Optimize CMS Collections

• Don’t load too many CMS items on mobile—limit collection lists to essential content.
• Use pagination or load more buttons instead of loading the full collection.

9. Enable Webflow’s Minify Options

• Under Project Settings > Hosting, enable:
• Minify HTML
• Minify CSS
• Minify JavaScript
• Use secure frame headers
• Enable gzip compression

10. Test With PageSpeed Insights and Adjust Per Report

• Use Google PageSpeed Insights or Lighthouse to check mobile performance.
• Focus on:
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Total Blocking Time (TBT)
• Avoid relying on unsupported file format suggestions (like AVIF) if you’re unable to convert—improving layout shift, load order, and image size still has major impact.

Summary

To improve mobile performance in Webflow without using unsupported formats, focus on image compression, lazy loading, reducing scripts and font weights, and minifying assets through Webflow settings. This approach still yields strong performance gains—even without next-gen file formats.