Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:58

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Curso de Optimización Web

Clase 4 de 38

Clase 4 / 38

Recursos

¿Por qué la medición es crucial antes de optimizar el código?

Para llevar a cabo una optimización eficaz en nuestro código, es primero esencial medir su rendimiento. Medir antes de optimizar nos proporciona una base objetiva para evaluar nuestras mejoras. Sin mediciones claras, cualquier optimización podría ser arbitraria y probablemente ineficaz. La frase "lo que no se mide, no se mejora" capta la esencia de este principio fundamental. Al no medir, no podemos saber si las modificaciones han tenido un impacto positivo. En este sentido, la herramienta Chrome DevTools se presenta como esencial para el proceso de medición.

¿Qué herramientas son útiles para medir el rendimiento web?

Para medir el rendimiento de las páginas web, Chrome DevTools resulta una herramienta imprescindible. Esta se encuentra en el navegador Chrome y su apertura es sencilla a través del menú vista > desarrollador > herramientas de desarrollo. Dentro de DevTools, las pestañas más importantes para este proceso son:

Network: Permite observar todas las interacciones entre el navegador y la Internet, como las peticiones y respuestas de una página. Se puede ver el tamaño de las transferencias, la prioridad de los elementos, y el Waterfall que muestra cómo se cargan los recursos.
Lighthouse: Ideal para generar reportes sobre el desempeño del sitio. Aunque Lighthouse ofrece variados tipos de reportes, el enfoque principal aquí será la categoría de performance.

Estas herramientas facilitan el análisis minucioso de cada aspecto de nuestra página, permitiéndonos tomar decisiones informadas sobre el rendimiento y las áreas de mejora.

¿Cómo el modelo RAIL mejora la medición del rendimiento?

El modelo RAIL, propuesto por Google, se centra en la experiencia del usuario al medir el rendimiento web. Esto significa que las métricas sugeridas están diseñadas para reflejar qué tan efectiva es una página desde la perspectiva del usuario. Este enfoque destaca que la percepción del rendimiento es subjetiva y por ende difícil de cuantificar estrictamente, pero el modelo ofrece un estándar basado en estudios de interacción real de usuarios.

¿Cómo puede el tiempo de carga afectar la experiencia del usuario?

Un error común es pensar únicamente en el tiempo total de carga como medida del rendimiento. Sin embargo, al comparar dos páginas que cargan en un segundo, la que ofrece contenido interactivo antes podría brindar una mejor experiencia al usuario. En este sentido, no solo es importante la rapidez, sino cómo el contenido es accesible y consumible durante el proceso de carga.

¿Qué significa alcanzar el percentil 75 según RAIL?

La meta es optimizar para que al menos el 75% de los usuarios tengan una experiencia satisfactoria al interactuar con la página. Esto se traduce en dividir las respuestas en cuatro partes (percentiles) y asegurarse que tres de estas partes cumplan con las expectativas de rendimiento.

Consejos prácticos para optimizar el rendimiento web

Utilización de herramientas de medición: Usa Chrome DevTools y Lighthouse para obtener datos precisos sobre los aspectos a mejorar.
Enfoque en la experiencia del usuario: Prioriza las medidas que realmente impactan la interacción del usuario con la página.
Diversidad de contextos de usuario: Considera las diversas condiciones de conexión a internet de los usuarios y optimiza el desempeño en una amplia gama de escenarios.

Recuerda que la clave está en ofrecer una experiencia uniforme, rápida y satisfactoria a la mayoría de tus usuarios para asegurar un sitio web exitoso. Con estas mediciones y herramientas, estarás mejor preparado para enfrentar los desafíos de optimización web.