Measuring Performance with Server Timing

BRISTOL JS MEASURING PERFORMANCE WITH SERVER TIMING @drewm

LET’S TALK PERFORMANCE.

TTFB: WAITING FOR YOUR SERVER

MEASURING PERFORMANCE WITH SERVER TIMING WHAT CREATES THE DELAY? ▸ Database calls / slow queries ▸ Templating ▸ Synchronous API interactions ▸ Cold cache hits ▸ Bottlenecked operations of any kind ▸ Stupid stuff like sending emails, resizing images, rainbow painting

WE NEED TO DISCOVER WHAT’S CAUSING THE DELAY.

SERVER MONITORING TOOLS

WOULDN’T IT BE GREAT IF WE COULD PUT THAT INFO HERE

GOOD NEWS MY FRIENDS.

SERVER TIMING https://www.w3.org/TR/server-timing/

MEASURING PERFORMANCE WITH SERVER TIMING WHAT IS SERVER TIMING? ▸ W3C Specification ▸ HTTP response header ▸ Sends basic timing information from server to client ▸ That’s it.

A thing called db had a duration of 123 milliseconds. Server-Timing: db;dur=123, tmpl;dur=56 A thing called tmpl had a duration of 56 milliseconds.

💯

1 2 3 Server-Timing: metric, metric, metric

MEASURING PERFORMANCE WITH SERVER TIMING EACH METRIC HAS THREE POSSIBLE PROPERTIES 1. A short name for the metric (such as db in our example) 2. A duration in milliseconds (expressed as dur=123) 3. A description (expressed as desc=“My Description”) Each property is separated with a semicolon as the delimiter.

Description Name db;dur=123;desc=“Database” Duration

tmpl;dur=56;desc=“Template processing”

Server-Timing: db;dur=123;desc="Database", tmpl;dur=56;desc="Template processing"

Server-Timing: datacenter;desc="East coast data center"

IMPLEMENTATION EXAMPLE

SERVER-TIMING https://www.npmjs.com/package/server-timing

Server-Timing: paint; dur=123; desc="Rainbow painting", bjork; dur=333; desc="Emailing Bjork", total; dur=457.90863199999995; desc="Total Response Time"

CONSIDERATIONS

MEASURING PERFORMANCE WITH SERVER TIMING CONSIDERATIONS ▸ Keep names and descriptions short-ish ▸ Don’t expose anything secret or sensitive ▸ Have some way to enable / disable timing code in your app

IT’S GOOD. Search developer.mozilla.org for “server timing”

THANKS @drewm noti.st/drewm