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


The Long Road of the WebLa latencia está presente cada uno de los siguiente pasos


DNS Part / UDP


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.


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.


TCP Handshake


SSL - Negociation

Numeros

TCP150 ms (Fibertel) 300 ms (3G - Personal)

TCP + SSL500 ms (Fibertel) 1000 ms (3G - Personal)


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


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

https://www.elserver.com/


preconnect

<link rel="preconnect" href="//www.domain1.com">

- Este tag funciona como un hint para que el browser pueda establecer una conexión TCP.


Preconnect en Mercado LibreRedujo ~1 segundo para Document Complete en el buscador.

Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)


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


http://youtube.com/v/aBJYa4Mi0g0

Login+30% Visual Comparation


http://youtube.com/v/zfXIzJtGqMU

Ok, pero todavía seguimos esperando el response...


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

https://github.com/pablomoretti/goprefetch

Prefetch VIP Cards


http://youtube.com/v/o3YfGN94XMo


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 !


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

Latencia en la Web

Technology