Entendiendo el rendimiento

1

Todo lo que aprender谩s sobre optimizaci贸n web

2

驴Vale el esfuerzo optimizar un sitio web?

3

驴Cu谩ndo realmente un sitio es r谩pido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Cr铆tical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorizaci贸n de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en rendimiento

Im谩genes, Iconos y SVG

15

Im谩genes, formato y compresi贸n

16

Im谩genes y compresi贸n

17

驴WebFont, Imagen o SVG?

18

T茅cnicas avanzadas con Lazy Loading

19

T茅cnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producci贸n

21

Analizando el bundle de la aplicaci贸n

22

Reduciendo el tama帽o del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Cach茅

31

C贸mo funciona el Cach茅 de recursos y CDN

32

Deploy en Netlify y automatizaci贸n de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditor铆a con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
4H
53M
29S

User Performance Metrics

5/38
Recursos

Aportes 15

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 馃榿

Web Vital

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.

Web Vitals

  • Largest Contentful Paint (LCP): Mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, el LCP debe ocurrir dentro de los 2.5 segundos posteriores al inicio de la carga de la p谩gina.
  • First Input Delay (FID): Mide la interactividad. Para proporcionar una buena experiencia de usuario, las p谩ginas deben tener un FID de menos de 100 milisegundos.
  • Cumulative Layout Shift (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las p谩ginas deben mantener un CLS de menos de 0.1.

Gracias profesor.

<h1>Como calcular el CLS</h1>

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

Como calcular la fracci贸n de impacto?

<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.

Como calcular la fracci贸n de distancia?

<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.

馃搱 User Performance Metrics

<h4>Ideas/conceptos claves</h4>

LCP 鈬 Carga

FID 鈬 Velocidad de interactividad

CLS 鈬 Estabilidad de elementos mostrados en el website

<h4>Apuntes</h4>
  • Cuando hablamos de experiencia de usuario existen 3 metricas que nos van a ayudar mucho con ello
    • LCP
    • FID
    • CLS
<h3>LCP [Large Contentful Paint]</h3>

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

  • El tiempo que tarda la p谩gina en responder a la primer acci贸n hecha por el 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>
  • Mide todos los cambios inesperados en el layout de una p谩gina

鉁 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

Web Vitals

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.

Ahora en Chrome 91 en los DevTools>Performance>Web Vitals si le hacemos hover podemos ver un pop-up que nos indica si nuestro performance esta bien o mal 馃槃

Link del video del team de Chrome 馃幀 馃憠Link

Falta que se adhiera al curso el recurso de las diapositivas

Que importante que mencionen las metricas!

M茅tricas vitales

  • LCP (Largest Contentful Paint)
    CARGA
    Es el tiempo que tarda en pintar el mayor elemento visible en la ventana.
    Este medida va a ser BUENA cuando est茅 entre 0 y 2.5 s; REGULAR cuando est茅 entre 2.5 y 4 s, y va a ser MALA cuando est茅 de 4 s en adelante.
    IDEALMENTE: los elementos que ocupan una buena porci贸n en nuestra p谩gina (como las im谩genes, como los logos), deber铆an aparecer desde los primeros milisegundos en la carga del sitio.
  • FID (First Input Delay)
    INTERACTIVIDAD
    Es el tiempo que tarda la p谩gina en responder a las acciones del usuario.
    Esta es la m茅trica que nos va a penalizar por el tiempo que nosotros nos demoremos en dar una respuesta ante la interactividad de nuestros usuarios.
    El tiempo, cuando es menor a 100 ms est谩 MUY BIEN, cuando est谩 entre 100 y 300 ms est谩 鈥淏IEN鈥, y cuando est谩 de 300 ms hacia arriba est谩 DEFICIENTE.
    El FID toma el peor tiempo de respuesta.
  • CLS (Cumulative Layout Shift)
    ESTABILIDAD
    Mide todos los cambios inesperados en el layout de una p谩gina.
    Esto nos va a pensalizar cuando de un momento a otro (sobre todo de manera inesperada o brusca) los elementos cambien de tama帽o.
    Cuando tenemos acumulaciones menores a 0.1 s est谩 BIEN, si est谩 entre 0.1 y 0.25 s est谩 鈥淥K鈥, y si est谩 de 0.25 s en adelante es DEFICIENTE.
    .
    Main Thread: es el hilo de ejecuci贸n.

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

User Performance Metrics

  • LCP: Largest Contentful Paint
    • Es el tiempo que tarda en pintar el mayor elemento visible en la ventana
    • Es el tiempo de carga
    • Muy bueno si esta entre 0 y 2.5s
  • FID: First Input Delay
    • Metrica que mide el tiempo que tarda la pagina en responder a las acciones del usuario
    • Es el tiempo hasta interactividad
    • Hasta 100ms es buen tiempo
  • CLS: Cumulative Layout Shift
    • Nos penaliza cuando hay momentos inesperados de cambios o de tama帽os en los elementos.
    • Es sobre la estabilidad de los elementos renderizados
    • Acumulaciones hasta 0.1 esta OK
<h4>User Performance Metrics</h4>
  1. LCP: CARGA Largest Contentful Paint -> El tiempo que tarda en pintar el mayor elemento visible en la ventana. Es buena con menos de 2.5 segundos, regular entre 2.6 y 4 segundos y mala mayor a 4 segundos. Desde los primeros milisegundos, las im谩genes deben ser las primeras cosas en cargar.
  2. FID: INTERACTIVIDAD First Input Delay -> El tiempo que tarda la p谩gina en responder a las acciones del usuario. Es buena respuesta en menos de 100ms, regular entre 100 y 300ms y mala mayor a 300ms. El FID va a medir nuestro peor tiempo de respuesta.
  3. CLS: ESTABILIDAD Cumulative Layout Shift -> Mide todos los cambios inesperados en el layout de una p谩gina. Es buena si los cambios son menores a 0.1, regulares si son entre 0.1 y 0.25 y malos mayores a 0.25