search

NickPiscitelli / Glider.js

A fast, lightweight, dependency free, native scrolling carousel alternative!
https://nickpiscitelli.github.io/Glider.js
MIT License
3.24k stars 296 forks source link

Recommendations for best performance for above the fold glider #109

Open joostplas opened 4 years ago

joostplas commented 4 years ago

I'm using glider.js for product images on my e-com website. Both on the homepage and on the product detail page. The product images have a very prominent place on my website, and currently the position changes when glider.js is initialized. This causes visual janking and will definitely affect LCP and CLS.

What are the general recommendations here? The best I can think of now is hiding the images with CSS until glider.js is initialised, but I'm hoping I can do better.

Because of the low size of glider.css and glider.js I'm considering loading them in header (and not async/deferred), but because glider is initialized on 'load' event, I don't think this matters much.

Any tips?

NickPiscitelli commented 4 years ago

Have you tried to destroy the glider before moving the position and then subsequently initializing after it's moved. Initialization is quick and with a tad of CSS, you can make it so the aesthetic of the slider before initialization doesn't differ too much.

The other thing to consider is duplicating the glider in JS upon load. This way you don't need to deal with the computations involved with movement of the Glider.

joostplas commented 4 years ago

Hey Nick. Thanks for the reply! I actually figured it out for my main slider with just applying CSS before it's initialized.

The main thing where I struggle now is instances where I show a partial slide. Obviously glider.js applies a static width to determine this, which I don't think I can judge upfront. The best I can think of is using a percentage which tries to come close.

Any suggestions here?