Optimize performance and not die trying
-
Upload
diego-cardozo -
Category
Software
-
view
989 -
download
0
Transcript of Optimize performance and not die trying
![Page 1: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/1.jpg)
Optimize PerformanceOptimize Performance(and not die trying)(and not die trying)
Diego Cardozo
Sr. Web Performance Engineer @ NetSuite
![Page 2: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/2.jpg)
MotivationMotivation3 pillars in user experience
DesignUsabilityPerformance
80% - 90% load time comes from the front endAdditionally...
Better user conversionAffects Google search result rankings
![Page 3: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/3.jpg)
ChallengeChallengeInitial goal for this talk: teach everything required tobuild 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 webperformance course (link at the end)
![Page 4: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/4.jpg)
Agenda / FocusAgenda / Focus
1. MeasureHave a clear goalMeasure earlyMeasure often
2. OptimizeReduce amount of bytesReduce critical resourcesShorten the Critical Rendering Path (CRP)
![Page 5: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/5.jpg)
1. Measure1. Measure
![Page 6: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/6.jpg)
MeasureMeasureHave a clear goal
Twitter - Time to first tweetNetSuite - Performance budgetGoogle - RAIL
100ms 16ms 50ms 1s
![Page 7: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/7.jpg)
MeasureMeasureMeasure early
WebPageTestPage Speed Insightssitespeed.io
![Page 8: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/8.jpg)
MeasureMeasureMeasure often
Know how performance evolvesAutomation tools
Dynatrace / GTMetrixMore in my talk from Testing Meetup
![Page 9: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/9.jpg)
2. Optimize2. Optimize
![Page 10: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/10.jpg)
OptimizeOptimizeTheory
The CRP is the sequence of steps followed by thebrowser in order to render a page
1. Parse the HTML and build the DOM2. Parse the CSS and build the CSSOM3. Build the Render Tree4. Position elements on the screen (Layout)5. Paint the screen
![Page 11: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/11.jpg)
OptimizeOptimizeTheory
The CRP has 3 main components which can be optimized
1. Total amount of bytes to be downloaded2. Amount of critical resources (HTML, CSS y blocking JS)3. Amount of roundtrips needed in order to gather
critical resources
![Page 12: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/12.jpg)
OptimizeOptimizeExample
Total KB: 11Critical resources: 3CRP length: 2
![Page 13: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/13.jpg)
OptimizeOptimizeReduce total amount of bytes
Minify, compress and cacheHTMLCSSJavaScript
Remove unused styles
Compress imagesExample: compressor.io
Compress and unify fonts
unused-css.com
![Page 14: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/14.jpg)
OptimizeOptimizeReduce amount of critical resources
Concatenate JS and CSS filesUse media queries on <link> tags to unblockrenderingWrite CSS directly on HTML (inline)
Leaving everything inline can be harmfulWrite JS directly on HTML (inline)
Still blocks rendering when executed if not markedas async
![Page 15: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/15.jpg)
OptimizeOptimizeShorten the Critical Rendering Path (CRP)
Delay JavaScript executionAdd an async attribute to <script> tags so that theydon't block renderingCode optimizations
![Page 16: Optimize performance and not die trying](https://reader030.fdocuments.in/reader030/viewer/2022021506/58aceff81a28abca0c8b461f/html5/thumbnails/16.jpg)
LinksLinks
Test performance and not die tryingGoogle/Udacity course on performance optimizationMy blog post which summarizes the above courseArticle on removing unused CSS
slides.com/diegocard/optimize-performance