Optimizing Webflow pages for speed

General
1

Hey guys,

I wanted to start a discussion around the topic of page speed optimization. What are your best practices and how do you make sure that your pages are fast?

In our specific case we are experiencing slow TTFB (time to first byte) times (around 2s) when testing in GTMetrix or Google’s Page Speed Insights. This is something that I don’t understand because if you load the page for a second time right after, the TTFB is super fast.

We already did these optimizations:

  • Lazy loaded all iframes until they come into view
  • We optimized all images and only use WebP
  • We use SVGs where we can
  • Only use third-party scripts on pages where we need them
  • Disabled tracking on all video embeds like Vimeo or Wistia

Other options we were considering were:

  • Lazy loading all third-party scripts on first user interaction (like scroll or mouse movement) and embeding them via Google Tag Manager
  • Embeding our Trustpilot badges as SVGs and link to our profile (problem is that Trustpilot does not allow that)

Does anyone have some tips or hacks on how to squeeze everything out of Webflow’s performance?

2

Following up on this:

Today I worked on a small library dedicated to boost page speed and I just published the first version to GitHub. This is the first time I did something like this and I am super happy for any improvement tips. I’d love to enhance it further and make it really useful for everyone.

Short breakdown of what it does:

  • Delay of all third-party scripts that you want (until a user interacts with the page)
  • Allows for custom callbacks for each script
  • Allows for a global callback after all scripts loaded
  • Allows to check if a library is ready before continuing
  • Allows for enqueuing scripts both in body and head

Here is the link to my repo: https://github.com/vierless/waitless

If someone wants to chat about this, has ideas or improvements, hit me up!

1 Like
3

Great topic @vierless_julian! Thanks for sharing!

1 Like