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.
Entendiendo el rendimiento
Optimización Avanzada de Páginas Web con Técnicas Prácticas
Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario
Optimización del Rendimiento Web: Modelo RAIL de Google
Antes de optimizar...
Medición del Rendimiento Web con Chrome DevTools y Lighthouse
Métricas de Experiencia de Usuario: LCP, FID y CLS
Instalación y Configuración de Proyecto Web con Git y Webpack
Crítical Rendering Path
Entendiendo el Critical Rendering Path en Navegadores Web
Optimización de JavaScript para mejorar rendimiento web
Priorización de recursos CSS para mejorar rendimiento web
Optimización de Carga de Recursos con Preload, Prefetch y Preconnect
Optimización de Animaciones CSS para Mejorar el Renderizado
CSS
Optimización de Animaciones CSS para Mejorar Rendimiento
Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento
WebFonts
Optimización de WebFonts para Mejorar el Rendimiento Web
Imágenes, Iconos y SVG
Optimización de Imágenes para Web: Formatos y Herramientas Efectivas
Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados
Comparación entre WebFonts y SVG: Ventajas y Desventajas
Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas
Carga Adaptativa de Imágenes con Gatsby y Web API
Aplicaciones JavaScript
Optimización de JavaScript para Producción Web
Análisis y Optimización de Bundles con Webpack
Optimización de Bundles en Proyectos Web con Webpack
Code Splitting con Webpack: Optimización de Bundles en Proyectos Web
Lazy Loading de Videos con JavaScript y Modales
Event Propagation y Filtrado de Eventos en JavaScript
Integración de Librerías en Proyectos JavaScript
Optimización de Carga de Modales con Lazy Loading en Webpack
Renderizado en Cliente vs. Servidor: Diferencias y Funciones
Implementación de Server Side Rendering en NodeJS
Optimización de Sitios con Static Site Generation
Caché
Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)
Configuración y despliegue de sitios web con Netlify y Github Actions
Automatización de despliegues con Github Actions y Cron en Netlify
Implementación de Caché con Service Workers en JavaScript
Performance Budget
Auditoría de Performance Web con Github Actions y Lighthouse
Creación de Pull Request y Auditorías con Github Actions
Monitoreo de Métricas en Sitios Web en Producción
Conclusiones
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
Si ya tienes una cuenta,
Optimización de JavaScript para mejorar rendimiento web
8/38Recursos
¿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:
-
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.
-
Modificar Archivos HTML: Actualiza tus etiquetas
scripten el HTML para incluirasyncodefersegún tus necesidades y prueba para identificar cuál ofrece mejores resultados. -
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:
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**
Luego donde dice **stop** y listo, se genera un reporte similar...
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
![]()
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…
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?