A presentation at BristolJS in in Bristol, UK by Drew McLellan
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
The Server Timing header provides a discrete and convenient way to communicate backend server performance timings to developer tools in the browser. Adding timing information to your application enables you to monitor back-end and front-end performance all in one place.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
