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 redimiento

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Analizando el bundle de la aplicación

21/38
Recursos

Aportes 9

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

si a alguien le puede servir dejo la doc de next.js
https://github.com/vercel/next.js/tree/canary/examples/analyze-bundles

🔍 Analizando el bundle de la aplicación

<h4>Recursos</h4>

webpack-contrib/webpack-bundle-analyzer

<h4>Apuntes</h4>
  • webpack tienen herramientas y plugins que nos ayudan a analizar el bundle del JS
  • Podemos usar webpack bundler analyzer para analizar y tener una medida exacta de que está pasando dentro del bundler a través de una grafica

RESUMEN: Podemos verificar el tamaño de nuestras dependencias y nuestro código a través de herramientas de análisis de tamaño

Les recomiendo crear un comando nuevo en su archivo package.json, de forma que sea más sencillo utilizar este nuevo comando de webpack.

"analyze": "webpack -p --analyze"

Para usarlo solo ejecuten en consola npm run analyze

Genial esta herramienta, de ahora en adelante la tendré como una de mis herramientas fijas.

Like si sienten el poder llegando a sus manos.

Creo que ahora Chrome nos permite hacer esto directamente desde la pestaña de lighthouse con la opción View Treemap
👇

Que genial 🤟

Si les sale algun error al correr el comando, puede ser que porque no hayan cerrado el serve ya que el analyzer abre en el puerto 8080 y si este esta ocupado genera un error

ya quiero que salga