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
540
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
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
51
evcc – Open Source Sonne tanken
naltatis
0
760
How Deep Is Your Micro Frontend
naltatis
2
690
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.1k
Energie & Feedback Loops
naltatis
0
220
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
590
Micro Frontends Lecture, USPCodeLab, University of São Paulo
naltatis
2
320
Inside the Micro Frontends Toolbox
naltatis
3
280
Bye Bye Frontend Monolith: Accelerating Feature Development with Micro Frontends
naltatis
3
270
Other Decks in Technology
See All in Technology
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
yanaemon
6
1.3k
CloudflareとHonoを使って飲食店のレビューができるLINEアプリを作った
shinaps
1
510
Money-saving tips for the frugal serverless developer
theburningmonk
1
400
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
300
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
6
3.4k
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
910
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
38k
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
380
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
1.3k
Databricksの生成AI戦略
taka_aki
1
380
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
4k
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
190
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
Into the Great Unknown - MozCon
thekraken
15
1.1k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
Optimizing for Happiness
mojombo
371
69k
Code Reviewing Like a Champion
maltzj
516
39k
Adopting Sorbet at Scale
ufuk
69
8.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
We Have a Design System, Now What?
morganepeng
43
6.8k
What the flash - Photography Introduction
edds
64
11k
A better future with KSS
kneath
231
16k
A Tale of Four Properties
chriscoyier
153
22k
Teambox: Starting and Learning
jrom
128
8.4k
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