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
570
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
Tractor Store 2.0 - TodoMVC for Micro Frontends
naltatis
0
64
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
75
evcc – Open Source Sonne tanken
naltatis
0
1.1k
How Deep Is Your Micro Frontend
naltatis
2
740
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.2k
Energie & Feedback Loops
naltatis
0
250
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
630
Micro Frontends Lecture, USPCodeLab, University of São Paulo
naltatis
2
340
Inside the Micro Frontends Toolbox
naltatis
3
320
Other Decks in Technology
See All in Technology
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
簡単に始めるSnowflakeの機械学習
nayuts
1
190
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
AOAI Dev Day - Opening Session
yoshidashingo
2
440
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Practical Orchestrator
shlominoach
185
10k
It's Worth the Effort
3n
181
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
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