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!