Web Performance API

Here's some quick notes about the Fluent conference 2018 Tutorial on Web Performance API

Introduction #

Standards disponible sur tout les web browser.
RAIL model, Response, Animation, Idle, Load.

100ms Response.

When to meusre ?

• Local (Dev-time) google chrome dev tools
• Pre-relase, Synthetic (sessions) low importancy
• Production : RUM, Real User Mesurement

OnLoad (load time) is not interresting anymore

Mesures possible, DNS time, response time.

Deep dive begin #

Date.now() is not appropriate, use timeOrigin or now() because DOMHighResTimeStamp.

window.perfomance.now()
window.performance.timeOrigin;

PerformanceEntry #

• PerformanceNavigationTiming
• PerformanceResourceTiming
• PerformancePaintTiming
• PerformanceMarkTiming
• PerformanceMeasureTiming
• PerformanceLongTaskTiming
• PerformanceFrameTiming

There are all well supported on all browers

Navigation Timing #

Complexe task to load the HTML, can be a workshow on his own.

performance.getEntriesByType("navigation")

Cache header reduce TTFB value.

Resource Timing #

• All downloads except HTML
• Only successful downloads
• For cross domain resources, add to response header : timing-allow-origin: *

performance.getEntriesByType("resource")

The browser performs certain actions,

• once per session : DNS lookup
• per connection : TCP connect, SSL handshake
• per resource : HTTP request and response

Exercice and good idea: Calculate average image download duration. Can be useful to have a total duration time, that could check that nobody add big png. And fire an alert in this case.

// get images with destruction
const imgEntries = performance.getEntriesByType('resource').filter(
  ({initiatorType}) => initiatorType === "img"
);
// an exemole of reduce
imgEntries.reduce(
  (sum, {duration}) => sum + duration, 0
) / imgEntries.length;

Remember that you can disable cache :

DevTools Overrides #

Can select a folder, that create a sort of proxy

Server side mesurment (ServerTiming) #

Get DB, calculation from the server side (php, node...) passed in the header, directly into the javascript performance API (and the chrome dev tools)

It's add information to the google dev tools

!!! note Server timing middleware
For Laravel, on GitHub - tuupola/server-timing-middleware: PSR-7 & PSR-15 middleware to add the Server-Timing header
!!!

PaintTiming #

First content painted

console.table();

Custom (UserTiming) #

Exemple for "render" pointer.

• start render
• end render
• render

performance.mark('name')
performance.mesure('name', 'start?')

Vue has perfomance mark as well,

Vue.config.performance  =  true

Unlock performance tracing in Vue – Brock Reece – Medium

Long Task Timing #

only works for chrome, need to check out this.

Extras #

• Background tabs load slower than foreground, theire is a page visibilité API (I'll never use it throug)
• Network information API: window.navigator.connection.effectiveType
• Beacon, à vérifier, mais utile pour envoyer des reports (low priority, but sure to send to server) limited on payload size. navigator.sendBeacon(url, JSON.stringify(data))

If you can't mesure it, you can't improve it

• Next: Assiociative array reducer with array_walk in PHP