Measuring Web Performance: Metrics & Tools

Slide 1

Slide 1 text

MEASURING WEB PERFORMANCE Michael Geers @naltatis JSUnconf.eu 2017

Slide 2

Slide 2 text

WHY MEASURE?

Slide 3

Slide 3 text

WHAT TO MEASURE?

Slide 4

Slide 4 text

PAGE RESOURCES

Slide 5

Slide 5 text

PAGE WEIGHT • Transferred data • Slow connectivity • Metered contracts • Optimisation • Reduce assets • Minify JS & CSS • Active gzip Chrome DevTools

Slide 6

Slide 6 text

# REQUESTS • Number of assets • Browser only uses 8 parallel requests per domain • Optimisation • Domain sharding • Bundling & spriting • HTTP/2

Slide 7

Slide 7 text

CACHABILITY • Local browser cache • Reuse already loaded assets • Optimisations • expires / max-age header  with asset-hashing • etag / last-modified

Slide 8

Slide 8 text

TIMINGS

Slide 9

Slide 9 text

• Server processing time • Browser waits for HTML • Optimisation • Streaming templates Time to First Byte / TTFB

Slide 10

Slide 10 text

Page Loaded? DOMContentLoaded • Browser finished processing  the HTML document Load • All referenced assets are loaded (img, fonts, ads, tracking, …)

Slide 11

Slide 11 text

Custom Metrics - User Timing API window.performance .mark('sell_page_interactive')

Slide 12

Slide 12 text

VISUAL METRICS

Slide 13

Slide 13 text

• First Visual Reaction • „Critical Path“ • Optimisation • Prioritize assets Time to First Paint https://github.com/sitespeedio/browsertime/blob/master/ browserscripts/timings/firstPaint.js

Slide 14

Slide 14 text

• Primary Content is Visible • above-the-fold text • e.g. product image • „Soft metric“ Time to First Meaningful Paint https://docs.google.com/document/d/ 1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view#heading=h.yi0gbyc627x1

Slide 15

Slide 15 text

• Viewport is fully rendered • Depends on screen size Time to Visually Complete

Slide 16

Slide 16 text

SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Slide 17

Slide 17 text

SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index lower is better

Slide 18

Slide 18 text

HOW TO MEASURE?

Slide 19

Slide 19 text

Network Throttling Chrome DevTools | Netwerk-Tab Firefox | Responsive Design Mode Network Link Conditioner | Hardware IO Tools for Xcode

Slide 20

Slide 20 text

Chrome DevTools | Timeline-Tab Low-End Device Mode

Slide 21

Slide 21 text

5 METRIC TOOLS

Slide 22

Slide 22 text

Yahoo YSlow • Calculates a score based on best practices • Focuses on network based metrics • Recommends improvements

Slide 23

Slide 23 text

Google PageSpeed Insights • Analyses rendering • Critical path • SEO relevant • Cons • Not open source (any more) • Google API-Key required • Pre-RWD • Aggressive mobile rules

Slide 24

Slide 24 text

WebPageTest • Father of the SpeedIndex • Solid results • Records video • Online results • Cons • Confusing user interface • Messy selfhosting  (Windows) https://www.webpagetest.org/

Slide 25

Slide 25 text

sitespeed.io • Docker based (selfhosting) • Visual Metrics • Modular • Accessibility Rules • CI & Metric Integration • Cons • might contain bugs https://www.sitespeed.io/

Slide 26

Slide 26 text

Google Lighthouse • Chrome Extension • Command Line Tool • Visual Metrics • First Meaningful Paint • Interaction-Metrics • Estimated Input Latency • Progressive Enhancement https://developers.google.com/web/tools/lighthouse/

Slide 27

Slide 27 text

GETTING REAL

Slide 28

Slide 28 text

Real User Monitoring • Measuring inside the users browser • real device distribution • real browser distribution • real connectivity situations

Slide 29

Slide 29 text

Navigation Timing API

Slide 30

Slide 30 text

Resource Timing API

Slide 31

Slide 31 text

https://github.com/WPO-Foundation/RUM-SpeedIndex • Google project • Combines viewport & resource timing API • Experimental RUM-SpeedIndex

Slide 32

Slide 32 text

boomerang.js • Collects metrics in the browser • Started by Yahoo! <script> BOOMR.init({ beacon_url: "/logging" }); https://github.com/SOASTA/boomerang

Slide 33

Slide 33 text

browsertime • Part of sitespeed.io • Leverages browser APIs https://github.com/sitespeedio/browsertime/tree/master/browserscripts/timings

Slide 34

Slide 34 text

No OpenSource RUM Solution :(

Slide 35

Slide 35 text

TIPS

Slide 36

Slide 36 text

Performance Budgets https://timkadlec.com/2013/01/setting-a-performance-budget/

Slide 37

Slide 37 text

Continuous Integration & Visualisations

Slide 38

Slide 38 text

Facebook 2G Tuesday • Slowdown to 2G speed for 2 hours • Opt-in dialogue the Facebook app http://www.businessinsider.com/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?IR=T