Pablo Moretti Charla Google + Mercado Libre - 19 de Agosto -

1. Junio 2016 - Pablo Moretti @elsantob
Latencia
en la
Web

2. Latencia de red
“El tiempo que tarda en
viajar un paquete de
origen a un destino y
volver”

3. This is our vision
Building 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

4. This is our vision
Building the foundation to Build a 3B Company by FY20
The Long Road of the Web
La latencia está presente cada uno de los siguiente pasos

5. This is our vision
Building the foundation to Build a 3B Company by FY20
DNS Part / UDP

6. This is our vision
Building 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.

7. This is our vision
Building 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.

8. This is our vision
Building the foundation to Build a 3B Company by FY20
TCP Handshake

9. This is our vision
Building the foundation to Build a 3B Company by FY20
SSL - Negociation

10. Numeros
TCP
150 ms (Fibertel)
300 ms (3G - Personal)
TCP + SSL
500 ms (Fibertel)
1000 ms (3G - Personal)

11. This is our vision
Building the foundation to Build a 3B Company by FY20
Keep-alive - TCP Optimization
Para 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

12. This is our vision
Building 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

13. This is our vision
Building 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.

14. This is our vision
Building the foundation to Build a 3B Company by FY20
Preconnect en Mercado Libre
Redujo ~1 segundo para Document Complete en el buscador.
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)

15. This is our vision
Building 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.

16. VIP
+30% Visual
Comparation
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)

17. Login
+30% Visual
Comparation
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)

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

19. This is our vision
Building 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

20. Prefetch
VIP Cards
Mobile 3G - Slow (780 Kbps/330 Kbps 200ms RTT)

21. This is our vision
Building 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.

22. Prebrowsing
Techniques

23. Speed
Matters !

24. This is our vision
Building the foundation to Build a 3B Company by FY20
Aceleramos el inicio del checkout
Prefetch CSS + Negociaciones de TCP/SSL en VIP para reducir el tiempo
de carga de checkout más de ~3 segundos (Mobile 3G - Slow).

25. The present ?

26. Service Workers !!!
HTTP2 (HTTPS only)
Brotli

27. Muchas
gracias