Webflow page loading speed test

Hi. A client site has asked how their site loading speed can be made better. They’ve asked about the following:

  1. Reduce unused JavaScrit - This can usually be helped with minification as a lot of the problem JS at the moment is actually necessary code.

  2. Serve images in next-gen formats - if the developer is up to converting the image this could be super helpful, otherwise installing a plugin to minify these would be a good fallback. (may have to install another script as website isn’t wordpress).

  3. There is also a lot of third-party (mainly google) scripts being loaded for Google CDN & Maps, if these could be delayed until page content is loaded first that would be ideal.

#1 I’m not concerned with as Webflow is minimizing the scripts and CSS files already.
#2, Webflow can’t do these yet (as far as I am aware)
#3 How do I delay any Google scripts from loading before the page content? The only map on the site is a Snazzymap.

Any thoughts greatly appreciated.

Grant

https://preview.webflow.com/preview/kiddywinkles?utm_medium=preview_link&utm_source=designer&utm_content=kiddywinkles&preview=2f178a99d7eeef7f1b00518713bbdc80&pageId=5eab887b76c84c5d8598c475&workflow=preview

Voilà:

Solves everything

Thanks for your interest in the issue; Stacket looks pretty interesting but it’s not really going to help as the website needs to stay on Webflow’s hosting. Or have I missed something?

1 Like

You see the point. Why Webflow Hosting? Webflow will not give you any of those.

Cloudflare Pages is 100x faster and significant performanter in general for any sites.

In short term, you can’t have an fast loading site with Webflow :slight_smile: because of the lack of performance features.

  1. That’s right, but make sure you use the clean up functionality in Webflow in case you have any left over CSS-classes or unused interactions laying around. Also make sure you’re only loading in third party scripts on the pages where they’re needed, and not site-wide. EDIT: Also make sure to load the minified versions of any third party scripts you’re using.

  2. There’s doesn’t seem to be much that can be done about that one at the moment, no.

  3. You’re able to add defer or async attributes to your imported scripts, making them load and parse a bit different than usual.

This article gives some good information about the difference, but the basics is that async should be used for scripts that are important for the initial page load (loading animations, sliders above the fold etc.) and therefore needed to loaded in fast, and defer used for scripts that are less important for the inital load of the page.

Here’s also some information regarding improving performance of any CSS imports that you might have.

However, analytics scripts that might need to gather information about the initial page load / bouce rates etc. is a bit more complicated, but here’s a solution for Google Analytics.

I mean, why tinker always with such things instead of let automated systems do the work?

It scales not well to be honest. Also, still you can maybe influence 10% of all the things. @robingranqvist

Well there are a few reasons I can think of in this case:

  • What if OP’s site isn’t purely static, but uses e-commerce features, forms, user & logic systems in the future etc? (I haven’t checked the site, so I can’t tell)

  • The performance solutions to OP’s current problems only comes with the $99/m Stacket plan, which probably isn’t viable for a single site

  • The client might want to actually own everything related to the site (Webflow project, hosting setup etc.)

Yeah reasonable, but forms, user login systems works with users yeah.

Appreciate your response!

No problem. The idea (and I’m sure the product as well) of automating this type of deployment is great!

1 Like