WEBDU Conference Slides

  • 1,344 views
Uploaded on

This is a copy of my slide deck from the 2011 Web Down Under (WEBDU) internet conference.

This is a copy of my slide deck from the 2011 Web Down Under (WEBDU) internet conference.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,344
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Lightning Fast Web Performance Via Front-End Optimisation (FEO) 1Saturday, 30 April 2011
  • 2. Who is this guy? Matt Voerman Over 15 years rich media & internet development experience. Akamai, Adobe, RocketBoots Internationally published author mattvoerman@yahoo.com Twitter @vortex 2Saturday, 30 April 2011
  • 3. What’s The Problem? Users Are Impatient Average page size - 320KB* Average page load time 4.90 seconds * Average page contains 44 objects from 7 domains* 80-90% of response time is on the front-end* *Google Web Metrics Report May 2010 3Saturday, 30 April 2011
  • 4. Business Cost of Performance Every Second Counts Poor User Experience Reduced Conversions Reduced Revenue 4Saturday, 30 April 2011
  • 5. How Do We Fix This? Follow the basics - Web Dev 101 Yahoo! YSlow http://developer.yahoo.com/yslow Google Page Speed http://code.google.com/speed/page-speed Third Parties Aptimize Strangeloop Blaze Gomez Omniture, Google Analytics 5Saturday, 30 April 2011
  • 6. Caching RTT Requests Payloads 6Saturday, 30 April 2011
  • 7. Optimise Caching 7Saturday, 30 April 2011
  • 8. Optimise Caching Leverage Browser Caching Leverage Proxy Caching • Loads From Local Rather Than Make AJAX Cachable Network Make Landing Page Redirects • Setthe Expiry or Cache Control in the Cachable HTTP Response Headers (Be Aggressive With Values) • Apply to All Cacheable Static Content Expires or Cache-Control max-age VS Last-Modified or ETag 8Saturday, 30 April 2011
  • 9. Optimise Caching Leverage Browser Caching Leverage Proxy Caching Make AJAX Cachable • Cache-control: public Make Landing Page Redirects • Faster Than Going Back To Origin Cachable • Most Proxies Don’t Like ‘?’s So Don’t Use Query Strings in he URL • Proxy Caching is Public - So No Cookies 9Saturday, 30 April 2011
  • 10. Optimise Caching Leverage Browser Caching Leverage Proxy Caching Make AJAX Cachable • JavaScript & XML can be Cached Make Landing Page Redirects • Minify JavaScript Cachable • GZIP Components • Use GET (1 x packet) over POST (2 x packets) 10Saturday, 30 April 2011
  • 11. Optimise Caching Leverage Browser Caching Leverage Proxy Caching Make AJAX Cachable • www.example.com > m.example.com Make Landing Page • SpeedsUp Page Load Times for Redirects Cachable Repeat Visitors • Use a 302 for Redirects • IncludeVary:User-Agent & Cache- Control:private headers to Prevent non-Mobile Users 11Saturday, 30 April 2011
  • 12. Reduce Round Trip Times 12Saturday, 30 April 2011
  • 13. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests • Reduce the Hostname Runaround - Combine External Scripts Increase TTLs Optimise Script/Style Orders • Optimal Number = 1-5 Use CSS Sprites • Use URL Paths Instead of Hostnames Avoid CSS @ import (e.g www.example.com/dev instead of dev.example.com ) Use Async Resources • Serve Files From the Same Domain 13Saturday, 30 April 2011
  • 14. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests Combine External Scripts • Don’t Reference Known Redirect Optimise Script/Style Orders URLs in Code Use CSS Sprites • Never Redirect More Than 1 x Hop Avoid CSS @ import • HTTP vs JavaScript & Meta Use Async Resources (aka Server vs Client) Redirects 14Saturday, 30 April 2011
  • 15. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests • No One Likes a 404 or 410 Combine External Scripts • Wasted Request Optimise Script/Style Orders • Unprofessional and a bad UX Use CSS Sprites • Avoid Redirects Avoid CSS @ import - If It’s Not There “Fix It!” Use Async Resources • Use a Crawl Error Tool (Google Webmaster Tools) 15Saturday, 30 April 2011
  • 16. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests Combine External Scripts Birds of a feather Optimise Script/Style Orders combine well together Use CSS Sprites • Reduces RTT Avoid CSS @ import • Reduces GET requests Use Async Resources • Partition CSS & JS into 2 x files 16Saturday, 30 April 2011
  • 17. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests • Speeds rendering time Combine External Scripts • Enables better download parrellelisation Optimise Script/Style Orders • Put inline scripts last Use CSS Sprites <head> <link rel=”stylesheet” type=”text/css” /> <link rel=”stylesheet” type=”text/css” /> Avoid CSS @ import <link rel=”stylesheet” type=”text/css” /> Use Async Resources <script type=”text/javascript” /> <script type=”text/javascript” /> </head> 17Saturday, 30 April 2011
  • 18. Reduce Round Trip Times (RTT) Minimise DNS Lookups Minimise Redirects Avoid Bad Requests HTML Combine External Scripts <ul id="navbar"> <li id="list1"> Optimise Script/Style Orders <a href="#"><span>About</span></a> </li> </ul> Use CSS Sprites Avoid CSS @ import CSS #list1 {width: 112px;} #list1 a:hover { Use Async Resources background: url(nav.png) 0px -38px no-repeat; } 18Saturday, 30 April 2011
  • 19. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests Combine External Scripts • Daisy-Chaining CSS Loading Optimise Script/Style Orders • Can Cause Additional Delays Use CSS Sprites • Adds RTT and Page Load Avoid CSS @ import @import url("second.css") Use Async Resources <link rel="stylesheet" href="first.css"> <link rel="stylesheet" href="second.css"> 19Saturday, 30 April 2011
  • 20. Reducing Round Trip Times Minimise DNS Lookups Minimise Redirects Avoid Bad Requests • Prevents the Blocking of Page Loads Combine External Scripts • Defers Parsing • Use a Script DOM Element Optimise Script/Style Orders Use CSS Sprites <script> var node = document.createElement(script); node.type = text/javascript; Avoid CSS @ import node.async = true; node.src = example.js; Use Async Resources // Now insert the node into the DOM, perhaps using insertBefore() </script> 20Saturday, 30 April 2011
  • 21. Minimising Request Overheads 21Saturday, 30 April 2011
  • 22. Minimising Request Overheads Use a CDN Minimise Request Size Serve Static Content From • IP, TCP, and HTTP Cookieless Domains • Performance • Scalability • Availability 22Saturday, 30 April 2011
  • 23. Minimising Request Overheads Use a CDN Minimise Request Size • Tryto Keep Packets < 1500 bytes Serve Static Content From (default network packet size). Cookieless Domains • Cookies Should be <400 bytes • UseServer-Side Storage for Cookie Payloads • Remove Unused or Duplicated Cookie Fields 23Saturday, 30 April 2011
  • 24. Minimising Request Overheads Use a CDN Minimise Request Size • Reduces the Total Request Size Serve Static Content From Cookieless Domains • Good For Static Hot Content (i.e. Images, JS and CSS) • Enable Proxy Caching • Don’t Serve Early Loaded JS From a Cookieless Domain 24Saturday, 30 April 2011
  • 25. Minimise Payload Sizes 25Saturday, 30 April 2011
  • 26. Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS • Most Browsers Support Compression Defer JS loading • Configure Content-Encoding On Web Optimise images Server Use Inline Images • Works Best For Text Based Files • Minify JavaScript and CSS • Don’t GZIP Images or Binary Files 26Saturday, 30 April 2011
  • 27. Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS Defer JS loading • Improves Parsing Performance Optimise images • Reduces HTTP Requests Use INline Images • Reduces JS and CSS Footprint • Common In Large Team 27Saturday, 30 April 2011
  • 28. Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify HTML, JS and CSS Defer JS loading • Saves Size Optimise images • Improves Up/Down-Loading Use Inline Images • Speeds Up Parsing and Execution • JSMin, CSSMin, YUI Compressor 28Saturday, 30 April 2011
  • 29. Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS Defer JS loading • Allows UI Specific Code To Be Loaded First Optimise images • Delays User Triggered Events To Take Use Inline Images Second Place • Usean onload Event Listener in the <head> 29Saturday, 30 April 2011
  • 30. Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS Defer JS loading • Use the correct image format (GIF, JPG, and PNG) Optimise images • Tweak image compression Use Inline Images • Crop unnecessary space • Use web colour palettes 30Saturday, 30 April 2011
  • 31. Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS • Uses the data:URL Scheme Defer JS loading • Reduces HTTP requests Optimise images • Not supported in < IE 8.0 • Max image size 100k Use Inline Images <IMG SRC="data:image/gif;base64,R0lGODd MAAwAPAAAAAAAPywAAAAAMAAwAAAC8IyPqcvt3w CcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvO NmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ5Y JHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjd fnycQZXZeYGejmJlZeGl9i2icVqaNVai" ALT="Bad Kittay"> 31Saturday, 30 April 2011
  • 32. Optimise Browser Rendering 32Saturday, 30 April 2011
  • 33. Optimise Browser Rendering Avoid CSS expressions Place CSS in the document head • Degrades Rendering Performance Specify image dimensions • Use Standard CSS Properties Specify a character set • Use JS to Improve Script Styles p { width: expression ( document.body.clientWidth > 600 ? "600px" : "auto" ); } 33Saturday, 30 April 2011
  • 34. Optimise Browser Rendering Avoid CSS expressions Place CSS in the document head • HTML 4.01 Specification Specify image dimensions • Use <link> for External CSS Specify a character set • Don’t Use @import <head> <link> <style> </head> 34Saturday, 30 April 2011
  • 35. Optimise Browser Rendering Avoid CSS expressions Place CSS in the document head Specify image dimensions • Eliminates Unnecessary Reflows and Repaints Specify a character set • Make Sure Dimensions Match Image • Specify Dimensions on the Image Element or Block-Level Parent 35Saturday, 30 April 2011
  • 36. Optimise Browser Rendering Avoid CSS expressions Place CSS in the document head Specify image dimensions • Always Specify A Content Type Specify a character encoding • Specify The Correct Char Encoding • Don’tuse a meta-equiv tag as it disables the IE 8 Lookahead Downloader 36Saturday, 30 April 2011
  • 37. Does This Stuff Actually Work? 20-29 Million Unique Visitors • Increased Availability per Month 99.65% > 99.97% 100 Million Impressions • AveragePage Load Time per Day 6 seconds > 1.2 seconds 100,000 Products • Increased Page Views by 25% • Increased Revenue by 12% 37Saturday, 30 April 2011
  • 38. This All Sounds Like Too Much Hard Work Aptimize Blaze Strangeloop Gomez 38Saturday, 30 April 2011
  • 39. Take-Aways Optimise Caching Minimise Round-Trips Minimise Request Overheads Minimise Payload Size Optimise Browser Rendering 39Saturday, 30 April 2011
  • 40. Thanks! 40Saturday, 30 April 2011