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

Instalando Modal video

26/38
Recursos

Aportes 5

Preguntas 3

Ordenar por:

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

La solución que encontré para que se pudiese reproducir el video en el modal fue solo cambiar una letra jeje

Cambiar esto

button.dataset.videoid = videoId

por esto

button.dataset.videoId = videoId

Tuve que recurrir a la documentación de MDN, pasa que la librería de modal-video necesita el dataset de esta forma

data-video-id="XJS_UYNq4No"

y cuando asignamos el dataset como en la clase, le estamos entregando a la librería esto

data-videoid="XJS_UYNq4No"

De esa forma la librería no obtiene el id y nos entrega un undefined, para que con JS pongamos un - entre video y id tenemos que usar camelCase, y se resuelve, ejemplo:
button.dataset.videoid = videoId
da como resultado

<button data-videoid="XJS_UYNq4No">Open Video</button>

Mientras que con button.dataset.videId = videoId
Genera esto

<button data-video-id="XJS_UYNq4No">Open Video</button>

Y la librería de JS ya reconoce el id 😄

Espero haberme explicado bien

Por si tienen problemas con las versiones de las dependencias usen estas

npm install --save-dev css-loader@5.2.6 style-loader@2.0.0 😉

Debería hacer un video aporte de todos los shortcuts de teclado que utiliza, hasta el momento levo este recuento:
*copia y pega lineas
*convierte los tipos de comillas
entre otras o que no recuerdo o no vi, 😃

Tuve un error al copiar el path( las barras es direccion equivocada ):
Tenía esto:

import 'modal-video\css\modal-video.min.css';

Y la cambie por esto:

import 'modal-video/css/modal-video.min.css';

👌