Web a Toda Velocidad

Transcript

1. ¡Web a Toda Velocidad! Alfredo Bonilla @brolag
2. ¡Hola! Soy Alfredo Bonilla Desarrollador Web en Gorilla Logic. Colaborador en GDG Pura Vida y Angular Costa Rica. Quejas y sugerencias: @brolag
3. ¿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%
4. ¿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.
5. ¿Qué es velocidad? ¿Está sucediendo? ¿Es útil? ¿Es utilizable?
6. ¿Qué es velocidad? ¿Está sucediendo? ¿Es útil? ¿Es utilizable?
7. ¿Cómo medir la velocidad? Mediciones en laboratorio Lighthouse Mediciones reales Chrome User Experience Report
8. Lighthouse
12. ¿Cómo mantener la velocidad? Performance Budgets
13. Performance Budgets Un presupuesto de rendimiento es un conjunto de límites impuestos a las métricas que afectan el rendimiento del sitio.
14. 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.
15. Milestone Timings First Contentful Paint FCP Time To Interactive TTI
16. First Contentful Pain
17. 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.
18. Time To Interactive
19. Time To Interactive TTI mide cuánto tiempo tarda una página en ser completamente interactiva.
20. 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.
21. Desempeño en el proceso de CI
22. Webpack Performance Hints
23. bundlesize
24. Performance Budgets y CI
25. Lighthouse Bot
26. ¿Qué más podemos hacer? Optimizar nuestras imágenes, CSS y JavaScript
27. 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
28. Imagemin
29. Imagemin
30. Imagemin
31. Convertir GIF a Video
32. Reemplazar GIF por Video • Se reproducen de forma automática. • Se repiten continuamente (por lo general, pero es posible evitarlo). • Están en silencio.
33. Reemplazar GIF por Video
34. Lazy Loading de imágenes
35. Imágenes Responsivas • Sharp • ImageMagick • Cloudinary
36. Imágenes Responsivas
37. Imágenes WebP
38. 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
39. 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.
40. Precargar lo más importante
41. Utilizar el API de Cache
42. Modularización y Lazy Loading
43. Modularización y Lazy Loading
44. Modularización y Lazy Loading
45. Modularización y Lazy Loading
46. Optimización de CSS • Diferir el código CSS no crítico • Minificar el código CSS • Extraer el código CSS crítico
47. Optimización de CSS Shift + Command + P > “Show Coverage” ⌨
49. Diferir código CSS no critico
50. Cultura del rendimiento
51. 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
52. Gracias por su atención Alfredo Bonilla @brolag