WEBDU Conference Slides

Lightning Fast Web Performance Via Front-End Optimisation (FEO) 1Saturday, 30 April 2011

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

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

Business Cost of Performance Every Second Counts Poor User Experience Reduced Conversions Reduced Revenue 4Saturday, 30 April 2011

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

Caching RTT Requests Payloads 6Saturday, 30 April 2011

Optimise Caching 7Saturday, 30 April 2011

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

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

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

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

Reduce Round Trip Times 12Saturday, 30 April 2011

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

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

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

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 ﬁles 16Saturday, 30 April 2011

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

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

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

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

Minimising Request Overheads 21Saturday, 30 April 2011

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

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

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

Minimise Payload Sizes 25Saturday, 30 April 2011

Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS • Most Browsers Support Compression Defer JS loading • Conﬁgure 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

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

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

Minimise Payload Sizes Enable GZIP compression Remove unused scripts Minify JS and CSS Defer JS loading • Allows UI Speciﬁc 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

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

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

Optimise Browser Rendering 32Saturday, 30 April 2011

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

Optimise Browser Rendering Avoid CSS expressions Place CSS in the document head • HTML 4.01 Speciﬁcation Specify image dimensions • Use <link> for External CSS Specify a character set • Don’t Use @import <head> <link> <style> </head> 34Saturday, 30 April 2011

Optimise Browser Rendering Avoid CSS expressions Place CSS in the document head Specify image dimensions • Eliminates Unnecessary Reﬂows 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

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

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

This All Sounds Like Too Much Hard Work Aptimize Blaze Strangeloop Gomez 38Saturday, 30 April 2011

Take-Aways Optimise Caching Minimise Round-Trips Minimise Request Overheads Minimise Payload Size Optimise Browser Rendering 39Saturday, 30 April 2011

Thanks! 40Saturday, 30 April 2011

WEBDU Conference Slides

by mattvoerman

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 70

Statistics