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
610
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
110
Die nächste Framework Generation? Was kommt nach React, Vue.js und Angular?
naltatis
0
100
evcc – Open Source Sonne tanken
naltatis
0
1.3k
How Deep Is Your Micro Frontend
naltatis
2
760
Open Source Sonne tanken | Wallboxen mit evcc smarter machen
naltatis
1
2.3k
Energie & Feedback Loops
naltatis
0
260
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
660
Micro Frontends Lecture, USPCodeLab, University of São Paulo
naltatis
2
360
Inside the Micro Frontends Toolbox
naltatis
3
330
Other Decks in Technology
See All in Technology
グイグイ系QAマネージャーの仕事
sadonosake
0
290
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7k
Discovering AI Models
picardparis
4
3.9k
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
370
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
240
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
240
効果的なオンコール対応と障害対応
ryuichi1208
5
2.9k
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
380
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.2k
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.3k
Featured
See All Featured
RailsConf 2023
tenderlove
28
810
What's new in Ruby 2.0
geeforr
340
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
In The Pink: A Labor of Love
frogandcode
139
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
What's in a price? How to price your products and services
michaelherold
242
11k
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