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

Analizando el bundle de la aplicación

21/38
Recursos

Aportes 11

Preguntas 1

Ordenar por:

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

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

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

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

Like si sienten el poder llegando a sus manos.

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

Quiero compartir que en el archivo apis.js estamos trayendo toda la librería de lodash al usarlo de esta manera:

import _ from 'lodash''
const extractData = json => _.get(json, 'data', []);

Lo que hice fue importar sólo la función que necesitamos de la librería y no toda la librería, de esta manera:

import get from 'lodash/get';

const extractData = json => get(json, 'data', []);

Como resultado el tamaño de lodash disminuyó en el reporte del analizador pasando de 531kb a 30.93kb

Con moment no se puede porque la función moment siempre debe ser usada para llenarla con parámetros y luego hacer uso de sus métodos en el objeto devuelto.

Asegurate de tener la version de webpack actualizada para que no te tire error el plugin por incompatibilidad de versiones.

npm install webpack@latest

Que genial 🤟

ya quiero que salga