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

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

19406f33.png

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: *

f037eb92.png

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 : 0fdbc16e.png

DevTools Overrides

Can select a folder, that create a sort of proxy

b0c4975b.png

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)

5884ad28.png

It’s add information to the google dev tools

8afdf028.png

!!! 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

comments powered by Disqus