Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Measuring Web Performance: Metrics & Tools
Search
Michael Geers
March 25, 2017
Technology
2
700
Measuring Web Performance: Metrics & Tools
The talk was presented on JSUnconf.eu 2017 in Hamburg
Michael Geers
March 25, 2017
Tweet
Share
More Decks by Michael Geers
See All by Michael Geers
More Hearts than Stars: Smart Charging & Community Funding
naltatis
0
120
Micro Frontends - True End-to-End Decoupling in Practice
naltatis
1
180
evcc: Sonne, Autos & dynamische Stromtarife
naltatis
0
840
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
270
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
220
evcc – Open Source Sonne tanken
naltatis
0
1.9k
How Deep Is Your Micro Frontend
naltatis
2
890
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.5k
Energie & Feedback Loops
naltatis
1
330
Other Decks in Technology
See All in Technology
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
Operating Operator
shhnjk
1
580
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
120
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Site-Speed That Sticks
csswizardry
10
690
Being A Developer After 40
akosma
90
590k
The Cult of Friendly URLs
andyhume
79
6.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
GitHub's CSS Performance
jonrohan
1031
460k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
MEASURING WEB PERFORMANCE Michael Geers @naltatis JSUnconf.eu 2017
WHY MEASURE?
WHAT TO MEASURE?
PAGE RESOURCES
PAGE WEIGHT • Transferred data • Slow connectivity • Metered
contracts • Optimisation • Reduce assets • Minify JS & CSS • Active gzip Chrome DevTools
# REQUESTS • Number of assets • Browser only uses
8 parallel requests per domain • Optimisation • Domain sharding • Bundling & spriting • HTTP/2
CACHABILITY • Local browser cache • Reuse already loaded assets
• Optimisations • expires / max-age header with asset-hashing • etag / last-modified
TIMINGS
• Server processing time • Browser waits for HTML •
Optimisation • Streaming templates Time to First Byte / TTFB
Page Loaded? DOMContentLoaded • Browser finished processing the HTML document
Load • All referenced assets are loaded (img, fonts, ads, tracking, …)
Custom Metrics - User Timing API window.performance .mark('sell_page_interactive')
VISUAL METRICS
• First Visual Reaction • „Critical Path“ • Optimisation •
Prioritize assets Time to First Paint https://github.com/sitespeedio/browsertime/blob/master/ browserscripts/timings/firstPaint.js
• 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
• Viewport is fully rendered • Depends on screen size
Time to Visually Complete
SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
SpeedIndex https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index lower is better
HOW TO MEASURE?
Network Throttling Chrome DevTools | Netwerk-Tab Firefox | Responsive Design
Mode Network Link Conditioner | Hardware IO Tools for Xcode
Chrome DevTools | Timeline-Tab Low-End Device Mode
5 METRIC TOOLS
Yahoo YSlow • Calculates a score based on best practices
• Focuses on network based metrics • Recommends improvements
Google PageSpeed Insights • Analyses rendering • Critical path •
SEO relevant • Cons • Not open source (any more) • Google API-Key required • Pre-RWD • Aggressive mobile rules
WebPageTest • Father of the SpeedIndex • Solid results •
Records video • Online results • Cons • Confusing user interface • Messy selfhosting (Windows) https://www.webpagetest.org/
sitespeed.io • Docker based (selfhosting) • Visual Metrics • Modular
• Accessibility Rules • CI & Metric Integration • Cons • might contain bugs https://www.sitespeed.io/
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/
GETTING REAL
Real User Monitoring • Measuring inside the users browser •
real device distribution • real browser distribution • real connectivity situations
Navigation Timing API
Resource Timing API
https://github.com/WPO-Foundation/RUM-SpeedIndex • Google project • Combines viewport & resource timing
API • Experimental RUM-SpeedIndex
boomerang.js • Collects metrics in the browser • Started by
Yahoo! <script src="boomerang/boomerang.js" /> <script> BOOMR.init({ beacon_url: "/logging" }); </script> https://github.com/SOASTA/boomerang
browsertime • Part of sitespeed.io • Leverages browser APIs https://github.com/sitespeedio/browsertime/tree/master/browserscripts/timings
No OpenSource RUM Solution :(
TIPS
Performance Budgets https://timkadlec.com/2013/01/setting-a-performance-budget/
Continuous Integration & Visualisations
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
Show don’t tell webpagetest comparison
None
Thanks for watching! Michael Geers / naltatis