¡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.
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