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 23

Preguntas 18

Ordenar por:

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

o inicia sesi贸n.

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 鈥減eque帽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

Defer:

Async:

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

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.

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

Es genial este curso, estoy enamorado!

Que clases tan enriquecedoras! Excelente

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

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 鈥渞efer鈥 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 鈥l comentario mas antiguo es e 6 meses tiene este curso montado ese tiempo o mas

justo hoy se me esta presentando este problema鈥orque me colocaron dos Pop-ups y la pagina se fue al ca帽o鈥

馃憣