Performance web optimizations
Optimizations
First page loadRepeated page load
Importance1. Sequences/Blockers2. HTML3. CSS4. Images5. JavaScript6. Headers7. Fonts8. Tracking resources
Before startMeasure!
Making sure you’re optimizingCan brag laterFind bottlenecks
HTMLPHP response timeDB callsNetwork callsHHVMPHPNG (PHP-7)Nginx cache (without Set-Cookie ;) )No redirects
Aug 2014
HTMLDelete unnecessaryNo HTML comments (except conditional)Minify (careful with new lines)Optimize size (1 roundtrip = 14KB)
CSSMinifyOptimize selectors (avoid duplicate resource load)
Remove not neededInline if(“we optimize for first load” && “it’s not too big”)
Minimize requests count if(“one request is not too big”)
JavaScriptMinifyUse single, async file if possibleDon’t count on it for rendering the pageMake sure you’re optimizing with late-loading
Gzip
Gzip level ~6Gzip static
Build foo.js to foo.js.gz and bar.css to bar.css.gz in build time
HeadersHTML:Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
CSS, JS, Images, fontsCache-Control:max-age=604800Date:Mon, 12 Jan 2015 16:23:25 GMTETag:"54aa848a-1609d"Expires:Mon, 19 Jan 2015 16:23:25 GMTLast-Modified:Mon, 05 Jan 2015 12:33:14 GMT
ImagesOptimize file sizeUse progressive renderingUse sprites when possibleUse Base64 (don’t shoot yourself)
Use responsive designSpecify image dimensions if possibleCheck for duplicates
Fonts
No custom fonts if possible (fight to the last drop of blood)
Light fonts if possible (zh)
SequencesDNS lookupHTML sizeBlocking CSSBlocking JSConcurrent downloading (~100KB max)
CDN
Check for blocking DNS lookupsIf CSS is inline change the relative paths to absolute
After finishMeasureFind bottlenecksFind imperfectionsNo imperfections ? “brag” : “optimize again”
Examples
Tools
http://www.monitis.com/pageload/http://gtmetrix.com/http://www.webpagetest.org/https://developers.google.com/speed/pagespeed/insights/Chrome audit
Thank you!