Migliorare il Cumulative Layout Shift di Slick Slider

Lo script Slick slider genera script gradevoli ma produce un punteggio basso per il paramentro CLS (Cumulative Layout Shift). Per aumentare tale punteggio è importante che lo slider abbia lo stesso aspetto anche prima che lo script di Slick entri in funzione.

Se ad esempio il numero di slide da mostrare è 5 bisogna imposta il CCS in modo da nascondere tutto meno le prime 5 slide e dargli una dimensione. Nell'esempio sostituire la classe ax-slider con la propria classe.

.ax-slider > li:not(:nth-child(-n+5)) {
   display: none;
 }
 .ax-slider > li:nth-child(-n+5) {
   float: left;
   width: calc(100% / 5);
   margin-bottom: 50px !important;
 }

Nel caso in cui le slide siano 4 basta cambiare il numero di child ed eventualmente la dimensione

 .ax-slider > li:not(:nth-child(-n+4)) {
   display: none;
 }
 .ax-slider > li:nth-child(-n+4) {
   float: left;
   width: calc(100% / 4);
   margin-bottom: 50px !important;
 }

Infine questa è la configurazione per uno slider che mostri una sola slide

.ax-slider > li:not(:first-child) {
   display: none;
}
.ax-slider > li:first-child {
 float: left;
 margin-bottom: 50px !important;
}