Latencia en la Web

transcript

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

- 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

preconnect

- 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

Login+30% Visual Comparation

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

prefetch

- 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

Prefetch VIP Cards

prerender

- 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