I’m fairly new to Webflow (and web design in general).
I just recently began creating landing pages for Google Ads. One of the problems that I am facing right now is very slow loading speeds on mobile devices.
I have been scouring the forums for answers, YouTube, Google, etc etc. I have come up with little improvement improvement in my score since then. Figured I’d give this little forum a shout to see who’s got the experience to diagnose the issues here.
I’ll include a screenshot of the PageSpeed Insights score that I got from one of the landing pages as well as a link to see the design.
Link: Link to see the designer
As you can see from the pictures above, there is a definitely need to reduce unused JavaScript code as well as reducing the impact of 3rd party code. Oddly enough, it appears that WebFlow hosting is having the biggest impact.
Please let me know what you need to know from me and I’ll gladly share any and all information.
I used to specialize in optimizing Shopify stores and without a doubt the biggest culprits were always inefficient media and overuse of apps.
It’s not that different in any website. Here you are using WEBP’s but I’m seeing some files there that are 10x the size I’d usually see for a full-sized WEBP image. You may have over oversized WEBPs or you may have set them to lossless, in any case you’d benefit from some tweaking there.
Likewise, you have a lot of scripts running ( the “apps” problem ). Analysis is essential but consider carefully your use of GTM, Hotjar, etc all in combination. I don’t know some of the others.
You might get some performance improvement on the Google scoreboard by deferring your maps load until after the rest of the page loads, without much UX detriment .
Not much you can do about webflow.js but there are some tricks mentioned here to defer that as well if you’re OK with the potential side-effects.
It would take a detailed review but for most client sites, I reverse proxy, auto-optimize all images including CMS content, and edge cache, and that bumps up the lighthouse scores by 10 to 30 points effortlessly.
Mobiles are harder and Google is pickier. Think about what you’re delivering and why, you may want to make some design changes to cut back on unnecessary content, or split it into separate pages so your core UX performance is protected.
Be careful of A/B testing, interactions ( can affect paint times ), loaders… these can kill your load-time scores.
Thank you very much! I will lower the data that my images take up by compressing them even further. Thank you very much for all your support!
A quick question that I had. How do I defer the Google Maps API loading?
I’d research Stack Overflow there to see what solutions people have tried for optimizing Google Maps. You’ll see the techniques that work best, if there are any ways to improve it.
Try to defer/delay the execution of third party code. I got better google a lighthouse score on my spiti road trip page by just by delaying JS and third party scripts.
I also encounter the same problem currently.
My performance and accessibility is so poor.
Even sometimes the webflow pages and my own design pages takes too long to load. When it loads, all the contents appear likes a bullet list.
I don’t understand why.
