Utiliza herramientas para medir el rendimiento

Sam Dutton

Existen varios objetivos principales para construir un sitio eficiente y resiliente con un bajo costo de datos.

Para cada objetivo, necesitas una auditoría.

Objetivo	¿Por qué?	¿Qué se debe probar?
Garantiza la privacidad, la seguridad y la integridad de los datos, y permite un uso eficiente de las APIs.	Por qué HTTPS es importante	Se implementa el protocolo HTTPS para todas las páginas, rutas y recursos del sitio.
Mejora el rendimiento de carga	El 53% de los usuarios abandonan los sitios que tardan más de tres segundos en cargarse.	JavaScript y CSS que se podrían cargar de forma asíncrona o aplazada. Establece objetivos de tiempo para el tamaño de la carga útil e interactiva (por ejemplo, TTI en 3G). Establece un presupuesto de rendimiento.
Reduzca el peso de la página	• Reducir el costo de datos para los usuarios con planes de datos limitados • Reducir los requisitos de almacenamiento de las apps web (lo que es especialmente importante para los usuarios de dispositivos de gama baja) • Reducir los costos de hosting y entrega • Mejorar el rendimiento, la confiabilidad y la resiliencia del servicio	Establece un presupuesto para el peso de la página; por ejemplo, la primera carga debe ser inferior a 400 kB. Comprueba si hay contenido pesado de JavaScript. Verifica el tamaño de los archivos para encontrar imágenes infladas, contenido multimedia, HTML, CSS y JavaScript. Busca imágenes que se puedan cargar de forma diferida y comprueba si hay código sin usar con las herramientas de cobertura.
Reduce las solicitudes de recursos	• Reducir los problemas de latencia • Reducir los costos de entrega • Mejorar el rendimiento, la confiabilidad y la resiliencia del servicio	Busca solicitudes excesivas o innecesarias para cualquier tipo de recurso. Por ejemplo, archivos que se cargan repetidamente, JavaScript que se carga en varias versiones, CSS que nunca se usa, imágenes que nunca se visualizan (o que pueden cargarse de forma diferida).
Optimización del uso de la memoria	La memoria puede convertirse en el nuevo cuello de botella, especialmente en dispositivos móviles.	Usa el Administrador de tareas de Chrome para comparar tu sitio con otros en cuanto al uso de memoria cuando cargues la página principal y uses otras funciones del sitio.
Reduce la carga de CPU	Los dispositivos móviles tienen CPU limitada, en especial los dispositivos de gama baja	Comprueba si hay contenido pesado de JavaScript. Encuentra los elementos JavaScript y CSS sin usar con las herramientas de cobertura. Verifica si hay tamaño excesivo de DOM y secuencias de comandos que se ejecutan innecesariamente en la primera carga. Busca JavaScript cargado en varias versiones o bibliotecas que podrían evitarse con una refactorización menor.

Existe una amplia gama de herramientas y técnicas para auditar sitios web:

• Herramientas del sistema
• Herramientas de navegador integradas
• Extensiones del navegador
• Solicitudes de prueba en línea
• Herramientas de emulación
• Análisis
• Las métricas que proporcionan los servidores y los sistemas empresariales
• Grabación de pantalla y video
• Pruebas manuales

A continuación, obtendrás información sobre qué enfoque es relevante para cada tipo de auditoría.

Nota: Las imágenes constituyen, por mucho, el mayor peso y la mayoría de las solicitudes de la mayoría de las páginas web. La latencia empeora a medida que lo hace. Por ello, las solicitudes excesivas de archivos de imagen son un problema cada vez mayor a medida que la Web se vuelve móvil. Las imágenes también consumen energía: más solicitudes de imágenes, más uso de la radio y más baterías sin carga. Incluso el solo procesamiento de imágenes consume energía, y esto es proporcional al tamaño y la cantidad de las imágenes. Lo mismo ocurre con la memoria: los pequeños aumentos en las dimensiones de píxeles generan grandes aumentos en el uso de memoria. Con las imágenes en dispositivos móviles, en especial en dispositivos de gama baja, la memoria puede convertirse en un nuevo cuello de botella. Las imágenes demasiado extensas también son problemáticas para los usuarios que tienen planes de datos limitados. Quita las imágenes redundantes. Si no puedes deshacerlos, optimiza: aumenta la compresión tanto como sea posible, reduce las dimensiones de píxeles y usa el formato que te proporcione los tamaños de archivo más pequeños. La optimización de "imágenes hero", como banners y fondos, es una victoria sencilla y única.

Registra solicitudes de recursos: número, tamaño, tipo y tiempo.

Un buen punto de partida cuando auditas un sitio es revisar las páginas con las herramientas de red de tu navegador. Si no sabes cómo hacerlo, consulta la guía de introducción del panel de red de las Herramientas para desarrolladores de Chrome. Hay herramientas similares disponibles para Firefox, Safari, Internet Explorer y Edge.

Recuerde llevar un registro de los resultados antes de realizar cambios. Para las solicitudes de red, esto puede ser tan simple como una captura de pantalla: también puedes guardar los datos del perfil como un archivo JSON. A continuación, encontrarás más información sobre cómo guardar y compartir los resultados de las pruebas.

Antes de comenzar a auditar el uso de la red, asegúrate de inhabilitar la caché del navegador para asegurarte de obtener estadísticas precisas sobre el rendimiento de la primera carga. Si ya realizas un almacenamiento en caché a través de un service worker, borra el almacenamiento de la API de Cache. Es posible que quieras usar una ventana de incógnito (privada), de modo que no tengas que preocuparte por inhabilitar la caché del navegador o quitar las entradas previamente almacenadas en caché.

Estas son algunas funciones y métricas principales que debes verificar con las herramientas del navegador:

• Rendimiento de carga: Lighthouse proporciona un resumen de las métricas de carga. Addy Osmani escribió un excelente resumen de los momentos clave del usuario para cargar la página.
• Eventos del cronograma para cargar y analizar recursos, y el uso de memoria. Si deseas profundizar más, ejecuta la memoria y la generación de perfiles de JavaScript.
• Peso total de la página y cantidad de archivos
• Cantidad y peso de los archivos JavaScript.
• Cualquier archivo JavaScript individual particularmente grande (por ejemplo, 100 KB).
• JavaScript no utilizado. Puedes verificarlo con la herramienta de cobertura de Chrome.
• Peso y cantidad total de los archivos de imagen.
• Cualquier archivo de imagen individual particularmente grande.
• Formatos de imagen: ¿Hay PNG que puedan ser JPEG o SVG? ¿WebP se usa con resguardos?
• Indica si se usan técnicas de imágenes responsivas (como srcset).
• Tamaño del archivo HTML.
• Peso y cantidad total de los archivos CSS
• CSS sin usar. (En Chrome, usa el panel de cobertura).
• Verifica si hay problemas de uso de otros recursos, como las fuentes web (incluidas las fuentes de íconos).
• Revisa el cronograma de Herramientas para desarrolladores para ver si hay algún elemento que bloquee la carga de la página.

Si trabajas con una conexión Wi-Fi rápida o una conexión móvil rápida, realiza las pruebas con un ancho de banda bajo y una emulación de alta latencia. Recuerda realizar pruebas en dispositivos móviles y computadoras de escritorio. Algunos sitios usan el análisis de UA para ofrecer diferentes recursos y diseños para distintos dispositivos. Es posible que debas realizar pruebas en hardware real con la depuración remota, no solo con la simulación del dispositivo.

Nota: Puedes usar las herramientas del navegador para detectar problemas con solo comprobar las respuestas de la red y ordenarlas por tamaño. Por ejemplo, este archivo PNG de 349 KB parecía ser un problema:

. Efectivamente, parece que la imagen era de 1,600 px de ancho, mientras que el ancho máximo de la pantalla del elemento era de solo 400 px. Descomprimido, la imagen necesitaba más de 4 MB de memoria, lo cual es muy alto en un teléfono celular. Se volvió a guardar la imagen como un archivo JPEG de 800 px de ancho (para que se pueda usar con un ancho de pantalla de 400 px en pantallas 2x) y se optimizó con ImageOptim, lo que dio como resultado un archivo de 17 KB. Compara el PNG original con el JPEG optimizado.

Es una mejora del 95%.

Cómo verificar la memoria y la carga de CPU

Antes de realizar cambios, lleva un registro de la memoria y el uso de CPU.

En Chrome, puedes acceder al Administrador de tareas desde el menú Ventana. Esta es una manera sencilla de comprobar los requisitos de una página web.

Administrador de tareas de Chrome: Ten cuidado con el consumo de memoria y CPU

Cómo probar el rendimiento de la primera carga y la posterior

Lighthouse, WebPagetest y Pagespeed Insights son útiles para analizar la velocidad, el costo de los datos y el uso de recursos. WebPagetest también verificará el almacenamiento en caché del contenido estático, el tiempo hasta el primer byte y si tu sitio hace un uso efectivo de las CDN.

Nota: Es fácil habilitar el almacenamiento en caché de contenido estático para que los navegadores puedan almacenar elementos en caché la primera vez que se soliciten. Para ello, configura el servidor para que incluya los encabezados adecuados. Si un navegador puede almacenar recursos en caché, no necesitará recuperarlos de la red en visitas posteriores. Esto mejora la velocidad de carga, disminuye los costos de datos y reduce la carga de red y del servidor, incluso en el caso de los navegadores que no admiten el almacenamiento en caché a través de un service worker. Incluso si usas la API de Cache, es importante habilitar el almacenamiento en caché del navegador. Para obtener más información, consulta Herramientas de PageSpeed y los recursos de Fundamentos de la Web (en particular, la sección "Invalidación y actualización de respuestas almacenadas en caché").

Guarda los resultados

• WebPagetest: Cada uno de los resultados de la prueba tiene su propia URL.
• Pagespeed Insights: La herramienta en línea Pagespeed Insights ahora incluye datos del Informe sobre la experiencia del usuario en Chrome que destacan estadísticas de rendimiento reales.
• Lighthouse: Haz clic en el botón de descarga para guardar informes desde el panel de auditoría de las Herramientas para desarrolladores de Chrome:

  

Prueba los requisitos principales de las apps web progresivas

Lighthouse te ayuda a probar la seguridad, la funcionalidad, la accesibilidad, el rendimiento y el rendimiento del motor de búsqueda. En particular, Lighthouse verifica si tu sitio implementa correctamente funciones de la AWP, como los service worker y el manifiesto de la app web.

Lighthouse también prueba si tu sitio puede proporcionar una experiencia sin conexión aceptable.

Puedes descargar un informe de Lighthouse en formato JSON o, si usas la extensión de Chrome de Lighthouse, compartir el informe como una Gist de GitHub: haz clic en el botón para compartir, selecciona Abrir en el visualizador y, luego, vuelve a hacer clic en el botón para compartir en la nueva ventana y en Guardar como Gist.

Para exportar un informe a un gist desde la extensión de Lighthouse para Chrome, haz clic en el botón Compartir.

Utiliza análisis, seguimiento de eventos y métricas empresariales para hacer un seguimiento del rendimiento en el mundo real

Si es posible, mantén un registro de los datos de estadísticas antes de implementar los cambios: porcentajes de rebote, tiempo en la página, páginas de salida: lo que sea relevante para los requisitos de tu empresa.

Si es posible, registra las métricas comerciales y técnicas que podrían verse afectadas, para que puedas comparar los resultados después de realizar cambios. Por ejemplo, un sitio de comercio electrónico podría hacer un seguimiento de los pedidos por minuto o registrar estadísticas de pruebas de esfuerzo y resistencia. Es probable que los costos de almacenamiento de backend, los requisitos de CPU, los costos de entrega y la resiliencia mejoren si reduces el peso de la página y las solicitudes de recursos.

Si no se implementan las estadísticas, este es el momento. Las métricas y las estadísticas empresariales son la decisión final sobre si tu sitio funciona o no. Si corresponde, incorpora el seguimiento de eventos para las acciones de los usuarios, como los clics en botones y las reproducciones de video. También puedes implementar un análisis de flujo de objetivos: las rutas por las que los usuarios navegan hacia las "conversiones".

Puedes consultar la Velocidad del sitio de Google Analytics para verificar cómo las métricas de rendimiento se correlacionan con las métricas comerciales. Por ejemplo, "¿qué tan rápido se cargó la página principal?" en comparación con "¿qué tan rápido se cargó la página principal?" en comparación con "¿qué tan rápido se cargó la página principal?".

Google Analytics usa datos de la API de Navigation Timing.

Es posible que desees registrar datos con una de las APIs de rendimiento de JavaScript o con tus propias métricas, por ejemplo:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

También puedes usar ReportingObserver para verificar las advertencias de intervención y baja del navegador. Esta es una de las muchas APIs que puedes usar para obtener mediciones en tiempo real de usuarios reales.

Experiencia real: grabación de pantalla y video

Haz una grabación de video de la carga de una página en un dispositivo móvil y una computadora de escritorio. Esto funciona aún mejor con velocidades de fotogramas altas y si agregas un temporizador.

Es posible que también quieras guardar las presentaciones en pantalla. Hay muchas apps de grabación de presentaciones en pantalla para plataformas de Android, iOS y computadoras de escritorio (y secuencias de comandos que hacen lo mismo).

La carga de la página de grabación de video funciona de manera muy similar a la vista de tira de película en WebPagetest o en Capture Screenshots de las Herramientas para desarrolladores de Chrome. Se obtiene un récord real de la velocidad de carga de los componentes de página: lo que es rápido y lo que es lento. Guarda grabaciones de video y presentaciones en pantalla para compararlas con mejoras posteriores.

¡Una comparación entre el antes y el después puede ser una excelente manera de demostrar mejoras!

¿Qué más?

Si es relevante, obtén una puntuación de sobredimensionamiento de la Web. Esta es una prueba divertida, pero también puede ser una manera convincente de demostrar el sobredimensionamiento del código o de que realizaste mejoras.

La sección What Does My Site Cost?, que se muestra a continuación, brinda una guía aproximada sobre el costo financiero de cargar un sitio en diferentes regiones.

Hay muchas otras herramientas independientes y en línea disponibles: consulta perf.rocks/tools.