Slide 1

Slide 1 text

¡Web a Toda Velocidad! Alfredo Bonilla @brolag

Slide 2

Slide 2 text

¡Hola! Soy Alfredo Bonilla Desarrollador Web en Gorilla Logic. Colaborador en GDG Pura Vida y Angular Costa Rica. Quejas y sugerencias: @brolag

Slide 3

Slide 3 text

¿Por qué la velocidad importa? 1 segundo de atraso en la carga inicial de un sitio móvil puede impactar las tasas de conversión en 20%

Slide 4

Slide 4 text

¿Por qué la velocidad importa? ● Pinterest aumentó el tráfico del motor de búsqueda y la cantidad de registros en un 15 % cuando redujo el tiempo de espera percibido en un 40 %. ● La BBC determinó que perdía un 10 % adicional de usuarios por cada segundo adicional que el sitio tardaba en cargarse.

Slide 5

Slide 5 text

¿Qué es velocidad? ¿Está sucediendo? ¿Es útil? ¿Es utilizable?

Slide 6

Slide 6 text

¿Qué es velocidad? ¿Está sucediendo? ¿Es útil? ¿Es utilizable?

Slide 7

Slide 7 text

¿Cómo medir la velocidad? Mediciones en laboratorio Lighthouse Mediciones reales Chrome User Experience Report

Slide 8

Slide 8 text

Lighthouse

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

¿Cómo mantener la velocidad? Performance Budgets

Slide 13

Slide 13 text

Performance Budgets Un presupuesto de rendimiento es un conjunto de límites impuestos a las métricas que afectan el rendimiento del sitio.

Slide 14

Slide 14 text

Métricas ● Tamaño máximo de imágenes ● Número máximo de fuentes web ● Tamaño máximo de scripts, incluidos los frameworks ● Total de recursos externos, como scripts de terceros.

Slide 15

Slide 15 text

Milestone Timings First Contentful Paint FCP Time To Interactive TTI

Slide 16

Slide 16 text

First Contentful Pain

Slide 17

Slide 17 text

First Contentful Paint FCP mide cuánto tiempo tarda el navegador en procesar la primera parte del contenido DOM después de que un usuario navega a su página.

Slide 18

Slide 18 text

Time To Interactive

Slide 19

Slide 19 text

Time To Interactive TTI mide cuánto tiempo tarda una página en ser completamente interactiva.

Slide 20

Slide 20 text

Time To Interactive ● La página muestra contenido útil, que se mide con FCP. ● Los controladores de eventos están registrados para la mayoría de los elementos de página visibles. ● La página responde a las interacciones del usuario en 5 segundos.

Slide 21

Slide 21 text

Desempeño en el proceso de CI

Slide 22

Slide 22 text

Webpack Performance Hints

Slide 23

Slide 23 text

bundlesize

Slide 24

Slide 24 text

Performance Budgets y CI

Slide 25

Slide 25 text

Lighthouse Bot

Slide 26

Slide 26 text

¿Qué más podemos hacer? Optimizar nuestras imágenes, CSS y JavaScript

Slide 27

Slide 27 text

Optimización de Imágenes ● Use Imagemin para comprimir imágenes ● Reemplace los GIF animados con video para cargas de página más rápidas ● Use lazysizes para cargar imágenes de manera diferida ● Sirva imágenes responsivas ● Sirva imágenes con las dimensiones correctas ● Utilice imágenes de WebP ● Use un CDN

Slide 28

Slide 28 text

Imagemin

Slide 29

Slide 29 text

Imagemin

Slide 30

Slide 30 text

Imagemin

Slide 31

Slide 31 text

Convertir GIF a Video

Slide 32

Slide 32 text

Reemplazar GIF por Video ● Se reproducen de forma automática. ● Se repiten continuamente (por lo general, pero es posible evitarlo). ● Están en silencio.

Slide 33

Slide 33 text

Reemplazar GIF por Video

Slide 34

Slide 34 text

Lazy Loading de imágenes

Slide 35

Slide 35 text

Imágenes Responsivas ● Sharp ● ImageMagick ● Cloudinary

Slide 36

Slide 36 text

Imágenes Responsivas

Slide 37

Slide 37 text

Imágenes WebP

Slide 38

Slide 38 text

Optimización de JavaScript ● Aplique el patrón PRPL ● Precargue los elementos críticos para mejorar la velocidad de carga ● Reduzca las cargas útiles de JavaScript con división de código ● Elimine el código no utilizado ● Minimice y comprima las cargas útiles de la red ● Sirva código moderno a navegadores modernos

Slide 39

Slide 39 text

Patrón PRPL ● Push (or preload) the most important resources. ● Render the initial route as soon as possible. ● Pre-cache remaining assets. ● Lazy load other routes and non-critical assets.

Slide 40

Slide 40 text

Precargar lo más importante

Slide 41

Slide 41 text

Utilizar el API de Cache

Slide 42

Slide 42 text

Modularización y Lazy Loading

Slide 43

Slide 43 text

Modularización y Lazy Loading

Slide 44

Slide 44 text

Modularización y Lazy Loading

Slide 45

Slide 45 text

Modularización y Lazy Loading

Slide 46

Slide 46 text

Optimización de CSS ● Diferir el código CSS no crítico ● Minificar el código CSS ● Extraer el código CSS crítico

Slide 47

Slide 47 text

Optimización de CSS Shift + Command + P > “Show Coverage” ⌨

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Diferir código CSS no critico

Slide 50

Slide 50 text

Cultura del rendimiento

Slide 51

Slide 51 text

Fuentes ● Web.dev ○ https://web.dev/fast/ ● ¿Por qué es importante el rendimiento? ○ https://developers.google.com/web/fundamentals/performance/why-p erformance-matters ● Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018) ○ https://youtu.be/reztLS3vomE

Slide 52

Slide 52 text

Gracias por su atención Alfredo Bonilla @brolag