El rendimiento ya forma parte del diseño

Una maqueta no muestra el coste de carga

Una página puede parecer ligera en el diseño y cargar despacio al incorporar imágenes grandes, varias fuentes, animaciones y scripts externos. La revisión debe usar la página real, contenido representativo y condiciones habituales de dispositivo y red.

Acuerde un presupuesto de página mientras el diseño aún sea flexible. El presupuesto puede cubrir la imagen principal, los archivos de fuentes, los scripts de terceros y el código de interacción que deben estar listos para la primera vista. Luego, los diseñadores pueden decidir qué elementos visuales tienen suficiente valor para justificar su costo de carga y renderizado.

Establecer expectativas de rendimiento por plantilla y dispositivo. La página de inicio, la página de servicio, el artículo y la pantalla de aplicación tienen contenido diferente, por lo que una sola página rápida no representa todo el sitio. Utilice las mismas condiciones de prueba antes y después de un cambio y mantenga el resultado con la versión de página. Las mediciones de laboratorio ayudan a diagnosticar, mientras que los datos de campo reflejan a los visitantes reales.

Priorizar la acción principal

Evaluar juntos el contenido prioritario, los medios y los scripts.

El primer título, la imagen principal y la acción clave suelen merecer prioridad. Los medios situados más abajo pueden esperar mientras el visitante entiende la página.

El orden de carga sigue la tarea del visitante. Una página de servicio normalmente necesita su título, oferta y acción principal antes que una galería o un mapa integrado. Un artículo necesita texto legible antes que medios decorativos. Marcar cada imagen como urgente compite por la misma conexión y puede retrasar el elemento que más importa.

La priorización comienza con el contenido necesario para entender la página. El encabezado principal y el texto esencial no deben esperar a los scripts opcionales. Dele a la imagen visible más grande dimensiones correctas y prioridad de entrega, luego los recursos con carga diferida más abajo. Evite marcar cada imagen como urgente. En las páginas de artículos y catálogos, la estructura legible puede aparecer mientras imágenes secundarias, recomendaciones o servicios integrados continúan cargando.

Revisar imágenes, fuentes y JavaScript por separado

Probar condiciones móviles reales antes de aprobar animaciones o integraciones pesadas.

Imágenes, fuentes y JavaScript tienen costes distintos. Se revisan tamaños y formatos, pesos tipográficos necesarios y el motivo de cada script. Una sola puntuación rara vez explica qué cambio ayudará.

El trabajo de performance debe identificar una causa en lugar de perseguir un resultado. Una respuesta lenta del servidor, una imagen principal de gran tamaño, una fuente de bloqueo y una tarea de JavaScript larga necesitan soluciones diferentes. Compare los seguimientos de la misma ruta y perfil de dispositivo, luego verifique que el cambio mejore la experiencia del visitante sin eliminar la funcionalidad requerida.

Las fuentes y la animación también afectan a la velocidad percibida. Limite las familias y pesos, cargue sólo los conjuntos de caracteres necesarios y use alternativas tipográficas con métricas compatibles. El código de animación debe ejecutarse después de que exista el diseño requerido y respetar las preferencias de movimiento reducido. Compruebe si las secciones fijas o transformadas crean grandes áreas de renderizado en el móvil. El objetivo es mantener la dirección visual deseada mientras se elimina el trabajo que no contribuye a la tarea del visitante.

Probar la primera visita en condiciones móviles reales.

Hay que medir la primera visita sin caché y las navegaciones posteriores. En móvil se comprueban los cambios de layout, el retraso de interacción y el mayor elemento visible en cada plantilla real.

Los criterios de rendimiento y aceptación se acuerdan antes de implementar y se comprueban en dispositivos reales.

Incluir el rendimiento en los flujos de trabajo de liberación y contenido. Un editor puede deshacer el desarrollo cuidadoso cargando una imagen de gran tamaño o incrustando varios widgets externos. Dimensiones de la imagen de documento, manejo de vídeo y herramientas de terceros aprobadas. Volver a comprobar las páginas representativas después de cambios de plantilla, seguimiento o campaña. Cuando aparezca una regresión, grabar el activo o script responsable para que la corrección sea específica y no se convierta en una solicitud general para simplificar todo el diseño.