Latencia en la Web
-
Upload
melidevelopers -
Category
Technology
-
view
91 -
download
8
Transcript of Latencia en la Web
Junio 2016 - Pablo Moretti @elsantob
Latenciaen laWeb
Latencia de red“El tiempo que tarda en viajar un paquete de origen a un destino y volver”
This is our visionBuilding the foundation to Build a 3B Company by FY20
RTT - Round-Trip delay Time- Distancia : 20ms RTT 3000km (SpeedLight)- Red : Fibra / Cable Modem / Mobile Network
30 ms (cable) + 120 ms (fiber) = 150 ms
180 ms (3G) + 120 ms (fiber) = 300 ms
This is our visionBuilding the foundation to Build a 3B Company by FY20
The Long Road of the WebLa latencia está presente cada uno de los siguiente pasos
This is our visionBuilding the foundation to Build a 3B Company by FY20
DNS Part / UDP
This is our visionBuilding the foundation to Build a 3B Company by FY20
DNS Optimization- Los servidores de DNS puede guardar en su cache
una respuesta obtenida de otro servidor por un tiempo (TTL)
- El SO tiene su cache de DNS.- El Browser también tiene su cache.- Algunos browser realiza un prefetch de DNS
predictivo mientras se escribe en el buscador.
This is our visionBuilding the foundation to Build a 3B Company by FY20
dns-prefetch
<link rel="dns-prefetch" href="//www.domain1.com">
- Este tag funciona como un hint para que el browser pueda hacer el lookup de dominio antes de llegar a pedir el recurso.
This is our visionBuilding the foundation to Build a 3B Company by FY20
TCP Handshake
This is our visionBuilding the foundation to Build a 3B Company by FY20
SSL - Negociation
Numeros
TCP150 ms (Fibertel) 300 ms (3G - Personal)
TCP + SSL500 ms (Fibertel) 1000 ms (3G - Personal)
This is our visionBuilding the foundation to Build a 3B Company by FY20
Keep-alive - TCP OptimizationPara reutilizar la conexión TCP se envía el header “Connection: keep-alive” que indica al cliente que no cierre la conexión.
300 segundos el tiempo que mantiene chrome abierta la conexión, es importante no cerrarla antes desde el server.
Timeout 30s -> 300s en el server
This is our visionBuilding the foundation to Build a 3B Company by FY20
Reduce the gap
Disponibilizar servidores más cercanos al usuario para servir contenido estático y dinámico.
- Content Delivery Network- Eary termination SSL and TCP- Consultar en elserver.com si soporta docker :P
This is our visionBuilding the foundation to Build a 3B Company by FY20
preconnect
<link rel="preconnect" href="//www.domain1.com">
- Este tag funciona como un hint para que el browser pueda establecer una conexión TCP.
This is our visionBuilding the foundation to Build a 3B Company by FY20
Preconnect en Mercado LibreRedujo ~1 segundo para Document Complete en el buscador.
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)
This is our visionBuilding the foundation to Build a 3B Company by FY20
Critical path
Se llama a la técnica en la cual enviamos el css inline en el html para evitar establecer una conexión para descargarlo por el costo que tiene la latencia.
VIP+30% Visual Comparation
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)
Login+30% Visual Comparation
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)
Ok, pero todavía seguimos esperando el response...
This is our visionBuilding the foundation to Build a 3B Company by FY20
prefetch
<link rel="prefetch" href="//www.domain1.com/voy">
- Este tag descarga un objeto y lo guarda en el cache, por defecto se guarda por un hit a menos que tenga cache-control
goprefetch
This is our visionBuilding the foundation to Build a 3B Company by FY20
prerender
<link rel="prerender" href="//www.domain1.com/voy">
- Este tag descarga la página en un tab insibile por decirlo y la deja lista. Atención ejecuta el javascript usar Page Visibility API.
Prebrowsing Techniques
Speed Matters !
This is our visionBuilding the foundation to Build a 3B Company by FY20
Aceleramos el inicio del checkoutPrefetch CSS + Negociaciones de TCP/SSL en VIP para reducir el tiempo de carga de checkout más de ~3 segundos (Mobile 3G - Slow).
The present ?
Service Workers !!!HTTP2 (HTTPS only)Brotli
Muchasgracias