SlideShare a Scribd company logo
Optimize PerformanceOptimize Performance
(and not die trying)(and not die trying)
Diego Cardozo
Sr. Web Performance Engineer @ NetSuite
MotivationMotivation
3 pillars in user experience
Design
Usability
Performance
80% - 90% load time comes from the front end
Additionally...
Better user conversion
Affects Google search result rankings
ChallengeChallenge
Initial goal for this talk: teach everything required to
build fast sites
12 hour talk?
Very complex (a.k.a boring)
This group is too diverse for a technical talk
New goal
Drill into the world of web performance
Go over the main optimization techniques
If I was successful...
Continue learning by enrolling in Google's web
performance course (link at the end)
Agenda / FocusAgenda / Focus
1. Measure
Have a clear goal
Measure early
Measure often
2. Optimize
Reduce amount of bytes
Reduce critical resources
Shorten the Critical Rendering Path (CRP)
1. Measure1. Measure
MeasureMeasure
Have a clear goal
Twitter - Time to first tweet
NetSuite - Performance budget
Google - RAIL
100ms 16ms 50ms 1s
MeasureMeasure
Measure early
WebPageTest
Page Speed Insights
sitespeed.io
MeasureMeasure
Measure often
Know how performance evolves
Automation tools
Dynatrace / GTMetrix
More in my talk from Testing Meetup
2. Optimize2. Optimize
OptimizeOptimize
Theory
The CRP is the sequence of steps followed by the
browser in order to render a page
1. Parse the HTML and build the DOM
2. Parse the CSS and build the CSSOM
3. Build the Render Tree
4. Position elements on the screen (Layout)
5. Paint the screen
OptimizeOptimize
Theory
The CRP has 3 main components which can be optimized
1. Total amount of bytes to be downloaded
2. Amount of critical resources (HTML, CSS y blocking JS)
3. Amount of roundtrips needed in order to gather
critical resources
OptimizeOptimize
Example
Total KB: 11
Critical resources: 3
CRP length: 2
OptimizeOptimize
Reduce total amount of bytes
Minify, compress and cache
HTML
CSS
JavaScript
Remove unused styles
Compress images
Example: compressor.io
Compress and unify fonts
unused-css.com
OptimizeOptimize
Reduce amount of critical resources
Concatenate JS and CSS files
Use media queries on <link> tags to unblock
rendering
Write CSS directly on HTML (inline)
Leaving everything inline can be harmful
Write JS directly on HTML (inline)
Still blocks rendering when executed if not marked
as async
OptimizeOptimize
Shorten the Critical Rendering Path (CRP)
Delay JavaScript execution
Add an async attribute to <script> tags so that they
don't block rendering
Code optimizations
LinksLinks
Test performance and not die trying
Google/Udacity course on performance optimization
My blog post which summarizes the above course
Article on removing unused CSS
Questions?Questions?
dcardozo@netsuite.com
slides.com/diegocard/optimize-performance

More Related Content

Viewers also liked

Poster - Sylvia Cheung
Poster - Sylvia CheungPoster - Sylvia Cheung
Poster - Sylvia Cheung
Sylvia Cheung
 
facultad de ciencias de la salud
facultad de ciencias de la salud facultad de ciencias de la salud
facultad de ciencias de la salud
marisolabcdefghjklmn
 
Super Saturday Flyer (1)
Super Saturday Flyer (1)Super Saturday Flyer (1)
Super Saturday Flyer (1)
Waverly Masters
 
Find Time For Fitness
Find Time For FitnessFind Time For Fitness
Find Time For Fitness
streko5733
 
Maker Party2014
Maker Party2014Maker Party2014
Maker Party2014
reza Habibi
 
Android Development
Android DevelopmentAndroid Development
Android Development
Pluu love
 
Aula a importância da polinização por insetos
Aula a importância da polinização por insetosAula a importância da polinização por insetos
Aula a importância da polinização por insetos
Emanuel Fraca
 
Multisim training in mohali
Multisim training in mohaliMultisim training in mohali
Multisim training in mohali
Arwinder paul singh
 
Machine Learning and Cognitive Fingerprinting - SparkCognition
Machine Learning and Cognitive Fingerprinting - SparkCognitionMachine Learning and Cognitive Fingerprinting - SparkCognition
Machine Learning and Cognitive Fingerprinting - SparkCognition
SparkCognition
 
IMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOS
IMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOSIMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOS
IMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOS
Eliot Guerra
 
Client Case Study - Sandwell Council
Client Case Study - Sandwell Council Client Case Study - Sandwell Council
Client Case Study - Sandwell Council
BIM4M2: BIM for Manufacturers & Manufacturing
 
OxfordLearn Training guide
OxfordLearn Training guideOxfordLearn Training guide
OxfordLearn Training guide
KSUPY-EdTech Unit
 
BIM - What the Client wants from Manufacturers #BIM4M2help
BIM - What the Client wants from Manufacturers #BIM4M2helpBIM - What the Client wants from Manufacturers #BIM4M2help
BIM - What the Client wants from Manufacturers #BIM4M2help
BIM4M2: BIM for Manufacturers & Manufacturing
 

Viewers also liked (14)

Poster - Sylvia Cheung
Poster - Sylvia CheungPoster - Sylvia Cheung
Poster - Sylvia Cheung
 
facultad de ciencias de la salud
facultad de ciencias de la salud facultad de ciencias de la salud
facultad de ciencias de la salud
 
Super Saturday Flyer (1)
Super Saturday Flyer (1)Super Saturday Flyer (1)
Super Saturday Flyer (1)
 
Find Time For Fitness
Find Time For FitnessFind Time For Fitness
Find Time For Fitness
 
Maker Party2014
Maker Party2014Maker Party2014
Maker Party2014
 
Android Development
Android DevelopmentAndroid Development
Android Development
 
POA_16_006
POA_16_006POA_16_006
POA_16_006
 
Aula a importância da polinização por insetos
Aula a importância da polinização por insetosAula a importância da polinização por insetos
Aula a importância da polinização por insetos
 
Multisim training in mohali
Multisim training in mohaliMultisim training in mohali
Multisim training in mohali
 
Machine Learning and Cognitive Fingerprinting - SparkCognition
Machine Learning and Cognitive Fingerprinting - SparkCognitionMachine Learning and Cognitive Fingerprinting - SparkCognition
Machine Learning and Cognitive Fingerprinting - SparkCognition
 
IMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOS
IMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOSIMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOS
IMPACTO Y EVOLUCIÓN DE LA PIRATERÍA INFORMÁTICA EN MÉXICO EN LOS ÚLTIMOS 10 AÑOS
 
Client Case Study - Sandwell Council
Client Case Study - Sandwell Council Client Case Study - Sandwell Council
Client Case Study - Sandwell Council
 
OxfordLearn Training guide
OxfordLearn Training guideOxfordLearn Training guide
OxfordLearn Training guide
 
BIM - What the Client wants from Manufacturers #BIM4M2help
BIM - What the Client wants from Manufacturers #BIM4M2helpBIM - What the Client wants from Manufacturers #BIM4M2help
BIM - What the Client wants from Manufacturers #BIM4M2help
 

Similar to Optimize performance and not die trying

Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
clickramanm
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
sacred 8
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
Ashok Modi
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
John McCaffrey
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
John McCaffrey
 
Optimizing Browser Rendering
Optimizing Browser RenderingOptimizing Browser Rendering
Optimizing Browser Rendering
michael.labriola
 
Improving Drupal Performances
Improving Drupal PerformancesImproving Drupal Performances
Improving Drupal Performances
Vladimir Ilic
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
kaven yan
 
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
Aptimize
 
[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
rahmathidayat471220
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Jordan Zurowski
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
Frederick Townes
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
 
Drupal Camp Victoria
Drupal Camp VictoriaDrupal Camp Victoria
Drupal Camp Victoria
Image X Media
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
Smile I.T is open
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
Ashok Modi
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
Haribabu Nandyal Padmanaban
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Jonathan Klein
 
Seo for Engineers
Seo for EngineersSeo for Engineers
Seo for Engineers
Cort Tafoya
 

Similar to Optimize performance and not die trying (20)

Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
Optimizing Browser Rendering
Optimizing Browser RenderingOptimizing Browser Rendering
Optimizing Browser Rendering
 
Improving Drupal Performances
Improving Drupal PerformancesImproving Drupal Performances
Improving Drupal Performances
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
 
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...Accelerate SharePoint 2007 and 2010 websites and intranets    mike iem - apti...
Accelerate SharePoint 2007 and 2010 websites and intranets mike iem - apti...
 
[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
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252 (4)
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Drupal Camp Victoria
Drupal Camp VictoriaDrupal Camp Victoria
Drupal Camp Victoria
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
 
Seo for Engineers
Seo for EngineersSeo for Engineers
Seo for Engineers
 

More from Diego Cardozo

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuarios
Diego Cardozo
 
The next billion users
The next billion usersThe next billion users
The next billion users
Diego Cardozo
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
Diego Cardozo
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
Diego Cardozo
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
Diego Cardozo
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloud
Diego Cardozo
 
Cómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intentoCómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intento
Diego Cardozo
 
Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
Diego Cardozo
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
Diego Cardozo
 
Organización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.jsOrganización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.js
Diego Cardozo
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
Diego Cardozo
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software Development
Diego Cardozo
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
Diego Cardozo
 
Single page applications
Single page applicationsSingle page applications
Single page applications
Diego Cardozo
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
Diego Cardozo
 

More from Diego Cardozo (15)

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuarios
 
The next billion users
The next billion usersThe next billion users
The next billion users
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloud
 
Cómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intentoCómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intento
 
Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
 
Organización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.jsOrganización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.js
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software Development
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 

Recently uploaded

04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching
quanhoangd129
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
DEMONDUOS
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
quanhoangd129
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
shanihomely
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
simran hot girls
 
09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching
quanhoangd129
 
How to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at ScaleHow to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at Scale
Anchore
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
Jersey (CHE-PING) Su
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
dream girl
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
norina2645
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
quanhoangd129
 
Hotel Management Software Development Company
Hotel Management Software Development CompanyHotel Management Software Development Company
Hotel Management Software Development Company
XongoLab Technologies LLP
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
kiara pandey
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
neshakor5152
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
Daniel Zivkovic
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
kalichargn70th171
 
03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching
quanhoangd129
 

Recently uploaded (20)

04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
Authentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptxAuthentication Review-June -2024 AP & TS.pptx
Authentication Review-June -2024 AP & TS.pptx
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
 
09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching09. Ruby Object Oriented Programming - Ruby Core Teaching
09. Ruby Object Oriented Programming - Ruby Core Teaching
 
How to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at ScaleHow to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at Scale
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
當測試開始左移
當測試開始左移當測試開始左移
當測試開始左移
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
 
Hotel Management Software Development Company
Hotel Management Software Development CompanyHotel Management Software Development Company
Hotel Management Software Development Company
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
 
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Mysore 000XX00000 Provide Best And Top Girl Service And No1 in City
 
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdfAI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
AI - Your Startup Sidekick (Leveraging AI to Bootstrap a Lean Startup).pdf
 
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdfA Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
A Step-by-Step Guide to Selecting the Right Automated Software Testing Tools.pdf
 
03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching
 

Optimize performance and not die trying

  • 1. Optimize PerformanceOptimize Performance (and not die trying)(and not die trying) Diego Cardozo Sr. Web Performance Engineer @ NetSuite
  • 2. MotivationMotivation 3 pillars in user experience Design Usability Performance 80% - 90% load time comes from the front end Additionally... Better user conversion Affects Google search result rankings
  • 3. ChallengeChallenge Initial goal for this talk: teach everything required to build fast sites 12 hour talk? Very complex (a.k.a boring) This group is too diverse for a technical talk New goal Drill into the world of web performance Go over the main optimization techniques If I was successful... Continue learning by enrolling in Google's web performance course (link at the end)
  • 4. Agenda / FocusAgenda / Focus 1. Measure Have a clear goal Measure early Measure often 2. Optimize Reduce amount of bytes Reduce critical resources Shorten the Critical Rendering Path (CRP)
  • 6. MeasureMeasure Have a clear goal Twitter - Time to first tweet NetSuite - Performance budget Google - RAIL 100ms 16ms 50ms 1s
  • 8. MeasureMeasure Measure often Know how performance evolves Automation tools Dynatrace / GTMetrix More in my talk from Testing Meetup
  • 10. OptimizeOptimize Theory The CRP is the sequence of steps followed by the browser in order to render a page 1. Parse the HTML and build the DOM 2. Parse the CSS and build the CSSOM 3. Build the Render Tree 4. Position elements on the screen (Layout) 5. Paint the screen
  • 11. OptimizeOptimize Theory The CRP has 3 main components which can be optimized 1. Total amount of bytes to be downloaded 2. Amount of critical resources (HTML, CSS y blocking JS) 3. Amount of roundtrips needed in order to gather critical resources
  • 13. OptimizeOptimize Reduce total amount of bytes Minify, compress and cache HTML CSS JavaScript Remove unused styles Compress images Example: compressor.io Compress and unify fonts unused-css.com
  • 14. OptimizeOptimize Reduce amount of critical resources Concatenate JS and CSS files Use media queries on <link> tags to unblock rendering Write CSS directly on HTML (inline) Leaving everything inline can be harmful Write JS directly on HTML (inline) Still blocks rendering when executed if not marked as async
  • 15. OptimizeOptimize Shorten the Critical Rendering Path (CRP) Delay JavaScript execution Add an async attribute to <script> tags so that they don't block rendering Code optimizations
  • 16. LinksLinks Test performance and not die trying Google/Udacity course on performance optimization My blog post which summarizes the above course Article on removing unused CSS Questions?Questions? dcardozo@netsuite.com slides.com/diegocard/optimize-performance