Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Measuring Web Performance: Metrics & Tools
Michael Geers
March 25, 2017
Technology
2
390
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 - Entkopplung bis zur Oberfläche
naltatis
1
190
Micro Frontends Lecture, USPCodeLab, University of São Paulo
naltatis
0
87
Inside the Micro Frontends Toolbox
naltatis
1
93
Bye Bye Frontend Monolith: Accelerating Feature Development with Micro Frontends
naltatis
1
110
Micro Frontends | E-Commerce Total Makeover Teil 3 | bevh
naltatis
0
430
Micro Frontends - Oberflächen schneiden & kleben
naltatis
0
360
Dieselmotoren und 3rd Party Code
naltatis
0
39
Micro Frontends - The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend
naltatis
0
530
Hyperapp, Flipdots & Pixelkunst
naltatis
0
77
Other Decks in Technology
See All in Technology
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
510
220428event_matsuda_part
caddi_eng
0
240
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
230
Microsoft 365の中でのPower BIの利用 / M365VM2022
ishiayaya
0
1.5k
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
chomado
0
730
Salesforce女子部-権限についてまとめてみたその1
sfggjp
0
180
srenext2022-skaru
mixi_engineers
0
400
Power BI Report Ops
hanaseleb
0
160
キャッチアップ Android 13 / Catch up Android 13
yanzm
2
950
僕の Microsoft Teams (+α) 便利技紹介 2022年春
taichinakamura
0
2.7k
Babylon.jsで3DViewerを作ってみた!!!
iwaken71
1
870
目と耳を持った自然言語処理 - スタートアップにおける価値創出のために
yag_ays
PRO
0
520
Featured
See All Featured
Music & Morning Musume
bryan
35
4.1k
For a Future-Friendly Web
brad_frost
164
7.4k
Building Adaptive Systems
keathley
25
1.1k
BBQ
matthewcrist
74
7.9k
Three Pipe Problems
jasonvnalue
89
8.6k
Optimizing for Happiness
mojombo
365
63k
The Invisible Customer
myddelton
110
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Producing Creativity
orderedlist
PRO
333
37k
Ruby is Unlike a Banana
tanoku
91
9.2k
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