La pàgina es carrega, però el desplaçament tartamudeja a mesura que s’esvaeixen les seccions, un fons es mou o una capçalera enganxosa canvia de mida. L’animació pot exposar diversos costos diferents: JavaScript que s’executa a cada esdeveniment de desplaçament, recàlcul de la disposició, pintar una capa gran o descodificar mitjans al mateix moment.
Identifiqueu el component afectat i l’etapa de renderització abans d’eliminar tot el moviment.
Reprodueix en un perfil de dispositiu adequat
Proveu una visita en fred tancada amb un telèfon real modest sempre que sigui possible. Tingueu en compte la secció on cauen els fotogrames i si el problema es produeix una vegada a la revelació o durant el desplaçament.
Enregistreu un rastre de rendiment del navegador amb captures de pantalla. Busqueu tasques llargues, recàlculs d’estil repetits, dissenys i grans esdeveniments de pintura alineats amb el tartamudeig.
Desactiva temporalment una classe d’animació a les eines per a desenvolupadors. Si el desplaçament es fa suau, teniu un objectiu útil; si no, el moviment visible només pot coincidir amb una imatge o un script de tercers.
Comproveu els controladors d’esdeveniments de desplaçament
JavaScript que llegeix el disseny i escriu estils a cada esdeveniment de desplaçament pot forçar el càlcul repetit:
window.addEventListener("scroll", () => {
const top = panel.getBoundingClientRect().top;
panel.style.transform = `translateY(${top * 0.1}px)`;
});Aquest patró simplificat llegeix la geometria i canvia l’element contínuament. Un IntersectionObserver mantingut sovint és millor per a classes de revelació puntuals. Per obtenir efectes continus, treballeu per lots amb requestAnimationFrame i eviteu mesurar diversos elements en un bucle.
No enganxeu un script d’acceleració genèric sobre una biblioteca de temes sense entendre el seu cicle de vida.
Prefereix propietats amigables amb el compositor
Animar transform i opacity sovint pot evitar el disseny, mentre que canviar top, left, l’amplada o l’alçada repetidament és més car.
Això no fa que totes les transformacions siguin gratuïtes. Una capa borrosa o fixa a pantalla completa pot requerir grans pintures i memòria. L’excés de will-change crea més capes i pot empitjorar l’ús dels recursos.
Apliqueu will-change poc abans d’una animació provada on les proves ho admetin i, a continuació, traieu-lo quan ja no sigui necessari.
Inspeccioneu fons i efectes visuals fixos
background-attachment: fixed, les ombres grans, els filtres i el desenfocament de fons poden ser especialment cars al mòbil. Desactiveu-los un per un en una comparació de posada en escena.
Substituïu un fons de paral·laxi per un retall estàtic a amplades reduïdes si el moviment afegeix poc valor. El disseny pot conservar l’efecte d’escriptori alhora que ofereix als visitants mòbils un desplaçament estable.
Comproveu imatges grans dins de contenidors animats. Moure una textura de 4.000 píxels requereix més pintura que el mateix efecte amb un recurs de mida adequada.
Respecteu les preferències de moviment reduït
Els visitants poden sol·licitar menys moviment:
@media (prefers-reduced-motion: reduce) {
.reveal,
.parallax,
.animated-heading {
animation: none;
transition: none;
transform: none;
}
}Assegureu-vos que la desactivació de l’animació no deixi el contingut transparent o fora de la pantalla. L’HTML i CSS base haurien de ser visibles; el moviment hauria de millorar aquest estat.
Proveu la navegació i els acordions amb moviment reduït, perquè eliminar totes les transicions amb un selector ampli pot interferir amb els components que utilitzen el temps per als canvis d’estat.
Comproveu les capçaleres adhesives de manera independent
Una capçalera que es redueix en el desplaçament pot provocar canvis de disseny al document. Utilitzeu una alçada de capçalera exterior estable i animeu una capa visual interior quan sigui pràctic.
Observeu si el tema afegeix i elimina repetidament la seva classe enganxosa al voltant d’un llindar, provocant un parpelleig. És possible que es requereixi una histèresi petita o un estat fix més senzill, però implementeu-lo al codi de ganxo o fill compatible del tema.
Verifiqueu la suavitat i la usabilitat
Després de la reparació més petita, repetiu la mateixa ruta de desplaçament i traça. Compareu la consistència del marc, l’estil i el temps de pintura, no només una partitura sintètica.
Prova el desplaçament tàctil, canvi d’orientació, enllaços ancorats, controls enganxosos i moviment reduït. Assegureu-vos que el contingut estigui present quan falla JavaScript i que els efectes reveladors no retardin els enllaços que necessiten els visitants.
Sol·liciteu una avaluació quan diverses biblioteques temàtiques manipulin el desplaçament, les capes grans es repinten o el tartamudeig només aparegui en determinats telèfons. Els URL públics i una gravació de pantalla curta poden abastar el treball sense credencials.