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?
TL;DR
- Compress and resize images before upload, enable lazy loading, and leverage Webflow’s responsive image handling.
- Use SVGs for simple graphics, minimize animations, and limit font styles with font-display: swap.
- Hide heavy elements on mobile, remove unnecessary scripts, and defer non-critical code.
- Stick to well-optimized JPG/PNG formats and avoid duplicating WebP/AVIF versions if unsupported.
To improve the mobile version of a Webflow website and increase its PageSpeed score, especially when some file formats (like AVIF or WebP) are not supported directly, you can optimize performance using alternative strategies.
1. Optimize Image Settings Within Webflow
- Use Webflow’s built-in image compression by uploading high-quality images and letting Webflow generate responsive image variants (via the
srcsetattribute). - Resize large images manually before upload—target proper dimensions (e.g., max width 1920px for background images).
- Use lazy loading by setting the image’s Loading option to Lazy in the Element Settings Panel.
2. Leverage SVGs Where Possible
- Convert simple images, icons, and logos to SVG format, which is lightweight and scales well for mobile.
- Use inline SVGs when possible to reduce HTTP requests and improve styling control.
3. Eliminate Unused or Unoptimized Animations
- Avoid excessive interactions or animations, especially on mobile.
- Reduce use of scroll-based animations or set them to trigger only on desktop devices.
- Use limit motion preferences (
prefers-reduced-motion) if needed to respect mobile device performance.
4. Use Font Optimization Techniques
- Limit font weights and styles included in your project (e.g., only use regular and bold).
- Turn on font display: swap in Webflow’s custom code area to avoid blocking text rendering.
- Prefer system fonts when branding allows, to avoid loading external files entirely.
5. Clean Up Unnecessary Elements for Mobile
- Hide large background videos or complex elements on mobile using visibility settings.
- Create mobile-optimized versions of hero sections or feature grids to reduce content weight on small screens.
6. Minimize and Control External Scripts
- Remove unnecessary third-party scripts such as chat widgets or tracking tools not essential for mobile.
- Defer non-critical scripts using the Before </body> tag section in Webflow’s Custom Code settings.
- For performance-heavy elements like YouTube embeds, use link previews or thumbnails with
data-srcloading patterns.
7. Set Appropriate Browser Caching
- While Webflow manages caching, make sure that your assets are clean and not duplicated or excessively replaced on updates, which triggers re-caching unnecessarily.
8. Use a Fallback for Unsupported Formats
- If WebP or AVIF are not supported in your workflow, use lightweight JPG/PNG and let Webflow handle responsive variants.
- Avoid managing both WebP and JPG versions manually in Webflow—it adds complexity without major gains if you optimize properly.
Summary
To boost the mobile PageSpeed score in Webflow without using unsupported formats like AVIF, focus on compressing and resizing images, limiting animations, reducing heavy mobile assets, optimizing fonts, and cleaning unused code. Webflow’s automatic responsive image features and lazy loading go a long way, so leveraging those properly is key.
