La página se carga, pero el desplazamiento se entrecorta a medida que las secciones aparecen, un fondo se mueve o un encabezado fijo cambia de tamaño. La animación puede exponer varios costos diferentes: JavaScript se ejecuta en cada evento de desplazamiento, recálculo del diseño, pintar una capa grande o decodificar medios al mismo tiempo.
Identifique el componente afectado y la etapa de renderizado antes de eliminar todo el movimiento.
Reproducir en un perfil de dispositivo apropiado
Pruebe una visita en frío desconectada en un teléfono realmente modesto siempre que sea posible. Tenga en cuenta la sección donde caen los fotogramas y si el problema ocurre una vez al revelarse o durante el desplazamiento.
Registre un seguimiento del rendimiento del navegador con capturas de pantalla. Busque tareas largas, recálculos de estilo repetidos, diseño y eventos de pintura grandes alineados con el tartamudeo.
Deshabilite temporalmente una clase de animación en las herramientas de desarrollo. Si el desplazamiento se vuelve fluido, tienes un objetivo útil; de lo contrario, el movimiento visible puede simplemente coincidir con una imagen o un guión de terceros.
Verifique los controladores de eventos de desplazamiento
JavaScript que lee el diseño y escribe estilos en cada evento de desplazamiento puede forzar cálculos repetidos:
window.addEventListener("scroll", () => {
const top = panel.getBoundingClientRect().top;
panel.style.transform = `translateY(${top * 0.1}px)`;
});Este patrón simplificado lee la geometría y cambia el elemento continuamente. Un IntersectionObserver mantenido suele ser mejor para clases de revelación única. Para efectos continuos, trabaje por lotes con requestAnimationFrame y evite medir varios elementos en un bucle.
No pegue un script de aceleración genérico sobre una biblioteca de temas sin comprender su ciclo de vida.
Prefiere propiedades compatibles con compositores
Animar transform y opacity a menudo puede evitar el diseño, mientras que cambiar top, left, el ancho o el alto repetidamente es más costoso.
Eso no hace que cada transformación sea gratuita. Una capa fija o borrosa de pantalla completa puede requerir grandes pinturas y memoria. Un will-change excesivo crea más capas y puede empeorar el uso de recursos.
Aplique will-change solo poco antes de una animación comprobada donde las pruebas lo respalden, luego elimínelo cuando ya no sea necesario.
Inspeccionar fondos fijos y efectos visuales.
background-attachment: fixed, las sombras grandes, los filtros y el desenfoque del fondo pueden resultar especialmente caros en dispositivos móviles. Deshabilítelos uno por uno en una comparación de etapas.
Reemplace un fondo de paralaje con un recorte estático en anchos estrechos si el movimiento añade poco valor. El diseño puede conservar el efecto de escritorio y al mismo tiempo brindar a los visitantes móviles un desplazamiento estable.
Compruebe imágenes de gran tamaño dentro de contenedores animados. Mover una textura de 4000 píxeles requiere más pintura que el mismo efecto con un recurso de tamaño adecuado.
Respetar las preferencias de movimiento reducido
Los visitantes pueden solicitar menos movimiento:
@media (prefers-reduced-motion: reduce) {
.reveal,
.parallax,
.animated-heading {
animation: none;
transition: none;
transform: none;
}
}Asegúrese de que deshabilitar la animación no deje el contenido transparente o fuera de la pantalla. El HTML y CSS base deben ser visibles; el movimiento debería mejorar ese estado.
Pruebe la navegación y los acordeones con movimiento reducido, porque eliminar todas las transiciones con un selector amplio puede interferir con los componentes que utilizan el tiempo para los cambios de estado.
Verifique los encabezados adhesivos de forma independiente
Un encabezado que se reduce al desplazarse puede provocar cambios de diseño en todo el documento. Utilice una altura de encabezado exterior estable y anime una capa visual interior cuando sea práctico.
Observe si el tema añade y elimina repetidamente su clase fija alrededor de un umbral, provocando parpadeo. Es posible que se requiera una pequeña histéresis o un estado fijo más simple, pero impleméntelo en el gancho o código secundario admitido del tema.
Verificar suavidad y usabilidad
Después de la reparación más pequeña, repita la misma ruta de desplazamiento y rastreo. Compare la consistencia del marco, el estilo y el tiempo de pintura, no solo una partitura sintética.
Pruebe el desplazamiento táctil, el cambio de orientación, los enlaces anclados, los controles adhesivos y el movimiento reducido. Asegúrese de que el contenido esté presente cuando JavaScript falle y que los efectos de revelación no retrasen los enlaces que los visitantes necesitan.
Solicite una evaluación cuando varias bibliotecas de temas manipulen el desplazamiento, se repitan capas grandes o el tartamudeo aparezca solo en ciertos teléfonos. Las URL públicas y una breve grabación de pantalla pueden abarcar el trabajo sin credenciales.