optimizing front-end web performance like a rockstar
TRANSCRIPT
Back-end vs. front-end
• Application Layer• Data Layer• Dynamically generates
base HTML
• Everything sent to the browser
• Basic stuff– HTML, JS, CSS, images
• Other stuff– Fonts, templates, RSS,
JSON/REST, etc
Waterfall Diagram
Waterfall Diagram
Back-end Front-end
Today’s Focus
• Reducing the size of web content• Reducing the number of requests• Automating this
Problem #1: BLOAT!
HTTP Archive – Oct 2014
Images
Lossless Optimization
• Removes anything not needed to draw the image
• Better compression• Optimized image is pixel
perfect copy• Saves 5-20%• Occasionally 70-80%
CNN as of 7:15am
Whoops
Junk in the Trunk
Stop with the GIFs!
• DEFLATE is superior to LZW
• All browsers support PNG*
• Only keep Animated GIFs
Optimizations: Easy and Scriptable
gif2png -n -O image.gif
pngcrush -brute image.png image-crushed.png
jpegtran -copy none -optimize -perfect -outfile new.jpg orig.jpg
gifsicle -O2 orig.gif -o new.gif
Use the right file format!
This is not a JPEG/PNG/WebP/GIF
file is your friend
What about the rest?
HTTP Compression:Barometer of Maturity
You should serve allnon-natively compressed
formats using HTTP compression
Compress Text Components
• Obviously…– HTML, CSS, JS
• Wait, what?– HTC, RSS, XML/JSON
• Oh crap!– robots.txt, crossdomain.xml, manifests
Compress Non-Text Components
• Non-compressed images– ICO– SVG– BMP/TIFF
• Fonts (OTF, TTF, EOT, WOFFv1)• PDFs, etc
High Level Stats
• Top 1000 Hosts• 90,517 responses• 14,316 responses
(15.81%) were compressible
Type # of ResponsesProperly Compressed 8825Properly Uncompressed 2144Missing Compression 3347
23.37% Missing Compression
64% of Sites “Doing it Wrong”
File Type Total Responses Missing Compression
% Missing Compression
JavaScript 5469 1161 21.23%HTML 4090 857 20.95%
CSS 2849 495 17.37%ICO 541 377 69.69%RSS 427 156 36.53%EOT 180 87 48.33%SVG 130 100 76.92%
Atom 60 28 46.67%TTF 42 25 59.52%
BMP 17 12 70.59%OTF 10 10 100.00%
3rd Party Libraries…
File Type Total Responses Missing Compression
% Missing Compression
JavaScript 5469 1161 21.23%HTML 4090 857 20.95%
CSS 2849 495 17.37%ICO 541 377 69.69%RSS 427 156 36.53%EOT 180 87 48.33%SVG 130 100 76.92%
Atom 60 28 46.67%TTF 42 25 59.52%
BMP 17 12 70.59%OTF 10 10 100.00%
Other Stats
• 64% serving 1+ incorrectly– 2 items (median)
• Median Savings– 4.4Kb (62.3%)
• 34% of 404’s not using compression
HTTP Compression Gotchas
• Remembering to get everything• File Extension vs. MIME type• 404 handlers• Browser workarounds• Common advice is terrible!
Problem #2: Too Many Requests
• Green = sending request and waiting for 1st byte of response
• Browsers spend most of their time waiting for content, not downloading content
• Inefficient!
Combine JS and CSS files
• Sending one 100 Kb file is faster than sending ten 10 Kb files– More data = more redundancy = better compression– Less overhead
Remove Unnecessary Requests
CSS Sprites
.game { background-image:url('sprite.png')} background-position:4px -112px;}.stock { background-image:url('sprite.png')} background-position:4px -142px;}
Cached: Fastest. Request. Ever.
• Browser cache is a “Mother may I?” cache
• Unless you are given explicit permission ahead of time… you have to ask– About everything…– Every time you use it…
• Last-Modified vs. Expires• Enormous savings!
Lots of Content Reuse
Becareful with Caching
Configuring Caching
• Far in the future!• Rewrite filename– <script src=“http://”>– <% =scriptTag(jsUrl);l %>– js-4CAA118BFA2BA3CC2B4C0C87A94C3C1.js
• Another option, dates with rewrite rule– <% =scriptTag(“/code.js”);l %>– /code.20141015.js
Avoiding these Problems
Accept: Plan Vs. Reality
Accept: Uniform Coverage
Performance Defect == Bug
• “Unintended program behavior”
• Test early• Test often• Triage• Handle like any other
bug
Automation
• Built into frameworks– Rails – Asset Pipeline (Minify, combine, etc)– ASP.NET 4.0
• Build Scripts:– Grunt, rake, maven, ant, make, msbuild, whatever
• Manual Scripts:– Site Crunch (cirt.net)
• Outsource it: Kraken.io, others
Local Meetup
Free Tools: Zoompf Alerts Beta
• Continuously scanning and alerting
• Free, in Beta– zoompf.com/alerts
• Also… Standard Free Report– zoompf.com/free
