Code optimization: only load used javascript on frontend

Hey,

Removing dependency to jQuery is great, but there’s still 40Kb of javascript loaded inconditionnally on frontend in /bricks/assets/js/bricks.min.js.

Each part of this file should only be included if needed.

For instance, even with Bricks lazyload disabled, the whole lazyload library is still loaded.
Same for sticky header, mobile menu, and a lot of other modules that we may not use at all.

A standard site with no fancy stuff should be almost 0kb of javascript, with maybe a few lines for mobile menu button and animation or stuff like that.

Besides, an option to inline all Bricks javascript would also be nice when it is small enough.

Thank you in advance!

6 Likes

I agree with @yankiara that ideally bricks.min.js would only include the core functionality and things like lazy load etc. gets only loaded if needed.

How ever, already today with 1.4 Beta it’s possible to achieve a decent performance (just caught the right moment to run the test :slight_smile: )

Yeah I know I’m a performance psycho :wink:
And Bricks perfs are really nice… with headroom to improve :wink:
Actually after adding a few other scripts like sliders or trackers or whatever, removing everything not used can help preserving the 100% on mobile.
Nothing really urgent, I admit.

@yankiara Are you sure it’s 40Kb only? Swiper.js (used by Bricks for slider) alone will take up 40Kb of js.

image

Just tested. Swiper.min.js (135Kb) is loaded conditionally if you use the slider and only on the pages where slider is used.

I wonder if splide.min.js (28kb) or keen-slider.min.js (16Kb) can replace swiper. Have you considered those before @thomas ?

It’s good that the current slider js is loaded conditionally. We can avoid using the native slider element and load our preferred & small js slider library and profit with better performance. I will test between splide, keen-slider, glider and css only slider to see if they fit my requirements.

Well I haven’t tested sliders, yet, so maybe swiper is added then, but on a simple page with text and images, there’s only 40kb:

image

@yankiara If you use gzip comp with 5-6 levels then the file size will reduce to 12Kb.