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

Reduciendo el tama帽o del bundle

22/38
Recursos

Aportes 17

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

Para reducir el peso de moment, se puede usar este plugin https://www.npmjs.com/package/moment-locales-webpack-plugin que te permite elegir los idiomas que se quieren incluir en el bundle final.

En nuestro caso, necesitamos espa帽ol, por lo tanto en el webpack config se agrega:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

Y a plugins:

new MomentLocalesPlugin({
    localesToKeep: ['es'],
}),

Actualmente se estaba usando ingles en el sistema. Para usar espa帽ol, en carouselItem.js ir donde se importa moment, y dejarlo as铆:

import moment from 'moment'
moment.locale('es')

As铆 el bundle queda mucho m谩s liviano, y se usa fechas en espa帽ol. Al parece, el paquete moment incluye internamente el ingles, en caso que no se use ning煤n paquete de idioma.

猬囷笍 Reduciendo el tama帽o del bundle

<h4>Recursos</h4>

BundlePhobia

<h4>Apuntes</h4>
  • Podemos usar soluciones online para analizar que puede estar pesando dentro de nuestra aplicaci贸n una de ellas es bundle Phobia
  • Existen librer铆as que son 鈥淭ree Shakable鈥
    • Ayudan al empaquetador de solo sacar lo que se necesitan
  • Nos podemos ayudar de bundle Phobia para encontrar paquetes que sean m谩s peque帽os a la hora de hacer el bundle de nuestra aplicaci贸n

RESUMEN: Para reducir el tama帽o de nuestro bundle es importante tomar en cuenta las dependencias que usamos y encontrar la forma de reducir el tama帽o ya sea usando las funciones necesarias si es que la libreria es tree shakable o buscando una alternativa liviana

Prob茅 el destructuring y no se redujo el tama帽o inicial. Con la segunda opci贸n 鈥渓odash/get鈥 s铆 redujo el tama帽o.

Pense que iba a optimizar moment
馃槂

Tree Shaking es la onda! 馃槃

Con BundlePhobia nos podemos ayudar para buscar las librer铆as similares a moment y as铆 escoger la m谩s eficiente.
Yo por ejemplo use dayjs y logre reducirla hasta 23.9 Kb

https://bundlephobia.com/[email protected]

**Esto fue asombroso **

Impresionante, que curso tan bueno. Felicitaciones!!!

que Interesante, me encanta este curso

Sin duda, es la clase del curso hasta ahora que m谩s me ha impactado, es jodidamente maravilloso el tama帽o final del bundle optimizado respecto al inicial.

Mi resultado: 馃槷

Al final me quedo con 31.7 kb

No importa si varia el resultado de esa manera verdad?
Me gustaria feedback, gracias 馃槃

utilizar lodash solo para eso, es como cortar plantas con una motosierra

Excelente clase.

Tengo una duda, para cuando utilizamos timepicker y datepicker ,鈥 normalmente lo suelo usar con bootstrap y hacen uso de moment.js cuando los uso que me recomendarias para poder quitar moment y usar algo mas ligero鈥 ya que he buscado y encontre pickdate.js pero no es muy bueno para las fechas鈥 alguna sugerencia? para optimizar nuestros datepickers y timepickers . Gracias

馃憣

Excelente clase!

Waoo 馃槺 esto si que es optimizar