Monitoreo de Métricas en Sitios Web en Producción

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:003:25

Monitoreo de Métricas en Sitios Web en Producción

Curso de Optimización Web

Clase 37 de 38

Clase 37 / 38

Recursos

¿Qué son las medidas reales y por qué importan?

Durante todo tu proceso de desarrollo web, es esencial recordar que las evaluaciones realizadas en tu propio entorno, aunque útiles, no reflejan completamente la experiencia de usuario real. Estas evaluaciones superficiales, conocidas como medidas de laboratorio, ofrecen un control pleno sobre las condiciones de prueba desde tu propio computador o servidores, como hemos hecho previamente. Sin embargo, estas no capturan la diversidad de circunstancias que enfrentan los usuarios al interactuar con tu sitio en el mundo real.

¿Por qué es fundamental medir en producción?

Una vez que tu sitio está en producción y recibe tráfico real, es crucial tomar medidas en este entorno para comprender verdaderamente la experiencia del usuario. Aquí hay tres razones clave para ello:

Variedad de Condiciones de Usuario: Los usuarios acceden a sitios web desde una multitud de dispositivos y condiciones de red. Estas variables pueden alterar las métricas de rendimiento observadas durante las pruebas de laboratorio.
Seguimiento Histórico: Mantener un registro continuo de las métricas a lo largo del tiempo te permite evaluar progresos y detectar áreas de mejora o declive.
Percentiles de Usuario: Asegúrate de que tu sitio cumple con los percentiles 55 y 75 de los usuarios, que representan una visión realista de cómo la mayoría experimenta tu sitio. Esto es crucial para decisiones informadas sobre optimización.

¿Cómo evaluar el rendimiento real?

Aunque no se puede abarcar todo el proceso de recopilación de datos en un curso teórico, existen herramientas en el mercado que facilitan esta tarea. Servicios como New Relic o Google Analytics están diseñados para ayudar a los desarrolladores y equipos a medir y analizar el comportamiento de los usuarios con gráficos bien estructurados.

Estas herramientas permiten visualizar información sobre cómo los usuarios interactúan con el sitio bajo diversas condiciones. En escenarios reales, como en la imagen de otra aplicación antes mencionada, se identifican patrones y se valida si el percentil clave (el 75, por ejemplo) cumple con las expectativas de rendimiento establecidas.

Recomendaciones para la recopilación de datos

Una vez que te encuentres en la etapa de tener tráfico real en tu aplicación, aprovecha los recursos disponibles para recopilación de datos. Aquí tienes algunas recomendaciones:

Configura Herramientas de Análisis: Asegúrate de que tu sitio esté integrado con herramientas analíticas adecuadas que te aporten datos significativos y accionables.
Monitorea Regularmente: No solo midas una vez y olvides; las condiciones cambian con el tiempo, y el monitoreo regular te proporcionará información valiosa para la evolución continua de tu sitio.
Analiza y Actúa: Usa los datos recopilados para identificar tendencias y desafíos. Actúa rápidamente para mejorar la experiencia del usuario y optimizar el rendimiento.

En la sección de recursos de tu plataforma de aprendizaje, encontrarás enlaces a servicios recomendados para ayudarte en esta importante tarea de evaluación y mejora continua. Recuerda, el compromiso con la experiencia del usuario es constante y requiere adaptabilidad y curiosidad constante. ¡Sigue aprendiendo y mejorando!

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Monitoreo de Métricas en Sitios Web en Producción