How to prevent unused feature scripts (Alpine/GSAP) from loading in the head to fix render-blocking?

Elements
1

Hi all,

I’m running a PageSpeed Insights audit on my site (built with Elements) and the “Render-blocking requests” diagnostic flags several framework scripts that seem to load site-wide regardless of whether the corresponding feature is actually used on a given page:

  • alpine-exit-intent.js
  • modal.js
  • image-lightbox.js
  • flatpickr.min.js (date picker)
  • alpine-store-filters.js
  • gsap.min.js + ScrollTrigger.min.js + gsap-effects.js + effectsTransforms.js
  • smoothscroll.min.js

Combined, these add up to roughly 5.7 seconds of render-blocking time on mobile (throttled), according to PageSpeed Insights.

My questions:

  1. Does Elements only load these scripts when the corresponding feature (lightbox, exit-intent popup, date picker, scroll animations, etc.) is actually used somewhere on the page, or are they always included regardless of usage?
  2. If they’re always included, is there a way to disable specific features site-wide (or per-page) so their scripts aren’t loaded when not needed?
  3. Is there a built-in option to load these scripts with defer or async instead of render-blocking in the <head>?

Any guidance on reducing this render-blocking footprint would be appreciated. Happy to share a PageSpeed report or URL if that helps diagnose it.

Thanks!

2

Hi @Marcoen

good news: I’ve just started looking at how we can improve on the loading of all assets shipped with Elements.

I’m hoping to have most of the work for this finished early next week, so you should see better results in an update sometime next week :blush:

3

Thanks