Webflow page loading speed test

Community resources General
1

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

3

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
5

  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.

7

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.)

9

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

1 Like