SlideShare a Scribd company logo
1 of 51
#gatsbyconf
#gatsbyconf
The Anatomy of A
Performance Audit
Sam Bhagwat • Co-founder, Chief Strategy Officer, Gatsby
#gatsbyconf
● What does fast mean?
● How do you stay fast?
● How do you get fast?
#gatsbyconf
UX
Why performance matters
Conversion Search
Ranking
#gatsbyconf
Making a slow website fast is hard
Everything
impacts perf
Hard to know
what changes
matter for you
Get fast,
stay fast
#gatsbyconf
● First, the performance improvements you make
● Second, the process you have to quantify,
maintain, and extend those improvements
Perf: improvements and process
#gatsbyconf
[perf improvements without a perf
process]
#gatsbyconf
Part 0: What is Fast?
#gatsbyconf
Core Web Vitals
(loading) (interactivity) (layout shift)
#gatsbyconf
Part 1: Stay Fast
Creating a performance
process for your Gatsby site
#gatsbyconf
1. Choose a primary testing tool
Lighthouse (Google) WebPageTest
#gatsbyconf
Gatsby Cloud Third-party services
2. Per-commit, per-PR perf monitoring
#gatsbyconf
3. Quantify each change & watch the #s
Before After
#gatsbyconf
Part 2: Get Fast
Implementing Performance Improvements
#gatsbyconf
All fast websites are alike.
All slow websites are slow in
different ways.
- Leo Tolstoy Kyle Mathews
#gatsbyconf
All performance work is telling
your user’s browser how to do
less work
#gatsbyconf
1. Fetch and parse third party scripts.
2. Fetch and parse your main JavaScript bundle.
3. Fetch, load and paint images and media
4. Load CSS & fonts and paint the screen
5. Make calls over the network to do (1)-(4)
Types of work the browser does
(post-HTML load)
#gatsbyconf
1. Address third-party script impact
2. Reduce JavaScript bundle size
3. Optimize image and media delivery
4. Optimize styling and font files
5. Resource requests & CDN configuration
Types of improvements you can make
#gatsbyconf
For each “browser work” type:
1. Triage: triage the overall impact caused by this type of
browser work to decide your level of effort
2. Isolate: Identify & isolate key lines of code impacting perf
3. Refactor: when clear-cut, remove or refactor code
4. Evaluate: when not clear-cut, estimate potential perf gain
from refactoring, and evaluate whether it’s worth the time
TIRE: a perf improvement pattern
#gatsbyconf
1. Address third-party script impact
2. Reduce JavaScript bundle size
3. Optimize image and media delivery
4. Optimize styling and font files
5. Resource requests & CDN configuration
(1)Third-party scripts ||
#gatsbyconf
(1)Third-party scripts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
① “Reduce
the impact of
third-party
code”
② “Minimize
main-thread
work”
③ “Reduce
JavaScript
execution time”
(1)Third-party scripts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
● Remove each script, test before / after
Lighthouse scores (individual impact)
● Remove all scripts, test before / after
Lighthouse scores (collective impact)
Understand script impact
(1)Third-party scripts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
Understand the business “why”
(1)Third-party scripts || Triage | Isolate | Refactor | Evaluate
● For each script, understand:
○ Overall business purpose
○ Relative importance
○ Who uses the data
#gatsbyconf
1. Cut when possible
a. Remove high-cost, low-
value scripts
b. Remove unused scripts
2. Optimize everything else
a. Lazy load scripts
b. Inline scripts
Reduce script impact
(1)Third-party scripts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Address third-party script impact
2. Reduce JavaScript bundle size
3. Optimize image and media delivery
4. Optimize styling and font files
5. Resource requests & CDN configuration
(2) Reduce bundle size
#gatsbyconf
② “Reduce
JavaScript
execution time”
① “Minimize
main-thread
work”
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
Install gatsby-plugin-webpack-bundle-analyser-v2
and add it to your gatsby-config.js
Profile your code
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
Experimental: gatsby-plugin-perf-budgets
Visit /_report.html
#gatsbyconf
Plugin
output for
a page
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
Application level
chunks (shared
with all pages)
framework-*.js
(React / React-DOM)
app-*.js
(Gatsby framework)
webpack-runtime-*.js
(coordinates bundle
interaction)
commons-*.js
(libraries used on
every page)
styles-*.js
(CSS modules)
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
Template-level
chunks (shared
with pages with
this template )
component-*.js
(each component & the
components it uses)
[hash].js
(3rd-party libraries
used by this template)
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Order of operations
a. Audit commons-*.js, app-*.js first
b. Audit critical path templates
2. On each chunk….
a. Identify large third-party imports (eg, Moment)
b. Identify components & data that shouldn’t be
needed in a particular template or commons
Identify high-leverage points
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Replace heavy third-party libraries with
lighter weight alternatives
2. Upgrade to Gatsby 3 for smaller bundles
3. Examine your import structure
a. Look for shared components pulling in
other, unneeded components
Make high-impact changes
(2) Reduce bundle size || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Address third-party script impact
2. Reduce JavaScript bundle size
3. Optimize image and media delivery
4. Optimize styling and font files
5. Resource requests & CDN configuration
#gatsbyconf
① “Defer
offscreen
images”
② “Serve
images in next-
gen formats”
③ “Efficiently
encode images”
(3) Images and Media|| Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Smaller & faster than gatsby-image
2. Much faster than not using gatsby-image at all!
Use gatsby-plugin-image
(3) Images and Media|| Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Address third-party script impact
2. Reduce JavaScript bundle size
3. Use Gatsby’s tools for images and other media
4. Optimize styling and font files
5. Resource requests & CDN configuration
#gatsbyconf
(command-shift-P)
(4) Styling and Fonts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
(4) Styling and Fonts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
(4) Styling and Fonts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
(4) Styling and Fonts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
….consider refactoring to a more modular CSS solution
(4) Styling and Fonts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
If you see >30kb font files, slim down
● Prefer woff2, woff to ttf
● Trim down to one alphabet
(eg Latin for US/EU)
● Prefer (correct) font self-
hosting to Google Fonts to
save request times
(4) Styling and Fonts || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
1. Address third-party script impact
2. Reduce JavaScript bundle size
3. Use Gatsby’s tools for images and other media
4. Optimize styling and font files
5. Resource requests & CDN configuration
#gatsbyconf
● Load critical assets from your main domain where possible.
● Preconnect to subdomains using gatsby-plugin-preconnect
● Utilize Gatsby Link to optimizing intra-site navigation
Resource requests & CDN config
(5) Resources & CDN || Triage | Isolate | Refactor | Evaluate
#gatsbyconf
● Perf matters because of UX, conversions, and search rankings
● Like getting healthy, hard part is getting fast and staying fast
● You stay fast by running a testing tool on every PR and commit.
● You get fast by:
○ ....looking at five types of browser work (third-party scripts,
JS bundles, images & media, styles, and requests)
○ And following the TIRE process (Triage relative importance,
Isolate key code, Refactor if easy, Evaluate impact if not)
So, to recap…….
#gatsbyconf
● Sign up for Gatsby Cloud
● Use the new gatsby-plugin-image
And...if you only have a couple hours
#gatsbyconf
Oh, and one last thing….
#gatsbyconf
Want to do this even better? We’re
happy to help.
#gatsbyconf
Want to do this even better? We’re
happy to help.
gatsbyjs.com/concierge/
#gatsbyconf
#gatsbyconf
Thank you!✌
Sam Bhagwat
@calcsam

More Related Content

What's hot

Uber: Kafka Consumer Proxy
Uber: Kafka Consumer ProxyUber: Kafka Consumer Proxy
Uber: Kafka Consumer Proxyconfluent
 
Exactly-once Semantics in Apache Kafka
Exactly-once Semantics in Apache KafkaExactly-once Semantics in Apache Kafka
Exactly-once Semantics in Apache Kafkaconfluent
 
Development of Midgut & Hindgut
Development of Midgut & HindgutDevelopment of Midgut & Hindgut
Development of Midgut & HindgutNeeta Chhabra
 
Blood supply and venous drainage of the gastro-intestinal tract and liver
Blood supply and venous drainage of the gastro-intestinal tract and liverBlood supply and venous drainage of the gastro-intestinal tract and liver
Blood supply and venous drainage of the gastro-intestinal tract and livermeducationdotnet
 
Programmatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and Zillow
Programmatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and ZillowProgrammatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and Zillow
Programmatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and ZillowBernard Huang
 
Tips & Tricks for Apache Kafka®
Tips & Tricks for Apache Kafka®Tips & Tricks for Apache Kafka®
Tips & Tricks for Apache Kafka®confluent
 
Microservices in the Apache Kafka Ecosystem
Microservices in the Apache Kafka EcosystemMicroservices in the Apache Kafka Ecosystem
Microservices in the Apache Kafka Ecosystemconfluent
 
Apache Kafka 0.8 basic training - Verisign
Apache Kafka 0.8 basic training - VerisignApache Kafka 0.8 basic training - Verisign
Apache Kafka 0.8 basic training - VerisignMichael Noll
 

What's hot (9)

Uber: Kafka Consumer Proxy
Uber: Kafka Consumer ProxyUber: Kafka Consumer Proxy
Uber: Kafka Consumer Proxy
 
Exactly-once Semantics in Apache Kafka
Exactly-once Semantics in Apache KafkaExactly-once Semantics in Apache Kafka
Exactly-once Semantics in Apache Kafka
 
Development of Midgut & Hindgut
Development of Midgut & HindgutDevelopment of Midgut & Hindgut
Development of Midgut & Hindgut
 
Blood supply and venous drainage of the gastro-intestinal tract and liver
Blood supply and venous drainage of the gastro-intestinal tract and liverBlood supply and venous drainage of the gastro-intestinal tract and liver
Blood supply and venous drainage of the gastro-intestinal tract and liver
 
Programmatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and Zillow
Programmatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and ZillowProgrammatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and Zillow
Programmatic SEO: How to Dominate SEO Like TripAdvisor, Yelp and Zillow
 
Tips & Tricks for Apache Kafka®
Tips & Tricks for Apache Kafka®Tips & Tricks for Apache Kafka®
Tips & Tricks for Apache Kafka®
 
Microservices in the Apache Kafka Ecosystem
Microservices in the Apache Kafka EcosystemMicroservices in the Apache Kafka Ecosystem
Microservices in the Apache Kafka Ecosystem
 
Apache Kafka 0.8 basic training - Verisign
Apache Kafka 0.8 basic training - VerisignApache Kafka 0.8 basic training - Verisign
Apache Kafka 0.8 basic training - Verisign
 
Prometheus and Grafana
Prometheus and GrafanaPrometheus and Grafana
Prometheus and Grafana
 

Similar to The Anatomy Of A Performance Audit

BigQuery case study in Groovenauts & Dive into the DataflowJavaSDK
BigQuery case study in Groovenauts & Dive into the DataflowJavaSDKBigQuery case study in Groovenauts & Dive into the DataflowJavaSDK
BigQuery case study in Groovenauts & Dive into the DataflowJavaSDKnagachika t
 
Ichiba Bamboo Users Meetng #1
Ichiba Bamboo Users Meetng #1Ichiba Bamboo Users Meetng #1
Ichiba Bamboo Users Meetng #1Takahiro Yamaki
 
SFO15-110: Toolchain Collaboration
SFO15-110: Toolchain CollaborationSFO15-110: Toolchain Collaboration
SFO15-110: Toolchain CollaborationLinaro
 
Graph processing at scale using spark & graph frames
Graph processing at scale using spark & graph framesGraph processing at scale using spark & graph frames
Graph processing at scale using spark & graph framesRon Barabash
 
Git essential training & sharing self
Git essential training & sharing selfGit essential training & sharing self
Git essential training & sharing selfChen-Tien Tsai
 
Sakai Technical Future Musings
Sakai Technical Future MusingsSakai Technical Future Musings
Sakai Technical Future MusingsCharles Severance
 
Fluent 2018: When third parties stop being polite... and start getting real
Fluent 2018: When third parties stop being polite... and start getting realFluent 2018: When third parties stop being polite... and start getting real
Fluent 2018: When third parties stop being polite... and start getting realAkamai Developers & Admins
 
When Third Parties Stop Being Polite... and Start Getting Real
When Third Parties Stop Being Polite... and Start Getting RealWhen Third Parties Stop Being Polite... and Start Getting Real
When Third Parties Stop Being Polite... and Start Getting RealNicholas Jansma
 
When third parties stop being polite... and start getting real
When third parties stop being polite... and start getting realWhen third parties stop being polite... and start getting real
When third parties stop being polite... and start getting realCharles Vazac
 
How to plan and define your CI-CD pipeline
How to plan and define your CI-CD pipelineHow to plan and define your CI-CD pipeline
How to plan and define your CI-CD pipelineElasTest Project
 
Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers
Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers
Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers Authoritas
 
Managing e commerce systems codebase with git
Managing e commerce systems codebase with gitManaging e commerce systems codebase with git
Managing e commerce systems codebase with gitBruno Ricardo Siqueira
 
Que nos espera a los ALM Dudes para el 2013?
Que nos espera a los ALM Dudes para el 2013?Que nos espera a los ALM Dudes para el 2013?
Que nos espera a los ALM Dudes para el 2013?Bruno Capuano
 
[29-05-2023] All Brands Audit & Solution performances.pptx
[29-05-2023] All Brands Audit & Solution performances.pptx[29-05-2023] All Brands Audit & Solution performances.pptx
[29-05-2023] All Brands Audit & Solution performances.pptxrahmathidayat471220
 
Server Development Workflow For PicCollage
Server Development Workflow For PicCollageServer Development Workflow For PicCollage
Server Development Workflow For PicCollageLin Jen-Shin
 
Optimizing a React application for Core Web Vitals
Optimizing a React application for Core Web VitalsOptimizing a React application for Core Web Vitals
Optimizing a React application for Core Web VitalsJuan Picado
 

Similar to The Anatomy Of A Performance Audit (20)

Git 1
Git 1Git 1
Git 1
 
BigQuery case study in Groovenauts & Dive into the DataflowJavaSDK
BigQuery case study in Groovenauts & Dive into the DataflowJavaSDKBigQuery case study in Groovenauts & Dive into the DataflowJavaSDK
BigQuery case study in Groovenauts & Dive into the DataflowJavaSDK
 
Ichiba Bamboo Users Meetng #1
Ichiba Bamboo Users Meetng #1Ichiba Bamboo Users Meetng #1
Ichiba Bamboo Users Meetng #1
 
SFO15-110: Toolchain Collaboration
SFO15-110: Toolchain CollaborationSFO15-110: Toolchain Collaboration
SFO15-110: Toolchain Collaboration
 
Graph processing at scale using spark & graph frames
Graph processing at scale using spark & graph framesGraph processing at scale using spark & graph frames
Graph processing at scale using spark & graph frames
 
Ultimate Git Workflow - Seoul 2015
Ultimate Git Workflow - Seoul 2015Ultimate Git Workflow - Seoul 2015
Ultimate Git Workflow - Seoul 2015
 
Git essential training & sharing self
Git essential training & sharing selfGit essential training & sharing self
Git essential training & sharing self
 
Sakai Technical Future Musings
Sakai Technical Future MusingsSakai Technical Future Musings
Sakai Technical Future Musings
 
Web Technology Part 2
Web Technology Part 2Web Technology Part 2
Web Technology Part 2
 
Fluent 2018: When third parties stop being polite... and start getting real
Fluent 2018: When third parties stop being polite... and start getting realFluent 2018: When third parties stop being polite... and start getting real
Fluent 2018: When third parties stop being polite... and start getting real
 
When Third Parties Stop Being Polite... and Start Getting Real
When Third Parties Stop Being Polite... and Start Getting RealWhen Third Parties Stop Being Polite... and Start Getting Real
When Third Parties Stop Being Polite... and Start Getting Real
 
When third parties stop being polite... and start getting real
When third parties stop being polite... and start getting realWhen third parties stop being polite... and start getting real
When third parties stop being polite... and start getting real
 
How to plan and define your CI-CD pipeline
How to plan and define your CI-CD pipelineHow to plan and define your CI-CD pipeline
How to plan and define your CI-CD pipeline
 
Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers
Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers
Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers
 
Managing e commerce systems codebase with git
Managing e commerce systems codebase with gitManaging e commerce systems codebase with git
Managing e commerce systems codebase with git
 
Lit there be light
Lit there be lightLit there be light
Lit there be light
 
Que nos espera a los ALM Dudes para el 2013?
Que nos espera a los ALM Dudes para el 2013?Que nos espera a los ALM Dudes para el 2013?
Que nos espera a los ALM Dudes para el 2013?
 
[29-05-2023] All Brands Audit & Solution performances.pptx
[29-05-2023] All Brands Audit & Solution performances.pptx[29-05-2023] All Brands Audit & Solution performances.pptx
[29-05-2023] All Brands Audit & Solution performances.pptx
 
Server Development Workflow For PicCollage
Server Development Workflow For PicCollageServer Development Workflow For PicCollage
Server Development Workflow For PicCollage
 
Optimizing a React application for Core Web Vitals
Optimizing a React application for Core Web VitalsOptimizing a React application for Core Web Vitals
Optimizing a React application for Core Web Vitals
 

Recently uploaded

Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Erbil Polytechnic University
 
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...Stork
 
Robotics Group 10 (Control Schemes) cse.pdf
Robotics Group 10  (Control Schemes) cse.pdfRobotics Group 10  (Control Schemes) cse.pdf
Robotics Group 10 (Control Schemes) cse.pdfsahilsajad201
 
Levelling - Rise and fall - Height of instrument method
Levelling - Rise and fall - Height of instrument methodLevelling - Rise and fall - Height of instrument method
Levelling - Rise and fall - Height of instrument methodManicka Mamallan Andavar
 
70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical training70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical trainingGladiatorsKasper
 
KCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitosKCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitosVictor Morales
 
Prach: A Feature-Rich Platform Empowering the Autism Community
Prach: A Feature-Rich Platform Empowering the Autism CommunityPrach: A Feature-Rich Platform Empowering the Autism Community
Prach: A Feature-Rich Platform Empowering the Autism Communityprachaibot
 
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithmComputer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithmDeepika Walanjkar
 
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptJohnWilliam111370
 
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...Sumanth A
 
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENTFUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENTSneha Padhiar
 
Virtual memory management in Operating System
Virtual memory management in Operating SystemVirtual memory management in Operating System
Virtual memory management in Operating SystemRashmi Bhat
 
Cost estimation approach: FP to COCOMO scenario based question
Cost estimation approach: FP to COCOMO scenario based questionCost estimation approach: FP to COCOMO scenario based question
Cost estimation approach: FP to COCOMO scenario based questionSneha Padhiar
 
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSneha Padhiar
 
Javier_Fernandez_CARS_workshop_presentation.pptx
Javier_Fernandez_CARS_workshop_presentation.pptxJavier_Fernandez_CARS_workshop_presentation.pptx
Javier_Fernandez_CARS_workshop_presentation.pptxJavier Fernández Muñoz
 
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.elesangwon
 
Module-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdfModule-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdfManish Kumar
 
DEVICE DRIVERS AND INTERRUPTS SERVICE MECHANISM.pdf
DEVICE DRIVERS AND INTERRUPTS  SERVICE MECHANISM.pdfDEVICE DRIVERS AND INTERRUPTS  SERVICE MECHANISM.pdf
DEVICE DRIVERS AND INTERRUPTS SERVICE MECHANISM.pdfAkritiPradhan2
 
US Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionUS Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionMebane Rash
 

Recently uploaded (20)

Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
 
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
Stork Webinar | APM Transformational planning, Tool Selection & Performance T...
 
Robotics Group 10 (Control Schemes) cse.pdf
Robotics Group 10  (Control Schemes) cse.pdfRobotics Group 10  (Control Schemes) cse.pdf
Robotics Group 10 (Control Schemes) cse.pdf
 
Levelling - Rise and fall - Height of instrument method
Levelling - Rise and fall - Height of instrument methodLevelling - Rise and fall - Height of instrument method
Levelling - Rise and fall - Height of instrument method
 
70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical training70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical training
 
KCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitosKCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitos
 
Prach: A Feature-Rich Platform Empowering the Autism Community
Prach: A Feature-Rich Platform Empowering the Autism CommunityPrach: A Feature-Rich Platform Empowering the Autism Community
Prach: A Feature-Rich Platform Empowering the Autism Community
 
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithmComputer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithm
 
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
 
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
Robotics-Asimov's Laws, Mechanical Subsystems, Robot Kinematics, Robot Dynami...
 
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENTFUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
FUNCTIONAL AND NON FUNCTIONAL REQUIREMENT
 
Virtual memory management in Operating System
Virtual memory management in Operating SystemVirtual memory management in Operating System
Virtual memory management in Operating System
 
Cost estimation approach: FP to COCOMO scenario based question
Cost estimation approach: FP to COCOMO scenario based questionCost estimation approach: FP to COCOMO scenario based question
Cost estimation approach: FP to COCOMO scenario based question
 
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
 
Javier_Fernandez_CARS_workshop_presentation.pptx
Javier_Fernandez_CARS_workshop_presentation.pptxJavier_Fernandez_CARS_workshop_presentation.pptx
Javier_Fernandez_CARS_workshop_presentation.pptx
 
Designing pile caps according to ACI 318-19.pptx
Designing pile caps according to ACI 318-19.pptxDesigning pile caps according to ACI 318-19.pptx
Designing pile caps according to ACI 318-19.pptx
 
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
2022 AWS DNA Hackathon 장애 대응 솔루션 jarvis.
 
Module-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdfModule-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdf
 
DEVICE DRIVERS AND INTERRUPTS SERVICE MECHANISM.pdf
DEVICE DRIVERS AND INTERRUPTS  SERVICE MECHANISM.pdfDEVICE DRIVERS AND INTERRUPTS  SERVICE MECHANISM.pdf
DEVICE DRIVERS AND INTERRUPTS SERVICE MECHANISM.pdf
 
US Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of ActionUS Department of Education FAFSA Week of Action
US Department of Education FAFSA Week of Action
 

The Anatomy Of A Performance Audit

Editor's Notes

  1. I’m excited to talk about a key reason why people love Gatsby: fast sites. "In fifteen minutes, I'm going to share with you enough information to get started with a performance audit, we've done dozens of these at Gatsby."
  2. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
  3. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
  4. What Addy’s saying is that performance work without organizational basis in place will feel like this. “[After] improving performance, metrics often rapidly regress once [teams] return to feature development.” -- Addy Osmani, Web Performance Lead, Google “When companies put in the work to improve performance, perf metrics will often rapidly regress once they return to feature development.”
  5. Okay, so a couple things about this talk. Also, this talk is accompanied by a new piece of documentation in the Performance section. If you’re curious to dive deeper into any of the topics I’ll be covering, that doc is a great place to star So let’s talk about what a performance process looks like. The good news is that it’s simpler than you might think.
  6. Third, watch the numbers. Performance gains -- and regressions -- are sometimes unexpectedly large. You could improve performance 10 points by eliminating one script; or reduce it 10 points by accidentally pulling in extra JavaScript. Quantify so you know what moves the needle.
  7. So let’s talk about what a performance process looks like. The good news is that it’s simpler than you might think.
  8. First, choose a testing tools. These are both great choices. Lighthouse tends to be seen as more "canonical". Webpagetest tends to be seen as more precise.
  9. Second, monitor performance on a per-commit, per-PR basis to flag regressions. Gatsby Cloud has Lighthouse performance reports built into its CI/CD. Alternately, use a third-party service -- there are tons of great options.
  10. Third, watch the numbers. Performance gains -- and regressions -- are sometimes unexpectedly large. You could improve performance 10 points by eliminating one script; or reduce it 10 points by accidentally pulling in extra JavaScript. Quantify so you know what moves the needle.
  11. Okay, so you’ve got your performance process in place. Now time to get down to improving performance.
  12. Gatsby makes your sites fast by default. But there are lots of things you can do that will still make it less fast than it could be. We’re going to talk today about how to improve performance by finding and fixing those issues. This is a great quote by Kyle.
  13. This is one way to think about performance. All performance work is telling your user’s browser how to do less work
  14. Fundamentally there are five things that your browser is doing, after it reads the initial HTML. “These are the main that we’ve seen from Gatsby sites” ← use this language to frame things. Gatsby does a ton of things to optimize -- both inherent in the framework as well as a number of plugins -- Each thing the browser does is something you can optimize.
  15. Typically you’re going to get the most impact from tackling the first three. But we’re going to
  16. Typically you’re going to get the most impact from tackling the first three. But you won’t know for sure until you run a report. But which one of them is most important? That’s where you run your audit report. Let’s dive into a audit quickly.
  17. Let’s talk about addressing third-party scripts.
  18. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
  19. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
  20. 3rd party scripts are a black box for most developers. To improve things, you have to look into the box.
  21. The first thing you should do is understand what’s going on.
  22. After you have a sense for the impact of each script and all scripts, you have a number of options to explore. Maybe there’s a high-cost script that you can cleverly eliminate by using a system you already use to send the data marketing needs. Maybe one script was only being left by someone who left last last month, and you can get rid of it.
  23. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
  24. This is the plugin output for one of our builds on gatsbyjs.com. Seeing something like this can be a bit intimidating, so I’ll break it down here.
  25. Looking at the naming structure, you can identify several “application” level chunks shared between all pages (Note: This is a pretty healthy bundle)
  26. You can also see chunks that are specific to the particular “template” used to generate this page (Note: This is a pretty healthy bundle)
  27. Once you’ve done
  28. Laurie just gave a great talk on Gatsby image, so this is most of it! Go watch her talk and implement Gatsby image if you haven’t already!
  29. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
  30. Split out into a couple of slides, add screenshots, talk track from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R57
  31. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  32. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  33. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  34. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  35. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  36. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  37. This is the Coverage Drawer -- a tab you can find in Chrome Developer Tools -- for the homepage of an e-commerce site that is using Gatsby. You can see their homepage is roughly 300 kilobytes, around 80% of which isn’t being used. This is because they’re pulling in a lot of CSS that isn’t being used. They’re working on refactoring and modularizing their CSS using CSS modules. Slim down from https://github.com/gatsbyjs/gatsby/pull/29373/files#diff-9247dd003bf5e2c2484bc03c00563897b16e095ec6d6682c997951ba1b78f654R139
  38. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
  39. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.
  40. The tricky thing is that performance isn’t just about making your site fast, it’s about keeping it fast. That means putting the right processes in place at your organization. In other words, performance is both a technical challenge and a people challenge.