Your SlideShare is downloading. ×
Lightning Fast Web Performance                Via Front-End Optimisation (FEO)                                            ...
Who is this guy?                      Matt Voerman                      Over 15 years rich media &                      in...
What’s The                          Problem?                           Users Are Impatient                           Avera...
Business Cost of Performance                          Every Second Counts                          Poor User Experience   ...
How Do We Fix This?                    Follow the basics - Web Dev 101                    Yahoo! YSlow                    ...
Caching   RTT   Requests   Payloads                                                        6Saturday, 30 April 2011
Optimise Caching                                             7Saturday, 30 April 2011
Optimise Caching                Leverage Browser Caching                Leverage Proxy Caching                            ...
Optimise Caching                Leverage Browser Caching                Leverage Proxy Caching                Make AJAX Ca...
Optimise Caching                Leverage Browser Caching                Leverage Proxy Caching                Make AJAX Ca...
Optimise Caching                Leverage Browser Caching                Leverage Proxy Caching                Make AJAX Ca...
Reduce Round Trip Times                                                    12Saturday, 30 April 2011
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Reduce Round Trip                Times (RTT)                Minimise DNS Lookups                Minimise Redirects        ...
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Reducing Round Trip                Times                Minimise DNS Lookups                Minimise Redirects            ...
Minimising Request Overheads                                                         21Saturday, 30 April 2011
Minimising Request                Overheads                Use a CDN                Minimise Request Size                S...
Minimising Request                Overheads                Use a CDN                Minimise Request Size                 ...
Minimising Request                Overheads                Use a CDN                Minimise Request Size                 ...
Minimise Payload Sizes                                                   25Saturday, 30 April 2011
Minimise Payload                Sizes                Enable GZIP compression                Remove unused scripts         ...
Minimise Payload                Sizes                Enable GZIP compression                Remove unused scripts         ...
Minimise Payload                Sizes                Enable GZIP compression                Remove unused scripts         ...
Minimise Payload                Sizes                Enable GZIP compression                Remove unused scripts         ...
Minimise Payload                Sizes                Enable GZIP compression                Remove unused scripts         ...
Minimise Payload                Sizes                Enable GZIP compression                Remove unused scripts         ...
Optimise Browser Rendering                                                       32Saturday, 30 April 2011
Optimise Browser                Rendering                Avoid CSS expressions                Place CSS in the document   ...
Optimise Browser                Rendering                Avoid CSS expressions                Place CSS in the document   ...
Optimise Browser                Rendering                Avoid CSS expressions                Place CSS in the document   ...
Optimise Browser                Rendering                Avoid CSS expressions                Place CSS in the document   ...
Does This Stuff                Actually Work?                    20-29 Million Unique Visitors                            ...
This All Sounds Like Too Much              Hard Work                          Aptimize                          Blaze     ...
Take-Aways                           Optimise Caching                           Minimise Round-Trips                      ...
Thanks!                                    40Saturday, 30 April 2011
Upcoming SlideShare
Loading in...5
×

WEBDU Conference Slides

1,393

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,393
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "WEBDU Conference Slides"

  1. 1. Lightning Fast Web Performance Via Front-End Optimisation (FEO) 1Saturday, 30 April 2011
  2. 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. 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. 4. Business Cost of Performance Every Second Counts Poor User Experience Reduced Conversions Reduced Revenue 4Saturday, 30 April 2011
  5. 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. 6. Caching RTT Requests Payloads 6Saturday, 30 April 2011
  7. 7. Optimise Caching 7Saturday, 30 April 2011
  8. 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. 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. 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. 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. 12. Reduce Round Trip Times 12Saturday, 30 April 2011
  13. 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. 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. 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. 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. 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. 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. 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. 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. 21. Minimising Request Overheads 21Saturday, 30 April 2011
  22. 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. 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. 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. 25. Minimise Payload Sizes 25Saturday, 30 April 2011
  26. 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. 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. 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. 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. 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. 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. 32. Optimise Browser Rendering 32Saturday, 30 April 2011
  33. 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. 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. 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. 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. 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. 38. This All Sounds Like Too Much Hard Work Aptimize Blaze Strangeloop Gomez 38Saturday, 30 April 2011
  39. 39. Take-Aways Optimise Caching Minimise Round-Trips Minimise Request Overheads Minimise Payload Size Optimise Browser Rendering 39Saturday, 30 April 2011
  40. 40. Thanks! 40Saturday, 30 April 2011

×