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 el uso de APIs potentes | Por qué es importante el protocolo HTTPS | HTTPS implementado 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 diferida Establece objetivos para el tiempo de carga interactiva 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 los 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 con dispositivos de baja gama • Reducir los costos de hosting y publicación • Mejorar el rendimiento, la confiabilidad y la resiliencia de la publicación | Establece un presupuesto de peso de la página: por ejemplo, una primera carga de menos de 400 kB. Verifica 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 verifica si hay código sin usar con las 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 resiliencia de la publicación. | Busca solicitudes excesivas o innecesarias de 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 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, en especial en dispositivos móviles. | Usa el Administrador de tareas de Chrome para comparar el uso de memoria de tu sitio con el de otros 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 de gama baja. | Verifica si hay JavaScript pesado. Busca 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, descubrirás qué enfoque es relevante para cada tipo de auditoría.
Registra las solicitudes de recursos: cantidad, tamaño, tipo y tiempo
Un buen punto de partida para auditar 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 redes de las Herramientas para desarrolladores de Chrome. Hay herramientas similares disponibles para Firefox, Safari, Internet Explorer y Edge.
Recuerda mantener un registro de los resultados antes de realizar cambios. Para las solicitudes de red, puede ser tan simple como una captura de pantalla. También puedes guardar los datos de 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 obtener estadísticas precisas sobre el rendimiento de la primera carga. Si ya almacenas en caché a través de un service worker, borra el almacenamiento de la API de Cache. Te recomendamos que uses una ventana de incógnito (privada) para que no tengas que preocuparte por inhabilitar la caché del navegador ni quitar las entradas almacenadas en caché anteriormente.
Estas son algunas de las 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 la carga de la página.
- Eventos de la línea de tiempo 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 que sea particularmente grande (por ejemplo, de más de 100 KB)
- JavaScript sin usar Puedes verificarlo con la herramienta de cobertura de Chrome.
- Cantidad total y peso de los archivos de imagen
- Cualquier archivo de imagen individual que sea particularmente grande
- Formatos de imagen: ¿Hay 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).
- Verifica si hay un uso problemático de otros recursos, como las fuentes web (incluidas las fuentes de íconos).
- Revisa el cronograma de las Herramientas para desarrolladores para ver si hay algo 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 pruebas con la emulación de ancho de banda bajo y latencia alta. Recuerda realizar pruebas tanto en dispositivos móviles como en computadoras de escritorio, ya que algunos sitios usan la detección 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 de dispositivos.
Verifica la carga de memoria y CPU
Antes de realizar cambios, mantén un registro del uso de memoria y CPU.
En Chrome, puedes acceder al Administrador de tareas desde el menú Ventana. Esta es una forma sencilla de verificar los requisitos de una página web.
Prueba el rendimiento de la primera carga y de las 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á el almacenamiento en caché del contenido estático, el tiempo hasta el primer byte y si tu sitio hace un uso eficaz de las CDN.
Guarda los resultados
- WebPagetest: Cada resultado de la prueba tiene su propia URL.
- PageSpeed Insights: La herramienta en línea de PageSpeed Insights ahora incluye datos del Informe sobre la experiencia del usuario en Chrome que destacan las estadísticas de rendimiento en el mundo real.
- Lighthouse: Guarda los informes del panel de auditoría de las Herramientas para desarrolladores de Chrome haciendo clic en el botón de descarga:
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 comprueba si tu sitio implementa correctamente las funciones de PWA, como los service workers y un 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 como JSON o, si usas la extensión de Lighthouse para Chrome, puedes compartir el informe como un Gist de GitHub: 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.
Usa estadísticas, seguimiento de eventos y métricas empresariales para hacer un seguimiento del rendimiento en el mundo real
Si puedes, 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 tus requisitos comerciales.
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 puede hacer un seguimiento de los pedidos por minuto o registrar estadísticas para 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 de hacerlo. Las métricas y las estadísticas empresariales son el árbitro final para determinar 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 videos. También puedes implementar el análisis del flujo de objetivos, es decir, las rutas por las que navegan los usuarios para llegar a las "conversiones".
Puedes supervisar la velocidad del sitio de Google Analytics para comprobar cómo se correlacionan las métricas de rendimiento con las métricas de la empresa. 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 usa 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 intervención y baja del navegador. Esta es una de las muchas APIs para obtener mediciones en vivo y en el mundo real de usuarios reales.
Experiencia real: Grabación de pantalla y video
Graba un video de la carga de página en dispositivos móviles y computadoras de escritorio. Esto funciona aún mejor con velocidades de fotogramas altas y si agregas un cronómetro.
También puedes guardar grabaciones de pantalla. Existen muchas apps de grabación de screencasts para Android, iOS y plataformas de escritorio (y secuencias de comandos para hacer lo mismo).
La carga de página de grabación de video funciona de manera muy similar a la vista de tira de película en WebPagetest o Capturar capturas de pantalla en las 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 capturas de pantalla para compararlas con las mejoras posteriores.
Una comparación en paralelo del antes y el después puede ser una excelente manera de demostrar las mejoras.
¿Qué más?
Si corresponde, obtén una puntuación de sobrecarga web. Esta es una prueba divertida, pero también puede ser una forma convincente de demostrar el exceso de código o de mostrar que realizaste mejoras.
What Does My Site Cost?, que se muestra a continuación, ofrece 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.