La pàgina comença amb un espai buit petit; després el slider s’inicialitza i empeny cap avall tot el contingut. També pot passar que la primera diapositiva aparegui amb una altura i canviï quan arriben la imatge, el text o els controls.
El salt de disseny sol ser un problema de geometria. Cal reservar l’espai correcte abans que JavaScript millori el component i aconseguir que la primera diapositiva sigui vàlida sense esperar la biblioteca del carrusel.
Identificar què es mou i en quin moment
Enregistra una traça de rendiment amb les regions de layout shift activades. Observa una càrrega mòbil en fred i anota si el moviment comença quan arriba una imatge, una font, JavaScript o un canvi de consentiment.
Inspecciona el contenidor abans i després d’inicialitzar-se. Compara’n l’altura, les classes i els estils inline. Algunes biblioteques comencen amb totes les diapositives apilades i després hi apliquen posició absoluta; d’altres calculen l’altura a partir d’una imatge que no declara dimensions.
No atribueixis el desplaçament al slider només perquè és damunt del contingut que es mou. La traça ha de revelar quin element ha canviat realment de mida.
Reservar la proporció del contingut visual
Declara dimensions intrínseques i proporciona un contenidor estable:
.hero-slider {
aspect-ratio: 16 / 7;
overflow: hidden;
}
.hero-slider img {
width: 100%;
height: 100%;
object-fit: cover;
}Tria la proporció segons el disseny real. Una relació fixa d’escriptori pot generar al mòbil un retall massa baix, de manera que potser necessites proporcions responsive mitjançant media queries.
L’etiqueta HTML de la imatge també ha d’incloure atributs width i height correctes. Així el navegador calcula la proporció abans d’acabar de descarregar el fitxer i d’aplicar el CSS.
Fer útil la primera diapositiva sense JavaScript
Renderitza la primera diapositiva com a HTML visible normal. Amaga les següents mitjançant el CSS base sense col·lapsar el contenidor. Quan la biblioteca s’inicialitzi podrà afegir controls, clonacions i transicions sobre una base estable.
Si la primera imatge només existeix dins d’una configuració JSON o JavaScript l’assigna com a fons, el navegador no pot reservar-la ni pintar-la aviat. Portar la primera imatge i l’encapçalament al marcat generat pel servidor sol millorar l’estabilitat i la resistència als errors.
No apliquis lazy load a la primera diapositiva si apareix al primer viewport. Les posteriors sí que poden esperar fins que siguin necessàries.
Estabilitzar textos i fonts
Un peu o titular pot augmentar l’altura quan arriba una font personalitzada o una traducció ocupa una altra línia. Dissenya una zona capaç d’allotjar el contingut esperat en comptes de calcular una altura rígida a partir del text anglès d’escriptori.
Prova anglès, castellà i català en amplades mòbils. Mantén els títols com a text real i no col·loquis l’únic missatge dins d’una imatge. Si el text se superposa sobre la fotografia, reserva’n la regió i revisa el contrast a cada diapositiva.
Canviar font-display pot evitar text invisible, però no garanteix que el salt desaparegui: una mètrica diferent de la font substitutiva encara pot alterar els salts de línia.
Reservar l’espai dels controls
Fletxes, punts o miniatures que arriben tard poden ampliar el component. Col·loca els controls superposats dins de la caixa reservada o assigna des del CSS inicial l’espai que ocuparan al final.
Les fonts d’icones provoquen sovint canvis tardans. Un SVG inline petit acostuma a ser més predictible, sempre que el botó conservi una etiqueta accessible i el focus visible.
No eliminis els controls únicament per millorar la mètrica. Si el carrusel conté informació rellevant, el visitant ha de poder aturar-lo o navegar-hi.
Evitar altures variables en reproducció automàtica
Diapositives amb proporcions o textos molt diferents desplacen el contingut inferior a cada transició. Usa una geometria comuna, retalla les imatges de manera deliberada o col·loca els textos fora de la zona que canvia d’altura.
L’autoplay també pot crear problemes d’ús. Respecta la preferència de moviment reduït i ofereix pausa quan el contingut avança automàticament. Si cada diapositiva necessita una altura distinta per resultar comprensible, una disposició vertical pot ser millor que un carrusel.
Verificar càrrega i interacció
Neteja la memòria cau de pàgina i els recursos generats implicats, i repeteix càrregues fredes en diverses amplades. Confirma que l’altura inicial reservada coincideix amb la final, la primera imatge se sol·licita aviat i les següents no es descarreguen sense necessitat.
Usa fletxes, punts, gest tàctil i teclat. Vigila nous salts a la primera transició, en canviar l’orientació i amb textos traduïts. Compara el CLS, però revisa també l’enregistrament: un únic moviment gran pot ser molt més molest que diversos de mínims.
Si un constructor injecta altures inline, el CSS del slider arriba de manera asíncrona o el component canvia segons la plantilla, una revisió tècnica ha d’estabilitzar l’estructura d’origen i no limitar-se a amagar el símptoma.