More Related Content Similar to Hacking Web Performance en Español - JSConf México 2020 (20) More from Maximiliano Firtman (20) Hacking Web Performance en Español - JSConf México 20201. Picture from Simon Howden freedigitalphotos.net!
hacking web
performance
maximiliano firtman
@firt
firt.dev
17. Yo se que ya sabes que...
Existen las métricas
centradas en el usuario
23. ... hay más métricas: Speed Index,
TTFB, FCP, Time to Interactive
37. Si una página tarda más de 3 segundos
El problema
53% abandona
Research by Double Click
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
⭐🆕
60. Evitar más de un roundtrip
Carga Inicial
• TCP Slow Start - initial congestion window
(initcwnd)
• Linux: 14.6 KiB
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
79. Usar Brotli
• Puede ahorrar hasta ~25% de transferencia
comparado con GZIP
Transferencia de Datos
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
85. Calentar motores
• Ayudar al navegador a comenzar cuanto antes
• Consultas DNS: ~150ms
• Conexiones TCP y TLS: ~200ms
Carga de Recursos
88. Anunciando en la cabecera
Link: <https://my-analytics.com>; rel=preconnect;
crossorigin
HTTP
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
97. Carga Demorada (Lazy Load)
<img src="photo.png" alt="Never forget it"
loading="lazy">
HTML
🆕
Imágenes