Hacking Web Performance en Español - JSConf México 2020
•
0 recomendaciones•277 vistas
Por qué es importante la web performance, estado actual del problema de rendimiento en la web y los trucos para hackear la performance todavía más.
Denunciar
Compartir
Presentaciones relacionadas
Hacking Web Performance en Español - JSConf México 2020
- 1. Picture from Simon Howden freedigitalphotos.net! hacking web performance maximiliano firtman @firt firt.dev
- 6. firt.dev
- 7. Tengo dos objetivos hoy…
- 8. Que te sientas mal
- 10. ¡Empecemos!
- 11. Yo se que ya sabes que...
- 12. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders
- 13. Picture from Simon Howden freedigitalphotos.net
- 14. Picture from Simon Howden freedigitalphotos.net
- 15. 15 Picture from Simon Howden freedigitalphotos.net
- 16. ¡Es principalmente responsabilidad del front end!
- 17. Yo se que ya sabes que... Existen las métricas centradas en el usuario
- 18. Signos Vitales Web (Core Vitals by Google)
- 19. Se calculan sobre el percentil 75 tanto en mobile como desktop
- 20. Métricas centradas en el usuario Largest Contentful Paint LCP - mide la carga inicial
- 21. Métricas centradas en el usuario First Input Delay FID - mide la interactividad
- 22. Métricas centradas en el usuario Cumulative Layout Shift CLS - mide la estabilidad visual
- 23. ... hay más métricas: Speed Index, TTFB, FCP, Time to Interactive
- 24. "Pero oye, mi web anda rápido"
- 25. Objetivos LCP: 2.5s - 4.0s FID: 100ms - 300ms CLS: 0.1 - 0.25
- 26. Yo se que ya sabes que hay que...
- 27. Optimizar la transferencia de recursos Ya sabes que hay que
- 28. Trabajar con TLS y HTTP/2 Ya sabes que hay que
- 29. Usar CSS como aperitivo Ya sabes que hay que
- 30. Usar JavaScript como postre Ya sabes que hay que
- 31. Optimizar imágenes Ya sabes que hay que
- 32. Usar Service Workers Ya sabes que hay que
- 33. Ya estás haciendo todo esto, ¿no?
- 34. ¿Cuál es el problema entonces?
- 35. Time to Interactive El problema HTTP Archive with Lighthouse
- 36. 2 3 4 5 6 7 8 9.3 1 9
- 37. Si una página tarda más de 3 segundos El problema 53% abandona Research by Double Click
- 38. El problema Siembre hemos subestimado el mundo móvil
- 39. iOS y Android
- 41. browsers with market share
- 42. browsers with market share
- 45. Vamos Max, ¡tenemos 4G! Ya el rendimiento no es un problema... ( )
- 46. www.gsma.com/mobileeconomy - Dec 2019
- 47. Ancho de Banda Redes celulares
- 48. RTT - latency Min Max Redes celulares
- 49. Min Max RTT - latency Redes celulares
- 50. Todavía tenemos muchos problemas de performance ( )
- 51. Chrome Lite Pages 🆕
- 52. Chrome 73 Android Chrome Lite Pages •Si el usuario habilita Data Saver ⭐🆕
- 53. Se mostrará una Lite Page si Chrome Lite Pages • Estás en una red 2G O • First Contentful Paint es mayor a 5s ⭐🆕
- 54. Lite Page? Chrome Lite Pages • Cloud-based rendering • Optimizaciones "Smart" • No se cargan todas las imágenes ⭐🆕
- 55. Progressive Web Apps 🆕
- 56. Progressive Web Apps 🆕
- 57. Progressive Web Apps 🆕
- 58. ¡A Hackear Web Performance!
- 60. Evitar más de un roundtrip Carga Inicial • TCP Slow Start - initial congestion window (initcwnd) • Linux: 14.6 KiB
- 61. KiB? 🤔
- 62. ¿Cuántos bytes en un kilobyte?
- 63. 1 KB = 1024 bytes
- 64. 1 KB = 1024 bytes
- 65. 1 KB = 1000 bytes
- 70. 1 KiB = 1024 bytes
- 71. Evitar más de un rountrip Carga Inicial • TCP Slow Start - initial congestion window (initcwnd) • Linux: 14.6 KiB
- 75. Entregar ATF en 14.6 KiB Carga Inicial • Embeber todo el CSS y JS que entre • Si hay espacio, agregar logo y/o imágenes en baja resolución
- 76. Evitar el redirect de http a httpS • Usar HSTS (HTTP Strict Transport Security) • Cabecera • Opt-in en hstspreload.org Carga Inicial
- 77. Hackear la Transferencia de Datos
- 78. HTTP/3 (sobre QUIC) Transferencia de Datos • Protocolo "beta" sobre UDP • Reduce latencia y congestión de mensajes • Interfaz HTTP/2 con TLS •
- 79. Usar Brotli • Puede ahorrar hasta ~25% de transferencia comparado con GZIP Transferencia de Datos
- 80. Hackear Carga de Recursos
- 81. Control de Caché Moderno Carga de Recursos • Hash en nombres de archivos es un patrón común • Navegadores hacen igual un request condicional
- 82. • Hola a Cache-Control: immutable Control de Caché Moderno Carga de Recursos
- 83. Hay un nuevo patrón común • 1) entregar desde el caché • 2) actualizarlo en el background para el futuro Control de Caché Moderno Carga de Recursos
- 84. Cache-Control: stale-while-revalidate=99 Control de Caché Moderno Carga de Recursos
- 85. Calentar motores • Ayudar al navegador a comenzar cuanto antes • Consultas DNS: ~150ms • Conexiones TCP y TLS: ~200ms Carga de Recursos
- 86. Anunciar consultas DNS <link rel="dns-prefetch" href=“https://newdomain.com"> HTML Carga de Recursos
- 87. Anunciar conexiones TLS <link rel="preconnect" href=“https://newdomain.com” crossorigin> HTML Carga de Recursos
- 88. Anunciando en la cabecera Link: <https://my-analytics.com>; rel=preconnect; crossorigin HTTP Carga de Recursos
- 89. Precarga Ayudar al navegador a manejar la prioridad de descarga de recursos Carga de Recursos
- 90. Precarga <link rel="preload" href=“styles.css” as=“style”> HTML Carga de Recursos
- 91. Precarga Link: <https://otherhost.com/font.woff2>; rel=preload; as=font; crossorigin HTTP Carga de Recursos
- 92. Priority Hints <link rel="preload" as="image" href="hero.jpg" importance="high"> <img src="otherimage.jpg" importance="low"> HTML 🆕 Carga de Recursos
- 93. Reevaluar CDNs • Era muy común descargar recursos de CDNs • Safari ya no usa el caché en estos casos y Chrome lo está por seguir Carga de Recursos
- 95. http://www.flickr.com/photos/steenslag/22689920/ - borrowed fromSteve Souders Una imagen vale más que mil palabras...
- 96. … si baja
- 97. Carga Demorada (Lazy Load) <img src="photo.png" alt="Never forget it" loading="lazy"> HTML 🆕 Imágenes
- 99. Es ya hora de reemplazar JPEG y PNG Imágenes
- 104. Hackear lo Conocido
- 106. Server-Side: Next.js, Nuxt.js Generadores estáticos: Eleventy Lo Conocido
- 108. Performance es PRIORIDAD UNO Hay que empujar siempre más Vale la pena el esfuerzo
- 109. ¿Te sientes mal ya?