Downloaded 21 times
Uploaded byZoompf
Optimizing Front-end Web Performance Like a Rockstar
This document discusses optimizing front-end web performance. It identifies two main problems: file bloat and too many requests. To address bloat, it recommends optimizing images, using appropriate file formats like PNG instead of GIF, and enabling HTTP compression. To reduce requests, it suggests combining JavaScript and CSS files, using CSS sprites, and leveraging browser caching. The document emphasizes that performance issues should be treated as bugs and automated testing helps address them.
More Related Content
Similar to Optimizing Front-end Web Performance Like a Rockstar
Optimizing Front-end Web Performance Like a Rockstar
- 1. Optimizing front-end web performance like a rockstar Billy Hoffman billy@zoompf.com @zoompf
- 2. 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
- 3.
- 4. Waterfall Diagram Back-endFront-end
- 5. Today’s Focus •Reducing the size of web content • Reducing the number of requests • Automating this
- 6.
- 7. HTTP Archive –Oct 2014
- 8.
- 9. Lossless Optimization •Removes anything not needed to draw the image • Better compression • Optimized image is pixel perfect copy • Saves 5-20% • Occasionally 70-80%
- 10. CNN as of7:15am
- 11.
- 12. Junk in theTrunk
- 13. Stop with theGIFs! • DEFLATE is superior to LZW • All browsers support PNG* • Only keep Animated GIFs
- 14. Optimizations: Easy andScriptable 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
- 15. Use the rightfile format! This is not a JPEG/PNG/WebP/GIF
- 16. file is yourfriend
- 17. What about therest?
- 18. HTTP Compression: Barometerof Maturity
- 19. You should serveall non-natively compressed formats using HTTP compression
- 20. Compress Text Components • Obviously… – HTML, CSS, JS • Wait, what? – HTC, RSS, XML/JSON • Oh crap! – robots.txt, crossdomain.xml, manifests
- 21. Compress Non-Text Components • Non-compressed images – ICO – SVG – BMP/TIFF • Fonts (OTF, TTF, EOT, WOFFv1) • PDFs, etc
- 22. High Level Stats • Top 1000 Hosts • 90,517 responses • 14,316 responses (15.81%) were compressible
- 23. 23.37% Missing Compression Type # of Responses Properly Compressed 8825 Properly Uncompressed 2144 Missing Compression 3347
- 24. 64% of Sites“Doing it Wrong”
- 25. File Type TotalResponses 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%
- 26.
- 27. File Type TotalResponses 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%
- 28. Other Stats •64% serving 1+ incorrectly – 2 items (median) • Median Savings – 4.4Kb (62.3%) • 34% of 404’s not using compression
- 29. HTTP Compression Gotchas • Remembering to get everything • File Extension vs. MIME type • 404 handlers • Browser workarounds • Common advice is terrible!
- 30. Problem #2: TooMany Requests • Green = sending request and waiting for 1st byte of response • Browsers spend most of their time waiting for content, not downloading content • Inefficient!
- 31. Combine JS andCSS files • Sending one 100 Kb file is faster than sending ten 10 Kb files – More data = more redundancy = better compression – Less overhead
- 32.
- 33. CSS Sprites .game{ background-image:url('sprite.png')} background-position:4px -112px; } .stock { background-image:url('sprite.png')} background-position:4px -142px; }
- 34. 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!
- 35. Lots of ContentReuse
- 36.
- 37. 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
- 38.
- 39. Accept: Plan Vs.Reality
- 40.
- 41. Performance Defect ==Bug • “Unintended program behavior” • Test early • Test often • Triage • Handle like any other bug
- 42. Automation • Builtinto 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
- 43.
- 44. Free Tools: ZoompfAlerts Beta • Continuously scanning and alerting • Free, in Beta – zoompf.com/alerts • Also… Standard Free Report – zoompf.com/free
- 45. Optimizing front-end web performance like a rockstar Billy Hoffman billy@zoompf.com @zoompf
Editor's Notes
- #7 1 by in 5 is waste It can be eliminted by lossless optimizations
- #19 Optimizations are easy and well known Image goes in, optimized comes out This should be automated! And yet 84% of websits contained unoptimized images with huge consequences.
- #25 Awareness has been increased. More people know what I’m talking about.
- #31 Yes, Caching is the obvious thing here. 30% of resources that should be cached aren’t!
- #36 Yes, Caching is the obvious thing here. 30% of resources that should be cached aren’t!
- #40 Performance Optimizations should be easy We all know steve’s rules Free tools to implement the optimizations But implementation is sticking point So how well do we do?
- #41 …because when we optimize. We aren’t consistent. Everyone has doing some optimization, but not consistently Gzipping HTML but not CSS. Caching mains on the main site, but not the subdomain, This tells me internal processes are not yet mature or they aren’t getting the visibilty