Code Monke #1: Measuring Latency in the Browser

Intro

We’re all in this beautiful journey to becoming monke

Background

Measuring latency in the browser

ping google.com
PING google.com (172.217.1.174): 56 data bytes
64 bytes from 172.217.1.174: icmp_seq=0 ttl=114 time=2.993 ms
64 bytes from 172.217.1.174: icmp_seq=1 ttl=114 time=3.289 ms
64 bytes from 172.217.1.174: icmp_seq=2 ttl=114 time=4.067 ms

The Naive Way: Taking the time difference

const url = "https://api.github.com/users/ArshanKhanifar";
const before = Date.now();
const r = await fetch(url);
await r.text();
const after = Date.now();
console.log("Time took:", after - before);

The Better Way: Using the ResourceTiming API

Timing example for a request.
Timings for each stage of a request.
const r = await fetch(url);
await r.text();
const perf = performance.getEntriesByName(url)[0];
const ttfb = perf.responseStart - perf.requestStart;
console.log("TTFB", ttfb);

The Best Possible Way: 🦄

https://speed.cloudflare.com/__down?bytes=0

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store