Utiliza herramientas para medir el rendimiento

Existen varios objetivos principales para crear un sitio resiliente y de alto rendimiento 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 habilita un uso potente de las APIs. Por qué HTTPS es importante Se implementó HTTPS para todas las páginas, rutas y recursos del sitio.
Mejora el rendimiento de la carga El 53% de los usuarios abandonan los sitios que demoran más de tres segundos en cargarse. JavaScript y CSS que se pueden cargar de forma asíncrona o diferida. Establece objetivos de tiempo para interactivo y tamaño de carga útil; por ejemplo, TTI en 3G. Establece un presupuesto de rendimiento.
Reducir 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 apps web, lo que es especialmente importante para los usuarios con dispositivos de baja especificación • Reducir los costos de alojamiento y publicación • Mejorar el rendimiento, la confiabilidad y la capacidad de recuperación de la publicación Establece un presupuesto para el peso de la página; por ejemplo, primera carga inferior a 400 KB. Verifica si el código JavaScript es pesado. Verifica los tamaños de los archivos para encontrar imágenes, contenido multimedia, HTML, CSS y JavaScript excesivos. Busca imágenes que se puedan cargar de forma diferida y verifica si hay código sin usar con herramientas de cobertura.
Reduce las solicitudes de recursos • Reduce los problemas de latencia. • Reduce los costos de publicación. • Mejora el rendimiento, la confiabilidad y la capacidad de recuperación de la publicación. Busca solicitudes excesivas o innecesarias para cualquier tipo de recurso. Por ejemplo: archivos que se cargan de forma repetida, JavaScript que se carga en varias versiones, CSS que nunca se usa, imágenes que nunca se ven (o que podrían cargarse de forma diferida).
Cómo optimizar el uso de 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 se carga la página principal y se usan otras funciones del sitio.
Reduce la carga de la CPU Los dispositivos móviles tienen una CPU limitada, especialmente los dispositivos de especificaciones bajas. Comprueba si hay JavaScript pesado. Encuentra el código JavaScript y CSS sin usar con las herramientas de cobertura. Verifica que no haya tamaños de DOM excesivos y secuencias de comandos que se ejecuten innecesariamente en la primera carga. Busca JavaScript cargado en varias versiones o bibliotecas que se podrían evitar con una refactorización menor.

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

  • Herramientas del sistema
  • Herramientas integradas en el navegador
  • Extensiones del navegador
  • Aplicaciones de prueba en línea
  • Herramientas de emulación
  • Analytics
  • Métricas proporcionadas por servidores y sistemas empresariales
  • Grabación de pantalla y video
  • Pruebas manuales

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

Registra las solicitudes de recursos: cantidad, tamaño, tipo y tiempo

Una buena forma de comenzar cuando se audita un sitio es verificar las páginas con las herramientas de red de tu navegador. Si no estás seguro de cómo hacerlo, consulta la guía de introducción del panel de red de Herramientas para desarrolladores de Chrome. Hay herramientas similares disponibles para Firefox, Safari, Internet Explorer y Edge.

Recuerda llevar un registro de los resultados antes de realizar cambios. Para las solicitudes de red, puede ser tan simple como tomar 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 para 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 del rendimiento de la primera carga. Si ya almacenas en caché a través de un service worker, borra el almacenamiento de la API de caché. Te recomendamos que uses una ventana de incógnito (privada) para no tener que preocuparte por inhabilitar la caché del navegador ni quitar las entradas almacenadas en caché anteriormente.

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

  • Rendimiento de la carga: Lighthouse proporciona un resumen de las métricas de carga. Addy Osmani escribió un excelente resumen de los momentos clave del usuario para la carga de la página.
  • Eventos del cronograma para cargar y analizar recursos, y el uso de memoria Si quieres profundizar, ejecuta la generación de perfiles de memoria y JavaScript.
  • Peso total de la página y cantidad de archivos.
  • Cantidad y peso de los archivos JavaScript.
  • Cualquier archivo JavaScript individual de gran tamaño (por ejemplo, superior a 100 KB)
  • Código JavaScript sin usar. Puedes verificarlo con la herramienta de cobertura de Chrome.
  • Cantidad y peso totales de los archivos de imagen.
  • Archivos de imagen individuales de gran tamaño
  • Formatos de imagen: ¿Hay archivos PNG que podrían ser JPEG o SVG? ¿Se usa WebP con resguardos?
  • Si se usan técnicas de imágenes responsivas (como srcset).
  • Tamaño del archivo HTML.
  • Cantidad total y peso de los archivos CSS.
  • CSS sin usar (en Chrome, usa el panel de cobertura).
  • Comprueba si hay un uso problemático de otros recursos, como las fuentes web (incluidas las fuentes de íconos).
  • Revisa el cronograma de DevTools en busca de elementos que bloqueen la carga de la página.

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

Cómo verificar la carga de la memoria y la CPU

Antes de realizar cambios, mantén un registro de la memoria y el uso de la CPU.

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

Administrador de tareas de Chrome que muestra el uso de memoria y CPU de las cuatro pestañas del navegador abiertas
Administrador de tareas de Chrome: ¡Ten cuidado con los elementos que consumen memoria y CPU!

Prueba el rendimiento de la primera carga y las siguientes

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á la caché de contenido estático, el tiempo hasta el primer byte y si tu sitio usa las CDN de manera eficaz.

Guarda los resultados

Prueba los requisitos principales de la app web progresiva

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 las funciones de la AWP, como los service workers y un manifiesto de 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, compartirlo como un Gist de GitHub. Para ello, haz clic en el botón para compartir, selecciona Abrir en el visor y, luego, vuelve a hacer clic en el botón para compartir en la ventana nueva y selecciona Guardar como Gist.

Captura de pantalla que muestra cómo exportar un informe de Lighthouse de Chrome como gist
Exporta un informe a un resumen desde la extensión de Chrome de Lighthouse: haz clic en el botón de compartir

Usa estadísticas, seguimiento de eventos y métricas empresariales para hacer un seguimiento del rendimiento en el mundo real

Si puedes, lleva un registro de los datos de estadísticas antes de implementar los cambios: tasas de rebote, tiempo en la página, páginas de salida, todo 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 los cambios. Por ejemplo, un sitio de comercio electrónico podría hacer un seguimiento de los pedidos por minuto o registrar estadísticas para las pruebas de esfuerzo y resistencia. Es probable que los costos de almacenamiento del 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 aún no implementaste las estadísticas, este es el momento. Las métricas y estadísticas empresariales son el árbitro final que determina si tu sitio funciona o no. Si corresponde, incorpora el seguimiento de eventos para las acciones del usuario, como clics en botones y reproducciones de video. También te recomendamos implementar el análisis del flujo de objetivos: las rutas por las que tus usuarios navegan hacia las "conversiones".

Puedes supervisar la velocidad del sitio de Google Analytics para verificar cómo se correlacionan las métricas de rendimiento con las métricas comerciales. Por ejemplo, "¿qué tan rápido se cargó la página principal?" en comparación con "¿la entrada a través de la página principal generó una venta?"

Captura de pantalla que muestra la velocidad del sitio de Google Analytics

Google Analytics utiliza datos de la API de Navigation Timing.

Es posible que quieras registrar datos con una de las APIs de rendimiento de JavaScript o 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 si hay advertencias de baja del navegador y de intervención. Esta es una de las muchas APIs para obtener mediciones en tiempo real del mundo real de usuarios reales.

Experiencia real: Pantalla y grabación de video

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

También te recomendamos que guardes las presentaciones en pantalla. Existen muchas apps para grabar presentaciones en pantalla para Android, iOS y plataformas de computadoras de escritorio (y secuencias de comandos para hacer 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 Capture Screenshots en las Herramientas para desarrolladores de Chrome. Obtienes un registro real de la velocidad de carga de los componentes de la página: lo que es rápido y lo que es lento. Guarda grabaciones de video y presentaciones en pantalla para compararlas con las mejoras posteriores.

Una comparación en paralelo de antes y después puede ser una excelente manera de demostrar las mejoras.

¿Qué más?

Si corresponde, obtén una Puntuación de aumento de tamaño web. Esta es una prueba divertida, pero también puede ser una forma convincente de demostrar el aumento excesivo de código o de mostrar que realizaste mejoras.

La sección ¿Cuánto cuesta mi sitio?, que se muestra a continuación, es una guía aproximada del costo financiero de cargar tu sitio en diferentes regiones.

Captura de pantalla de whatdoesmysitecost.com

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