Slow loading - Webflow CDN?

Design help General
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-dot-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:
<script src="https://cdn.prod.website-files.com/686fe533f545b4826346b826/js/webflow.ba170182.3ba5c41aa3504027.js" type="text/javascript"></script>

<script src="https://cdn.prod.website-files.com/gsap/3.13.0/gsap.min.js" type="text/javascript"></script>

<script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollTrigger.min.js" type="text/javascript"></script>

<script src="https://cdn.prod.website-files.com/gsap/3.13.0/SplitText.min.js" type="text/javascript"></script>

Anyone has any idea what’s going on? Why is my site taking so long to load? Is it that it’s not yet published to a custom domain? Is it my loader script? Webflow CDN being weird?

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

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hii @Where-who

I checked your description and it sounds like your site is mostly being slowed down by a combination of how the assets and scripts are being loaded rather than the size of the files themselves. You can you few things like:

Check your loader script

If your loader is set to wait until every asset is loaded before showing the page, that can make it look slower than it really is.
You can adjust it so the main content appears as soon as the first few key elements load, and let the rest continue in the background. For ex: show your hero section first then run the loader fade out animation.

GSAP scripts are blocking the render

GSAP runs before your visible content loads, which delays the page from showing up.
You can, Move your GSAP and animation scripts to the footer or mark them with defer so they load after the visible content:

Trigger animations only after window.onload so your main layout is already visible before the animations start.

Optimize your SVGs and AVIFs

Even small SVGs can be complex if they have too many layers or unnecessary path data.

You can run them through an SVG optimizer like SVGOMG before uploading.
For AVIFs, make sure they’re compressed properly; Webflow’s CDN is fast, but reducing the complexity of files always helps.

Improve image priority

If your hero image or background visuals are not prioritized, browsers might delay loading them.
You can, Use a preload tag for your largest visible image:

That tells the browser to fetch it immediately.

Cache and test again

Re-upload any older images to reset cache headers, and test again on PageSpeed Insights. Focus on your “LCP” score; it will tell you if your changes helped.

If you’d like an easier way to handle caching, image optimization, and script load order without changing your setup, you can also check out the Website Speedy App it’s built to help Webflow sites improve load times and Core Web Vitals automatically.

1 Like
3

Thanks so much for this detailed response! I’m working through it, and I’ll let you know how it goes! Thanks!!!

1 Like