Unexalined slow loading - webflow CDN problem?

Design help Custom code
1

Hey everyone!

I’m working on a portfolio website. I am aware the website is a bit content-heavy. However, the extent to which loading is slow doesn’t make sense to me.

I would appreciate any help with this!

I’ve added some debugging to the loader to log what resources are actually responsible for the delay. I also ran it through some webpagetest.org to figure out what’s going on.

  1. Through the debugging logs you can see that some of the tiny SVGs and AVIFs (max 300kb) are taking very long to load. They are all hosted on Webflow.

  2. Through the Web Page performance test, I see that some scripts are blocking render. Aside from the loader script that I wrote, all the other ones are Webflow’s call of GSAP:

Anyone has any idea what’s going on? Why is my site taking so long to load?

Would appreciate any help!!! Thank you!!!

Here is my site Read-Only: LINK

1 Like
2

Hi there,

Your site’s loading speed can be improved by addressing several key factors:

Images can impact performance even at 300kb when used in quantity. Use Webflow’s built-in image conversion tool (https://help.webflow.com/hc/en-us/articles/33961311761939) to compress them into AVIF or WebP formats for better optimization.

GSAP scripts and excessive animations can also affect load times. While GSAP is great for animations, consider reducing transitions and transforms where possible. Focus on essential animations and remove unnecessary interactions.

You can monitor which assets are consuming the most bandwidth through the site usage dashboard (https://help.webflow.com/hc/en-us/articles/33961410031507) to identify specific areas for optimization.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Thanks for your response! It’s certainly not gsap or other animations as those are deferred until after the loader finishes (the page is loaded). It’s also not probable that it’s the images as we’re talking about 5 images max, the largest is 300kb, the rest are around 30kb.

So yeah, still unanswered. Would appreciate any other ideas.

1 Like
4

Hi @Where-who

I had a look at your performance scores and it feels really frustrating that your site’s visuals and animations look great, but some of them are loading in a way that slows down the first visible part of the page (the LCP). Here’s what you can do:

Small images loading slowly

Even though your SVGs and AVIFs are tiny they can still feel slow if too many load at once or if the browser waits for them all before painting the page.
You can do,

For images that appear right away like your logo or hero section , add a preload tag in your page settings:

This tells the browser to grab that image first.
For icons or small visuals try combining them into a single SVG sprite instead of separate files fewer requests=faster load.

GSAP scripts blocking rendering

Your report shows GSAP as a render-blocking script. That means the browser is waiting for the animations to load before showing your content.
You can do is:

In your custom code settings, add defer to your GSAP script tag like this:

This makes the content appear first, and then the animations kick in after the page is visible.
You can also move your animation trigger inside a window.onload function to make sure the hero image renders before the animations run.

Loader slowing things down

Custom loaders often look nice but can delay your site’s first paint if they use JavaScript to hide content.

Use CSS instead of JS for your loader animation so the main content isn’t blocked.
If your loader uses JS to fade out, add a small delay (like 0.1s) after the main content loads instead of waiting for everything to finish.

Webflow’s hosting and caching

Sometimes the issue comes from caching setup. Webflow’s CDN is fast, but certain assets don’t always stay cached long enough.
You can,

Re-upload any heavy SVGs or old images; this resets their cache and helps browsers load newer versions quicker.
Make sure you’ve enabled responsive images in Webflow for all image elements this makes Webflow automatically create smaller versions for mobile.

Test after every change

After each change, test your site again using PageSpeed Insights and focus on your “LCP” number. It’s the easiest way to see which fix made the biggest improvement.

If you want an easier, automated way to handle image compression, cache optimization, and script loading order without doing all this manually you can also try the Website Speedy App it’s built to help Webflow sites load faster and improve LCP without changing your design setup.

1 Like