DevOps Blog - Nicolas Paris

Web Performance API

Web

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 ?

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

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

f037eb92.png

performance.getEntriesByType("resource")

The browser performs certain actions,

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.

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

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