optimize performance and not die trying
TRANSCRIPT
Optimize PerformanceOptimize Performance(and not die trying)(and not die trying)
Diego Cardozo
Sr. Web Performance Engineer @ NetSuite
MotivationMotivation3 pillars in user experience
DesignUsabilityPerformance
80% - 90% load time comes from the front endAdditionally...
Better user conversionAffects Google search result rankings
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)
Agenda / FocusAgenda / Focus
1. MeasureHave a clear goalMeasure earlyMeasure often
2. OptimizeReduce amount of bytesReduce critical resourcesShorten the Critical Rendering Path (CRP)
1. Measure1. Measure
MeasureMeasureHave a clear goal
Twitter - Time to first tweetNetSuite - Performance budgetGoogle - RAIL
100ms 16ms 50ms 1s
MeasureMeasureMeasure early
WebPageTestPage Speed Insightssitespeed.io
MeasureMeasureMeasure often
Know how performance evolvesAutomation tools
Dynatrace / GTMetrixMore in my talk from Testing Meetup
2. Optimize2. Optimize
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
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
OptimizeOptimizeExample
Total KB: 11Critical resources: 3CRP length: 2
OptimizeOptimizeReduce total amount of bytes
Minify, compress and cacheHTMLCSSJavaScript
Remove unused styles
Compress imagesExample: compressor.io
Compress and unify fonts
unused-css.com
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
OptimizeOptimizeShorten the Critical Rendering Path (CRP)
Delay JavaScript executionAdd an async attribute to <script> tags so that theydon't block renderingCode optimizations
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