SlideShare a Scribd company logo
Web Performance
Scott Jehl, WebPageTest Team
Lightning-Fast
1. Introduction
2. Why Performance Matters
3. Metrics! How do we de
fi
ne fast?
4. Identifying Performance Problems
5. Making Things Faster
6. Wrapping Up
Course Agenda
Identifying Problems
http://webpagetest.org
https://nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/
https://pagespeed.web.dev/
https://developers.google.com/web/tools/chrome-devtools
https://developers.google.com/web/tools/lighthouse/
https://www.browserstack.com/
4-identifying-problems.pdf
https://developers.google.com/web/tools/chrome-devtools/remote-debugging
https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/
https://caniuse.com/#feat=webp
http://whatdoesmysitecost.com/
http://whatdoesmysitecost.com
Goals & Budgets
4-identifying-problems.pdf
4-identifying-problems.pdf
4-identifying-problems.pdf
https://timkadlec.com/2013/01/setting-a-performance-budget/
https://csswizardry.com/2020/01/performance-budgets-pragmatically/
“
Having a pre-defined ‘budget’ is a clear, tangible way to frame
decisions about what can and can’t be be included, and at a
suitably early stage in the project.
Mark Perkins
https://clearleft.com/posts/responsive-design-on-a-budget
Optimize an existing feature or asset on the page.
Remove an existing feature or asset from the page.
Don’t add the new feature or asset.
What if a change breaks the budget?
https://perf-budget-calculator.firebaseapp.com/
httparchive.org
Codifying,
Monitoring
https://github.com/ebidel/lighthouse-ci
https://github.com/ebidel/lighthouse-ci
https://webpack.js.org/configuration/performance/
https://speedcurve.com/
https://speedcurve.com/
https://speedcurve.com/
https://speedcurve.com/
https://www.webpagetest.org/
https://calibreapp.com/
https://calibreapp.com/docs/metrics/budgets
https://calibreapp.com/blog/test-without-ads/
https://calibreapp.com/blog/test-without-ads/
Web Performance
Scott Jehl, WebPageTest Team
Lightning-Fast
Audit some sites you've worked on. (Or any site!)
Check it in Webpage Test, PSI, Dev Tools
Identify 3 most critical performance problems
Taking it further!

More Related Content

Similar to 4-identifying-problems.pdf

Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
Onely
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Atwix
 
Shining a light on performance (js meetup)
Shining a light on performance (js meetup)Shining a light on performance (js meetup)
Shining a light on performance (js meetup)
Yoav Niran
 
Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
Dave Olsen
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
Jon Arne Sæterås
 
Web Systems Architecture by Moshe Kaplan
Web Systems Architecture by Moshe KaplanWeb Systems Architecture by Moshe Kaplan
Web Systems Architecture by Moshe Kaplan
Moshe Kaplan
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
Ignacio Coloma
 
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
Marco Cedaro
 
FRENDS의 시작
FRENDS의 시작FRENDS의 시작
FRENDS의 시작
frendskr
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
How to speed up your website?
How to speed up your website?How to speed up your website?
How to speed up your website?
Cakra Danu Sedayu
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Walter Ebert
 
The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)
Tobias Järlund
 
LeapMotion for Web with React and Flux
LeapMotion for Web with React and FluxLeapMotion for Web with React and Flux
LeapMotion for Web with React and Flux
Laura Moore
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
Dave Olsen
 
Future of Search Engine Factors, AMP, On-Page Key to Success
Future of Search Engine Factors, AMP, On-Page Key to SuccessFuture of Search Engine Factors, AMP, On-Page Key to Success
Future of Search Engine Factors, AMP, On-Page Key to Success
Anetwork
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
Jonas Päckos
 
Expert Days: The VP R&D Open Seminar: Project Management
Expert Days: The VP R&D Open Seminar: Project ManagementExpert Days: The VP R&D Open Seminar: Project Management
Expert Days: The VP R&D Open Seminar: Project Management
Moshe Kaplan
 

Similar to 4-identifying-problems.pdf (20)

Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
 
Shining a light on performance (js meetup)
Shining a light on performance (js meetup)Shining a light on performance (js meetup)
Shining a light on performance (js meetup)
 
Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Web Systems Architecture by Moshe Kaplan
Web Systems Architecture by Moshe KaplanWeb Systems Architecture by Moshe Kaplan
Web Systems Architecture by Moshe Kaplan
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
 
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
 
FRENDS의 시작
FRENDS의 시작FRENDS의 시작
FRENDS의 시작
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
How to speed up your website?
How to speed up your website?How to speed up your website?
How to speed up your website?
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
 
The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)
 
LeapMotion for Web with React and Flux
LeapMotion for Web with React and FluxLeapMotion for Web with React and Flux
LeapMotion for Web with React and Flux
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 
Future of Search Engine Factors, AMP, On-Page Key to Success
Future of Search Engine Factors, AMP, On-Page Key to SuccessFuture of Search Engine Factors, AMP, On-Page Key to Success
Future of Search Engine Factors, AMP, On-Page Key to Success
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Expert Days: The VP R&D Open Seminar: Project Management
Expert Days: The VP R&D Open Seminar: Project ManagementExpert Days: The VP R&D Open Seminar: Project Management
Expert Days: The VP R&D Open Seminar: Project Management
 

Recently uploaded

Best Practices for Password Rotation and Tools to Streamline the Process
Best Practices for Password Rotation and Tools to Streamline the ProcessBest Practices for Password Rotation and Tools to Streamline the Process
Best Practices for Password Rotation and Tools to Streamline the Process
Bert Blevins
 
Bangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model Safe
Bangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model SafeBangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model Safe
Bangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model Safe
bookhotbebes1
 
L-3536-Cost Benifit Analysis in ESIA.pptx
L-3536-Cost Benifit Analysis in ESIA.pptxL-3536-Cost Benifit Analysis in ESIA.pptx
L-3536-Cost Benifit Analysis in ESIA.pptx
naseki5964
 
DATA MINING - CHARACTERISTICS and APPLICATION
DATA MINING - CHARACTERISTICS and APPLICATIONDATA MINING - CHARACTERISTICS and APPLICATION
DATA MINING - CHARACTERISTICS and APPLICATION
MD.ANISUR RAHMAN
 
Coroutines Flow & Channels Workshop Slides
Coroutines Flow & Channels Workshop SlidesCoroutines Flow & Channels Workshop Slides
Coroutines Flow & Channels Workshop Slides
Morteza Nedaei
 
Net Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK EmpireNet Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK Empire
Global Network for Zero
 
2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...
2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...
2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...
renuka b
 
AWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptx
kriangkb1
 
OCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdf
OCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdfOCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdf
OCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdf
Muanisa Waras
 
Unblocking The Main Thread - Solving ANRs and Frozen Frames
Unblocking The Main Thread - Solving ANRs and Frozen FramesUnblocking The Main Thread - Solving ANRs and Frozen Frames
Unblocking The Main Thread - Solving ANRs and Frozen Frames
Sinan KOZAK
 
GUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdf
GUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdfGUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdf
GUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdf
ProexportColombia1
 
Foundation Settlement, effect, causes and solution
Foundation Settlement, effect, causes and solutionFoundation Settlement, effect, causes and solution
Foundation Settlement, effect, causes and solution
Akoladeadebola
 
RF SPUTTERING.pptx engineering physics..
RF SPUTTERING.pptx engineering physics..RF SPUTTERING.pptx engineering physics..
RF SPUTTERING.pptx engineering physics..
abiwaiting2005
 
Research Experience during my undergraduate study.pptx
Research Experience during my undergraduate study.pptxResearch Experience during my undergraduate study.pptx
Research Experience during my undergraduate study.pptx
gxz1691543945
 
this slide shows husien hanafy portfolio 6-2024
this slide shows husien hanafy portfolio 6-2024this slide shows husien hanafy portfolio 6-2024
this slide shows husien hanafy portfolio 6-2024
hessenhanafy1
 
PCA-solved problems.pptx helpful for ml .
PCA-solved problems.pptx helpful for ml .PCA-solved problems.pptx helpful for ml .
PCA-solved problems.pptx helpful for ml .
Sravani477269
 
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulationCS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
amrashbhanuabdul
 
Application Infrastructure and cloud computing.pdf
Application Infrastructure and cloud computing.pdfApplication Infrastructure and cloud computing.pdf
Application Infrastructure and cloud computing.pdf
Mithun Chakroborty
 
Introduction to neural network (Module 1).pptx
Introduction to neural network (Module 1).pptxIntroduction to neural network (Module 1).pptx
Introduction to neural network (Module 1).pptx
archanac21
 
Fundamentals of Finite Element Analysis.
Fundamentals of Finite Element Analysis.Fundamentals of Finite Element Analysis.
Fundamentals of Finite Element Analysis.
VinayakHKhatawate
 

Recently uploaded (20)

Best Practices for Password Rotation and Tools to Streamline the Process
Best Practices for Password Rotation and Tools to Streamline the ProcessBest Practices for Password Rotation and Tools to Streamline the Process
Best Practices for Password Rotation and Tools to Streamline the Process
 
Bangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model Safe
Bangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model SafeBangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model Safe
Bangalore @ℂall @Girls ꧁❤ 0000000000 ❤꧂@ℂall @Girls Service Vip Top Model Safe
 
L-3536-Cost Benifit Analysis in ESIA.pptx
L-3536-Cost Benifit Analysis in ESIA.pptxL-3536-Cost Benifit Analysis in ESIA.pptx
L-3536-Cost Benifit Analysis in ESIA.pptx
 
DATA MINING - CHARACTERISTICS and APPLICATION
DATA MINING - CHARACTERISTICS and APPLICATIONDATA MINING - CHARACTERISTICS and APPLICATION
DATA MINING - CHARACTERISTICS and APPLICATION
 
Coroutines Flow & Channels Workshop Slides
Coroutines Flow & Channels Workshop SlidesCoroutines Flow & Channels Workshop Slides
Coroutines Flow & Channels Workshop Slides
 
Net Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK EmpireNet Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK Empire
 
2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...
2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...
2D_transformatiomcomputer graphics 2d translation, rotation and scaling trans...
 
AWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_04282023.pptx
 
OCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdf
OCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdfOCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdf
OCS Training - Rig Equipment Inspection - Advanced 5 Days_IADC.pdf
 
Unblocking The Main Thread - Solving ANRs and Frozen Frames
Unblocking The Main Thread - Solving ANRs and Frozen FramesUnblocking The Main Thread - Solving ANRs and Frozen Frames
Unblocking The Main Thread - Solving ANRs and Frozen Frames
 
GUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdf
GUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdfGUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdf
GUIA_LEGAL_CHAPTER_4_FOREIGN TRADE CUSTOMS.pdf
 
Foundation Settlement, effect, causes and solution
Foundation Settlement, effect, causes and solutionFoundation Settlement, effect, causes and solution
Foundation Settlement, effect, causes and solution
 
RF SPUTTERING.pptx engineering physics..
RF SPUTTERING.pptx engineering physics..RF SPUTTERING.pptx engineering physics..
RF SPUTTERING.pptx engineering physics..
 
Research Experience during my undergraduate study.pptx
Research Experience during my undergraduate study.pptxResearch Experience during my undergraduate study.pptx
Research Experience during my undergraduate study.pptx
 
this slide shows husien hanafy portfolio 6-2024
this slide shows husien hanafy portfolio 6-2024this slide shows husien hanafy portfolio 6-2024
this slide shows husien hanafy portfolio 6-2024
 
PCA-solved problems.pptx helpful for ml .
PCA-solved problems.pptx helpful for ml .PCA-solved problems.pptx helpful for ml .
PCA-solved problems.pptx helpful for ml .
 
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulationCS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
 
Application Infrastructure and cloud computing.pdf
Application Infrastructure and cloud computing.pdfApplication Infrastructure and cloud computing.pdf
Application Infrastructure and cloud computing.pdf
 
Introduction to neural network (Module 1).pptx
Introduction to neural network (Module 1).pptxIntroduction to neural network (Module 1).pptx
Introduction to neural network (Module 1).pptx
 
Fundamentals of Finite Element Analysis.
Fundamentals of Finite Element Analysis.Fundamentals of Finite Element Analysis.
Fundamentals of Finite Element Analysis.
 

4-identifying-problems.pdf