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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Network waterfall y recursos que bloquean el navegador

8/38
Recursos

Aportes 27

Preguntas 20

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Tanto JavaScript como CSS son recursos bloqueantes. Esto quiere decir que cada vez que el navegador encuentra estos archivos, debe parar e interpretarlos mientras sigue haciendo parsing del HTML.
Script por defecto
bloquea el parsing durante la descarga y ejecución del script

Script Defer
descarga el script JS pero no lo ejecuta hasta que se finaliza el parsing del HTML.

Script Async
descarga el script JS durante el parsing y una vez se termine de descargar lo ejecuta inmediatamente, bloqueando solo una “pequeña” parte del parsing.

Hola, aunque como dice el profe el número no es lo más importante por ahora ¿puedo interpretar que entre mas alto el numerito mejor el performance?

Cuando agrego los atributos el número es más alto en mi caso.

Hola, como podria hacer esto en Wordpress?

¡Genial, a mi me pasó de 13 a 75 solamente haciendo el cambio para async!

Mi web cargaba al 45% de performance en lighthouse y con esto subio al 80 wtf 😄

o sea que es mejor tener los script arriba en o abajo??

El lighthouse tambien sale como Audit en Chrome.

**Con Async funciono de maravilla, **

Con Defer ocurrio un error, y bueno era de esperarse ya que la ejecucion la realizo hasta el final por lo que elementos de html que intento hacer el parse debieron tener conflictos al crearse si nuestro dom dependia de funciones del JS para su generación

Algo que me di cuenta (probando con otra página) es que da puntajes muchos mas altos si haces los tests en incógnito, ya que estuve leyendo y si tienes muchas extensiones en el navegador, puede afectar MUY negativamente al rendimiento

Por alguna razón cuando pongo async las imagenes desaparecen… y ya no las muestra u.u

Defer:

Async:

Creo que en la mayoría de los casos es también es buena idea poner los scripts antes de cerrar la etiqueta body para evitar de una manera más primitiva los bloqueos para el HTML, pero la forma defer me encanto

Cargar JavaScript de manera más eficiente

script Por defecto lo que hace esto es que bloquea el análisis del HTML para descargar el JavaScript y también para ejecutarlo, después de esto se reanuda el análisis del HTML.

script defer Lo que hace el diferido es que descarga el JavaScript de manera asíncrona (No bloquea el análisis del HTML) y la ejecución del JavaScript es diferida hasta que se termine el análisis del HTML. Nota: Si hay varios scripts defer se ejecutarán en el orden que fueron agregados en el documento.

script async Lo que hace el asíncrono es que descarga el JavaScript de manera asíncrona, pero una vez se descarga si se detiene el análisis del HTML para ejecutarlo, una vez se ejecuta se reanuda el análisis del HTML. Nota: No se garantiza la ejecución en el orden que fueron agregados en el documento.

Es genial este curso, estoy enamorado!

Que clases tan enriquecedoras! Excelente

Según vi en un comentario, el View Trace desapareció <https://github.com/GoogleChrome/lighthouse/issues/12788#issuecomment-887787209> Ahora hay un botón que se llama View Treemap que te redirige a otra ventana, pero no es lo mismo. Ahora, si vemos la clase, nos damos cuenta de que está en la pestaña **Performance** en donde podemos tener un reporte similar: Solo le damos en **click the record button** ![](https://static.platzi.com/media/user_upload/image-c8a1375f-ce37-4248-9616-4e1af818239d.jpg) Luego donde dice **stop** y listo, se genera un reporte similar... ![](https://static.platzi.com/media/user_upload/image-dc90c30e-1b09-464c-8b8d-71070fb2452b.jpg) No sé si sea lo mismo, pero, ahí lo dejo.
<https://github.com/GoogleChrome/lighthouse/issues/12788#issuecomment-887787209> El View Trace se elimino de las DevTools entonces esta clase ya no aplica desde hace 2 años 🥲
Le agregué async a esas etiquetas pero ahora no me cargan la imagenes ![]()![](https://static.platzi.com/media/user_upload/Screenshot%202023-11-20%20162733-7af54170-dee1-4883-a284-e3e1115d1080.jpg)![](https://static.platzi.com/media/user_upload/Screenshot%202023-11-20%20162733-439e7ff0-82f4-420f-a253-b2a76bb5d937.jpg)
Encontre que ahora view trace en el navegador se llama performance insights, es la misma herramientas con algunos detalles diferentes pero se funciona mas o menos igual

Les presento la grafica pero con react que al parecer usar el async por defecto

Defer me arrojó una mejora de 68
Async tiene una mejora de 86

Carga muy rápido porque tampoco tiene nada solo un poco de javascript.

Cabe mencionar que “refer” solo funciona con scripts externos, cuando el atributo src esta presente

¿Qué tanto influye mi velocidad a internet para las pruebas de performance?

en que año montaron este curso …el comentario mas antiguo es e 6 meses tiene este curso montado ese tiempo o mas

justo hoy se me esta presentando este problema…porque me colocaron dos Pop-ups y la pagina se fue al caño…

👌