perf: replace swiper.js by glide.js

[davidlj95]

Swiper.js is great and has lots of support from community, however comes with some performance disadvantages:

• Inlining critical CSS. When using Swiper.js web component (Swiper Element), styles are injected by referring to an external CSS file. Those could be also added when initalizing the library via JS. But then we wouldn't be able to access our SCSS variables. Eventually, this doesn't allow Angular to inline that CSS in the HTML, despite it's needed as early as possible. So it's loaded later. This is because the shadow DOM that Swiper.js creates for the web component in Swiper Element. Using the core version could be an alternative. However, seems that doesn't play well with Angular as doesn't know how many slides are in there. So would need to call the API to set the slides manually when images change.
• Takes ~100kBs from the main bundle. Which is quite big. Glide.js takes 26kB. However, can be reduced by using only the needed modules in the modular build.

Glide.js solves both issues and allows a performance improvement overall.

Extra changes:

• Fix analyze bundle run script in package.json

A benefit with Glide.js is that the width doesn't need to be explicit and works (with some hacks) with a flex box. Versus with Swiper.js that needs the width to be specified (seems so). Not sure 100% about this though!

[davidlj95]

• perf: replace swiper.js by glide.js #521 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[davidlj95]

Hmmm this hasn't gone the expected way. First of all, not sure why, but all FCP/LCP metrics are lower given the "Load time" 23% and "Render delay" 73%.

After comparing current version in production with this one, looks like gains are almost negligible

Version/Page	/	/projects/chiasma
Swiper.js (Production)	🔗	🔗
Glide.js (PR Preview)	🔗	🔗

Turns out the main page / barely improves a 2%:

Swiper.js (Production)

Glide.js (PR Preview)

In /projects/chiasma the results are even worse, we lose performance 😢

Swiper.js (Production)

Glide.js (PR Preview)

The highly probable issue is that due to loading many images at once, network is saturated. Hence affecting LCP/FCP. Some ideas:

• Virtual scrolling for sliders: so that until we don't get in there, the slider contents aren't loaded. Hence network is freed from loading resources that may not be needed.
• Virtual scrolling for slider images: so that not every image in the slider is loaded. This way, less network is used in advance.