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
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
スレットハンティングについて知っておきたいこと
hacket
0
130
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Featured
See All Featured
Bash Introduction
62gerente
607
210k
Adopting Sorbet at Scale
ufuk
71
8.8k
GraphQLとの向き合い方2022年版
quramy
36
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
The Invisible Customer
myddelton
117
13k
Happy Clients
brianwarren
94
6.5k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
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