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

Lazy loading del modal

27/38
Recursos

Aportes 5

Preguntas 1

Ordenar por:

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

Personalmente, este método no me gusta, porque degrada la experiencia del usuario con conexiones repentinamente más lentas o con problemas en la conexión.

Si hacemos una prueba en la pestaña “network”, y una vez cargado el sitio, cambiamos la velocidad de network a “slow 3g”, va a demorar una eternidad en abrir un modal. A simple vista pareciera que es un error o el sitio es extremadamente lento para cargar.

Pienso yo en 2 opciones:

A- Descargar todo lo necesario en el sitio en una primera carga
B- Descargar lo mínimo, y luego inmediatamente empezar a descargar el código del modal, mientras ya puedo navegar por el sitio. Claro, aplicando controles para no degradar la UX

Después de que se importa en forma lazy, y si se le vuelva a dar click volvería entrar a la linea de importar de forma lazy… este ya no debería volver a importarlo por que ya estaba importado cierto? y solo continuar con el código.

Brutal esta este curso, acabo de reducir el bundle de un proyecto de 800kb a 140 kb solo con el lazy loading

Por si a alguien le sucede el mismo error que a mi, que indica que openModal no es una función, mi error estaba en la forma de exportar la función, yo estaba utilizando export default y lo correcto es usar solo export.

👌