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é debes probar? |
|---|---|---|
| Garantiza la privacidad, la seguridad y la integridad de los datos, y habilita el 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 para el tiempo de respuesta interactivo y el tamaño de la carga útil, por ejemplo, el TTI en 3G. Establece un presupuesto de rendimiento. |
| Reduce 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 de peso de la página: por ejemplo, la primera carga debe ser inferior a 400 KB. Comprueba si hay JavaScript 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 busca código no utilizado 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, en especial los dispositivos de baja especificación. | Comprueba si hay JavaScript pesado. Encuentra el código JavaScript y CSS sin usar con las herramientas de cobertura. Verifica si hay un tamaño de DOM excesivo y secuencias de comandos que se ejecutan 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 variedad de herramientas y técnicas para auditar sitios web:
- Herramientas del sistema
- Herramientas integradas del 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 sabes cómo hacerlo, consulta la Guía de introducción del panel de red de Chrome DevTools. Hay herramientas similares disponibles para Firefox, Safari, Internet Explorer y Edge.
Recuerda llevar un registro de los resultados antes de realizar cambios. En el caso de las solicitudes de red, 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 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 de 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 total 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 ancho de banda bajo y latencia alta. 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, lleva un registro del uso de la memoria y 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.
Prueba el rendimiento de la primera carga y las cargas posteriores
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
- WebPagetest: Cada resultado 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 las estadísticas de rendimiento reales.
- Lighthouse: Haz clic en el botón de descarga para guardar informes del panel de auditoría de Chrome DevTools:
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 AWP, como los trabajadores del servicio 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 como JSON o, si usas la extensión de Chrome de Lighthouse, comparte el informe como un Gist de GitHub: haz clic en el botón de compartir, selecciona Open in Viewer y, luego, haz clic en el botón de compartir nuevamente en la ventana nueva y selecciona Save as Gist.
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 de backend, los requisitos de CPU, los costos de publicación 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?"
Google Analytics utiliza datos de la API de Navigation Timing.
Te recomendamos que registres los 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: grabación de pantalla y video
Haz una grabación de video de la carga de la página en dispositivos móviles y computadoras. 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 similar a la vista de tira de película en WebPagetest o Capturar capturas de pantalla en Herramientas para desarrolladores de Chrome. Obtienes un registro real de la velocidad de carga de los componentes de la página: qué es rápido y qué 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.
¿Cuánto cuesta mi sitio?, que se muestra a continuación, proporciona una guía aproximada del costo financiero de cargar tu sitio en diferentes regiones.
Hay muchas otras herramientas independientes y en línea disponibles: consulta perf.rocks/tools.