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
650
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
Micro Frontends - True End-to-End Decoupling in Practice
naltatis
1
90
evcc: Sonne, Autos & dynamische Stromtarife
naltatis
0
340
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
190
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
160
evcc – Open Source Sonne tanken
naltatis
0
1.6k
How Deep Is Your Micro Frontend
naltatis
2
820
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.4k
Energie & Feedback Loops
naltatis
1
300
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
730
Other Decks in Technology
See All in Technology
#TRG24 / David Cuartielles / Post Open Source
tarugoconf
0
420
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
150
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
130
大規模言語モデル・対話型生成AIによるテスト支援の広さと深さ / Exploring Use of LLM/AI for Testing 2024
ishikawafyu
0
100
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
28
25k
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
240
最近のSfM手法まとめ - COLMAP / GLOMAPを中心に -
kwchrk
8
1.8k
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
1.7k
Storage Browser for Amazon S3
miu_crescent
1
350
Storage Browser for Amazon S3を触ってみた + α
miura55
0
110
Fabric 移行時の躓きポイントと対応策
ohata_ds
1
120
AI×医用画像の現状と可能性_2024年版/AI×medical_imaging_in_japan_2024
tdys13
0
1.2k
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Adopting Sorbet at Scale
ufuk
74
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Thoughts on Productivity
jonyablonski
68
4.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Producing Creativity
orderedlist
PRO
343
39k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
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