Page speed optimization success with Webflow + Zaraz

After going through many iterations of the website build on Webflow, we are pretty much there on SEO and page speed and thought I’d share some learnings to help guide decisions for future builds. Things we learned:

  • Keep class count low. Be as lean and efficient with class creation as possible. Don’t create duplicate classes, these add up quickly and depending on site size it will be your biggest issue after the site is done. This you cannot fix with Webflow so be super cautious. Utilize the “clean up” styles feature as well. If you REALLY want to be a pyscho about it you could delete your classes in Webflow that are for elements below the fold, move them to an externally-hosted CDN, and defer load them, but I didn’t go that route as I like using the tool for those. Best advice, just be careful with classes.
  • Minimize interaction animations (JS) Don’t overuse animations, they add up quickly on page speed. I had to delete some that I really liked but worth the added performance I got back. I replaced what I could with CSS hover animations over JS and it had better performance.
  • Compress/Cache external scripts If you pull in scripts, make sure you’re hosting them on a CDN with caching and compression
  • Zaraz over GTM. If you want to deploy tags like GA4, FB Pixel, and other tracking/tag scripts, I’ve found that utilizing CloudFlare’s Zaraz instead of GTM has a massive increase in performance.

Here’s the finished site if you want to browse: