Entendiendo el rendimiento

1

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

2

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

3

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

4

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

5

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

6

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

Crítical Rendering Path

7

Entendiendo el Critical Rendering Path en Navegadores Web

8

Optimización de JavaScript para mejorar rendimiento web

9

Priorización de recursos CSS para mejorar rendimiento web

10

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

11

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

12

Optimización de Animaciones CSS para Mejorar Rendimiento

13

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

14

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

15

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

16

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

17

Comparación entre WebFonts y SVG: Ventajas y Desventajas

18

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

19

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

20

Optimización de JavaScript para Producción Web

21

Análisis y Optimización de Bundles con Webpack

22

Optimización de Bundles en Proyectos Web con Webpack

23

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

24

Lazy Loading de Videos con JavaScript y Modales

25

Event Propagation y Filtrado de Eventos en JavaScript

26

Integración de Librerías en Proyectos JavaScript

27

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

28

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

29

Implementación de Server Side Rendering en NodeJS

30

Optimización de Sitios con Static Site Generation

Caché

31

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

32

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

33

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

34

Implementación de Caché con Service Workers en JavaScript

Performance Budget

35

Auditoría de Performance Web con Github Actions y Lighthouse

36

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

37

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

Conclusiones

38

Optimización del Critical Render Path en Aplicaciones Web

No tienes acceso a esta clase

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

Optimización de JavaScript para mejorar rendimiento web

8/38
Recursos

¿Cómo optimizar la carga de recursos en el navegador?

Optimizar la carga de recursos en un navegador es crucial para mejorar el rendimiento de cualquier aplicación web. En este contexto, enfocarse en cómo gestionar JavaScript y CSS puede marcar una diferencia significativa. Exploraremos cómo puedes ayudar al navegador a realizar su trabajo de manera más eficiente eliminando los recursos bloqueantes.

¿Qué son los recursos bloqueantes y cómo afectan al navegador?

  • Recursos bloqueantes: Tanto JavaScript como CSS son considerados recursos bloqueantes del navegador. Cuando el navegador encuentra estos archivos, detiene su ejecución para descargarlos y ejecutarlos.
  • Impacto en el HTML parsing: El proceso de análisis del HTML se interrumpe, es decir, se bloquea hasta que los archivos de JavaScript y CSS se descargan y ejecutan. Esto puede causar retardos en la carga y visualización de la página.

¿Cómo mejorar la carga de JavaScript?

Para mejorar la carga de los scripts JavaScript y minimizar el bloqueo de HTML, podemos utilizar los atributos async y defer.

Etiqueta script: Estructura básica para cargar scripts en HTML es:

<script src="tu-archivo.js"></script>
  • Uso de async: Permite que el script se descargue y ejecute paralelamente al parsing del HTML, pero ejecutará el script tan pronto como se descargue, lo cual puede seguir bloqueando momentáneamente el parsing.
<script src="tu-archivo.js" async></script>
  • Uso de defer: Este atributo no solo descarga el script en paralelo sino que retrasa su ejecución hasta que el HTML se ha descargado completamente. Así, evita bloquear el parsing y permite una carga más fluida.
<script src="tu-archivo.js" defer></script>

¿Cómo aplicar estas estrategias en un proyecto?

Para aplicar estas estrategias, puedes seguir los siguientes pasos:

  1. Identificación de Scripts Bloqueantes: En herramientas de desarrollo como Chrome Developer Tools, usa el panel Lighthouse para analizar el rendimiento y detectar scripts que bloquean el parsing.

  2. Modificar Archivos HTML: Actualiza tus etiquetas script en el HTML para incluir async o defer según tus necesidades y prueba para identificar cuál ofrece mejores resultados.

  3. Medición y Ajuste: Vuelve a medir los cambios utilizando las herramientas del desarrollador, confirmando mejoras en los tiempos de carga y en la ejecución sin bloquear el HTML.

¿Qué sucede después de optimizar la carga de JavaScript?

Al aplicar async o defer, se puede observar que el HTML parsing ya no depende de la finalización del script de JavaScript, permitiendo un proceso más ágil. En consecuencia, la eficiencia y la interactuabilidad de la página mejoran significativamente.

Para seguir optimizando, recuerda que también puedes aplicar estas técnicas a los archivos CSS y explorar prioridades de carga para fomentar aún más el rendimiento. En la próxima clase, exploraremos precisamente cómo optimizar la carga de CSS. ¡Te animamos a probar estas técnicas y ver los beneficios por ti mismo!

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

Defer:

Async:

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

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…

👌