Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web a Toda Velocidad

Web a Toda Velocidad

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

November 02, 2019
Tweet

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

  9. None
  10. None
  11. None
  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” ⌨
  48. None
  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