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

Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
Karya Keeper
 
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLESINTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
anfaltahir1010
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
Kubernetes at Scale: Going Multi-Cluster with Istio
Kubernetes at Scale:  Going Multi-Cluster  with IstioKubernetes at Scale:  Going Multi-Cluster  with Istio
Kubernetes at Scale: Going Multi-Cluster with Istio
Severalnines
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdfTop Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
VALiNTRY360
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Peter Caitens
 
Malibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed RoundMalibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed Round
sjcobrien
 
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
kalichargn70th171
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
rodomar2
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
Remote DBA Services
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
Quickdice ERP
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
Hornet Dynamics
 

Recently uploaded (20)

Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
 
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLESINTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
INTRODUCTION TO AI CLASSICAL THEORY TARGETED EXAMPLES
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
Kubernetes at Scale: Going Multi-Cluster with Istio
Kubernetes at Scale:  Going Multi-Cluster  with IstioKubernetes at Scale:  Going Multi-Cluster  with Istio
Kubernetes at Scale: Going Multi-Cluster with Istio
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdfTop Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
Top Benefits of Using Salesforce Healthcare CRM for Patient Management.pdf
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
 
Malibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed RoundMalibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed Round
 
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
The Key to Digital Success_ A Comprehensive Guide to Continuous Testing Integ...
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
E-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet DynamicsE-commerce Development Services- Hornet Dynamics
E-commerce Development Services- Hornet Dynamics
 

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