Uh! aquí hay una
⚠️ Corrección: En el minuto 0’59" del video dije que para LCP, es malo si es menor a 2.5sec; es totalmente lo opuesto, tal como se ve en la misma gráfica, LCP estará bien cuando se mantiene menor a 2.5seg 😁
Entendiendo el rendimiento
Todo lo que aprenderás sobre optimización web
¿Vale el esfuerzo optimizar un sitio web?
¿Cuándo realmente un sitio es rápido o lento?
Antes de optimizar...
Aprendiendo a medir
User Performance Metrics
Nuestro proyecto
Crítical Rendering Path
Etapas de render del navegador
Network waterfall y recursos que bloquean el navegador
Priorización de recursos
Preloading y prefetching de recursos
Fases Paint y Layout del Critical Render Path
CSS
Detectando Paints costosos y optimizando animaciones
Bloqueos y complejidad en selectores
WebFonts
WebFonts y su impacto en rendimiento
Imágenes, Iconos y SVG
Imágenes, formato y compresión
Imágenes y compresión
¿WebFont, Imagen o SVG?
Técnicas avanzadas con Lazy Loading
Técnicas avanzadas con Responsive Loading
Aplicaciones JavaScript
JavaScript y aplicaciones modernas y Utilizando un servidor de producción
Analizando el bundle de la aplicación
Reduciendo el tamaño del bundle
Code Splitting
Lazy Module Loading
Llevando los listeners a otro nivel
Instalando Modal video
Lazy loading del modal
Moviendo la carga de rendering hacia el servidor: Server Side Rendering
Aplicando SSR
Pre-renderizando el contenido: Static Generation
Caché
Cómo funciona el Caché de recursos y CDN
Deploy en Netlify y automatización de contenido en GitHub Actions
Aplicando Github Actions
Interceptando los requests del navegador con Service Workers
Performance Budget
Performance budget y auditorias automatizadas
Automatizando una auditoría con Lighthouse CI
Medidas reales y monitoreo constante
Conclusiones
Conclusiones
Create an account or log in
Keep learning for free! Join and start boosting your career
User experience is crucial to the success of a website. Three essential metrics that allow us to measure the quality of the experience are LCP, FID and CLS. Let's analyze each of these metrics in detail to understand how they impact the user's perception of our website and, of course, how we can optimize them. Not only do they determine the fluidity with which users interact with our pages, but they also affect overall performance and conversions, embodying the difference between digital success and failure.
The LCP measures the time it takes to load the largest element visible in the browser display window. This element is usually an image or a significant block of text and is the metric that tells us how our site is loading in visual terms. How fast this element loads is crucial to the user's perception of the site's loading speed.
An example of a good LCP can be found on Instagram, where significant logos and images load from the first milliseconds and remain visible, ensuring a positive user experience.
FID measures the time between when a user first interacts with a page (e.g., clicking a link or button) and when the browser actually responds to that interaction. It is a critical metric in evaluating initial page interactivity.
In complex scenarios, the FID is measured by the longest response time recorded, which can happen if the browser is busy processing other elements. Optimizing FID involves reducing the load on the browser's main execution to prioritize a fast response to user interaction.
CLS measures the visual stability of the page and evaluates how many elements change position unexpectedly while the page is loading. This is crucial because a site with too many content jumps can frustrate users, especially if they try to interact with something that suddenly shifts.
A typical example is when a button suddenly appears and displaces the visual content, negatively affecting the user experience. Stability in design is key to keep users focused and satisfied.
To optimize these metrics and, consequently, improve the user experience, several strategies can be implemented. Here are some practical recommendations:
With these steps, you not only achieve an outstanding user experience, but also optimize overall website performance, which can result in higher conversion rates. Remember to always stay up to date with web development best practices and continue to learn in order to always improve.
Contributions 17
Questions 0
Uh! aquí hay una
⚠️ Corrección: En el minuto 0’59" del video dije que para LCP, es malo si es menor a 2.5sec; es totalmente lo opuesto, tal como se ve en la misma gráfica, LCP estará bien cuando se mantiene menor a 2.5seg 😁
LCP: Larget Contentful Paint
El tiempo que tarda en pintar el mayor elemento visible en la ventana.
FID: First Input Delay (Demora del primer input)
El tiempo que tarda la página en responder a las acciones del usuario.
El FID mide por el mayor tiempo de respuesta.
CLS: Cumulative Layout Shift (Acumulaciones en los altos de los elementos)
Mide todos los cambios inesperados en el layout de una página.
Gracias profesor.
LCP ⇒ Carga
FID ⇒ Velocidad de interactividad
CLS ⇒ Estabilidad de elementos mostrados en el website
<h4>Apuntes</h4>Significa el tiempo que tarde en pintar el mayor elemento visible en la ventana
✅ Esta medida sera buena si tarda entre 0 a 2.5 segundos
🟡 Necesita mejora si esta entre 2.5 a 4 segundos
❌ Deficiente de 4 segundos o más
<h3>FID [First Input Delay]</h3>El tiempo que tarda la página en responder a las acciones del usuario
✅ Esta medida sera buena si tarda entre 0 a 100 milisegundos
🟡 Necesita mejora si esta entre 100 a 300 milisegundos
❌ Deficiente de 300 milisegundos o más
<h3>CLS [Cumulative Layout Shift]</h3>✅ Esta medida sera buena si esta en 0 a 0.1
🟡 Necesita mejora si esta entre 0.1 a 0.25
❌ Deficiente de 0.25 o más
RESUMEN: Debemos usar las métricas que son LCP, FID, CLS para mejorar la experiencia de usuario
Viendo este video, me interesé en como se calcularía el CLS en un sitio, ya que este valor a diferencia de los anteriores no está dado por el tiempo. Leyendo esta página, hice el siguiente resumen de como calcularlo.
Nota: Primero es importante caer en cuenta que un cambio de disposición (Layout Shift) se da cuando un elemento cambia su posición inicial. Si un elemento cambia su tamaño o un nuevo elemento es agregado al DOM, no hay un cambio de disposición a menos que esto haga que otro componente ya visible cambie su posición.
El calculo del puntaje del CLS se da por la siguiente formula:
puntaje de cambio = fracción de impacto * fracción de distancia
<Imagen obtenida de https://web.dev/cls/>
En esta imagen podemos ver un elemento que toma el 50% del viewport en el primer cuadro, y en el segundo cuadro el elemento se ha movido un 25% hacia abajo en el viewport. La línea roja está indicando la union del area visible del elemento en ambos cuadros, que en este caso es del 75% (50% inicial y 25% del movimiento), por lo tanto la fracción de impacto de este elemento es de 0.75
.
<Imagen obtenida de https://web.dev/cls/>
La fracción de distancia se calcula obteniendo la distancia mayor que un elemento inestable (la caja gris con texto, en este ejemplo) se ha movido en el cuadro actual, este movimiento se debe tener en cuenta en relación a la dimensión mas grande del viewport (altura o anchura).
En el ejemplo de arriba, la dimensión mas grande del viewport es claramente la altura y el elemento se movio un 25% de la altura del viewport, por lo que la fracción de distancia es de 0.25
.
Esta fracción de distancia se puede obtener dividiendo la cantidad de píxeles que se movió el elemento divido la dimensión mas grande: pixeles movidos / dimensión mas grande
.
Teniendo en cuenta el ejemplo anterior, ya tenemos las dos fracciones que necesitamos para calcular el puntaje de cambio. Recordemos que nuestra fracción de impacto es de 0.75 y nuestra fracción de distancia es de 0.25, por lo tanto aplicando ambos en la formula nos da que:
puntaje de cambio = 0.75 * 0.25 = 0.1875
Este curso es increíble. Lo que mas me esta gustando es que esta actualizado, ya que los responsables de Google en proveer estas herramientas de medición de performance constantemente hacen ajustes a sus mediciones. Y hace poco como en Mayo aproximadamente, realizaron unos cambios y esas métricas que mencionan tienen distinta ponderación porque cada vez mas se estan enfocando mucho en la experiencia del usuario, lo cual es bueno, pero tambien nos permite estar constantemente viendo que mas podemos mejorar para ayudar a nuestros usuarios.
Iniciativa de Google para proporcionar una guía unificada de indicadores de calidad que son esenciales para brindar una excelente experiencia de usuario en la web, tiene como objetivo simplificar el panorama y ayudar a los sitios a centrarse en las métricas que más importan, los llamados;
⠀
Core Web Vitals: Estos son las métricas más importantes para medir las distintas facetas de experiencia de usuario, se centran en carga, interactividad y estabilidad visual.
Falta que se adhiera al curso el recurso de las diapositivas
Que importante que mencionen las metricas!
Métricas vitales
Tengo una duda con relación al CLS, puede ayudar el skeleton a mejorar esta métrica en recursos asíncronos como por ejemplo un Card de artículos
Want to see more contributions, questions and answers from the community?