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 Module Loading

24/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.

En carouselItem.js agregar la clase carousel-item en e div

h(
    'div.carousel-item',
    h('img', { src: imageUrl, alt: '', loading: 'lazy' }),

Instalar la dependencia de lozad

npm install --save lozad

En el index.js que est谩 en la carpeta src

import lozad from 'lozad'
...
...
...
!(async function(document) {
  const mountReference = document.querySelector('.main').lastElementChild

  if (!mountReference) {
    return 0
  }
...
...
...

// Add lazy loading
    const carouseImages = document.querySelectorAll('.carousel-item__img');
    const observer = lozad(carouseImages);
    observer.observe();

    const allYouTubeLinks = document.querySelectorAll('.js-video-link');
    // console.log(allYouTubeLinks);
    allYouTubeLinks.forEach((link) => {
      link.addEventListener('click', modalListener);
    });

})(document, window)

En el index.js del modal

export const modalListener = (event) => {
    event.preventDefault();
    const link = event.target;
    console.log(link);
}
cambien target por currentTarget

Lo que hicimos en la clase, bueno al menos yo(tuve que implemetar el lazy load como lo hizo el profesor por eso puede que haya c贸digo repetido):馃槄

  1. instale dependencia:
npm install lozad -S
  1. Creamos en la carpeta src del proyecto la carpeta modal y dentro de modal se cre贸 el archivo index.js.
  2. en src/modal/index.js se escribi贸:
export const modalListener = (event) => {
    event.preventDefault();
    const img = event.target
    const link = img.parentElement;
    console.log(link.href);
}
  1. en src/index.js se agreg贸 el siguiente c贸digo:
import lozad from 'lozad';
import { modalListener } from './modal';
...
...
    .insertAdjacentElement(
      'afterend',
      Carousel({
        itemsList: popular,
      })
    )

    /* ENTRE ESTA LINEA!! */

    // Add lazy loading
    const carouseImages = document.querySelectorAll('.carousel-item__img');
    const observer = lozad(carouseImages);
    observer.observe();
    
    const allYouTubeLinks = document.querySelectorAll('.js-video-link');
      // console.log(allYouTubeLinks);
      allYouTubeLinks.forEach((link) => {
        link.addEventListener('click', modalListener);
    });

    /* Y ENTRE ESTA LINEA */
})(document, window)
  1. y por ultimo se agrego en el archivo CarouselItem.js:
  • SE AGREG脫 EL ATRIBUTO CLASSNAME A LA ETIQUETA 鈥榓鈥, este c贸digo comienza como en la linea 8, al menos en mi editor.
const Controls = ({ slug, youtubeVideoId }) =>
  h(
    'div',
    h(
      'a', // esta 'a' 贸 'a.js-video-link y QUITAMOS EL ATRIBUTO className'
      {
        className: 'js-video-link',
        href: `https://www.youtube.com/watch?v=${youtubeVideoId}`,
        title: 'Watch trailer',
        target: '_blank',
        rel: 'noreferrer',
      },

y ya! , me gustaria feedback, para saber donde me equivoque, gracias 馃槃

Me encanta la forma de usar devTools (elements, console, sources) para debugear.
Muy buena clase!!馃憣馃

event.target vs event.currentTarget

Cuando se agrega un evento a un elemento del DOM, tienen un propiedad llamada bubble, que hace referencia a como las burbujas suben en el agua y lo que hace es que cuando se interact煤a con un elemento que tiene un event listener, el elemento ejecutar谩 todos los eventos de todos los elementos padres en orden ascendente (por eso se hace referencia a las burbujas). Suponiendo que tenemos la siguiente estructura:

<div class="parent" onclick="handleClick">
	<p>Children</p>
</div>
	const handleClick = (e) => {
		const elementoAlQueSeLeHizoClick = e.target // se refiere a la etiqueta <p>
		const elementoQuePoseeElManejadorDeEventos = e.currentTarget // se refiere al div
	}

si se le agrega un evento al div pero se da click en el p谩rrafo, el elemento seleccionado ser谩 el p谩rrafo y ese se convertir谩 en el target seleccionado. Debido al bubble, al seleccionar parr谩fo, 茅ste disparar铆a el evento del p谩rrafo (pero no tiene), asi que sigue y dispara el evento del padre.

En este ejemplo no hay una forma directa de solamente seleccionar el div ya que es exactamente del mismo tama帽o del p谩rrafo, asi que si queremos que el manejador de eventos pueda acceder al div cuando damos click al p谩rrafo entonces se usar铆a currentTarget.

event.currentTarget hace referencia al elemento al cual tiene ligado la funcion que maneja el evento.

NodeList -a- Array:

NodeList NO trae elementos como map, filter, mientras que un array si los trae.

Una forma de++ pasar del nodelist hacia un array++ es++ hacer la configuraci贸n en babel en webpack para utilizar el spreed operator sobre un array++:
[鈥llYoutubeLinks].filter

forEach se encuentra disponible para arrays tanto como NodeList.

馃憣

Para el auto completado

export const modalLister = (event = new Event) => {}