Struggling with Mobile Page Speed on Webflow – Need Help with Optimization!

Hi everyone,

I’m currently working on a project in Webflow and trying to improve the page speed of my site. I’ve already implemented several optimizations, such as:

  • Compressing and optimizing images
  • Removing unused classes and interactions
  • Using async and deferfor scripts
  • Enabling lazy loading for images

While the desktop page speed score is good, the mobile page speed is still very low. I’d appreciate any advice or suggestions on what else I can do to improve the mobile page speed.

Here are the relevant links:

Additional Details

Thank you so much for your help!

Your mobile site has an amazing load speed on my end this may be an issue with your device! Everything also seems to be optimized very well. With that said I hope that quells any worries you may have had about load speed.

1 Like

Hi @craig_strickland,

Thank you for checking the site and for your feedback! I’m glad to hear the load speed looks great on your end—that’s reassuring. However, the PageSpeed Insights score for mobile is still quite low, and I’m concerned it might affect the user experience for visitors with slower networks or less powerful devices.

I’m looking into additional optimizations such as:

  • Eliminating render-blocking resources: Ensuring all critical CSS is inlined and deferring non-essential scripts.
  • Font loading optimization: Using font-display: swap and preloading key fonts.
  • Reducing main-thread blocking time: Identifying heavy JavaScript processes and deferring or optimizing them.
  • Minimizing third-party requests: Assessing if any scripts can be delayed or removed.

If you have any further suggestions or tools you’d recommend, I’d love to hear them!

Thanks again for your time and support!

Hi @hiten_makvana ,

It looks like you’ve already made great progress with your optimizations! After reviewing the Google PageSpeed Insights results, it seems that the mobile performance, especially the LCP (Largest Contentful Paint) score, could still use some improvement. One key factor is the hero banner image, which is likely slowing things down. This image is prioritized to load first, causing delays in the rest of the content.

Another potential issue could be font loading. To avoid delays, you can use the font-display: swap property in your custom code. This ensures that text is displayed using a fallback font while the custom font loads, improving both user experience and performance.

Optimize Hero Image: Compress it with tools like TinyPNG or convert it to WebP for faster loading.

Use Font-Display Swap: Add this to your custom code to improve font loading:

@font-face {

font-family: “Your Font”;

src: url(“your-font-url.woff2”) format(“woff2”);

font-display: swap;

}

Lazy Load Other Images: Ensure non-critical images load after the main content.

Minify CSS & JS: Reduce file sizes to improve load times.

After appying these changes on the website, check your site’s performance again to check the impact on Google’s Core Web Vitals like LCP, CLS, etc… and get more actionable suggestions.

Alternative, if you do not want to invest much time on optimizing yourself, you can try our speed optimization tool called Website Speedy that comes with 14 days trial. It will do the optimization automatically for you.

(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)