PHP Quebec 2008 Page 1 High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance PHP Quebec, March 13, 2008

PHP Quebec 2008 Page 2 The sluggish Web We’re getting used to the web as a tool for our day-to-day tasks We all want a nice user experience We won’t tolerate slow pages (we have options) 500 ms slower = 20% drop in traffic (Google) 100 ms slower = 1% drop in sales (Amazon)

PHP Quebec 2008 Page 3 This talk How to improve page performance Focus on the front-end 14 best practices for faster pages … and 20 more!

PHP Quebec 2008 Page 4 Exceptional Performance at Yahoo! Quantify and improve the performance of all Yahoo! products worldwide Center of expertise Build tools, analyze data Gather, research, and evangelize best practices - internally and externally

PHP Quebec 2008 Page 5

Back- end= 5% Front- end= 95% Even here, front-end= 88% The Importance of Front-End Performance

PHP Quebec 2008 Page 7 Focus on the front-end 80-90% of the time Easier than the back-end Proven to work

PHP Quebec 2008 Page 8 List of 14 best practices (updated) 1.Make Fewer HTTP Requests 2.Use a Content Delivery Network 3.Add Expires header (or Cache-control) 4.Gzip Components 5.Put CSS at the Top 6.Move Scripts to the Bottom (inline too) 7.Avoid CSS Expressions 8.Make JavaScript and CSS External 9.Reduce DNS Lookups 10.Minify JavaScript and CSS (inline too) 11.Avoid Redirects 12.Remove Duplicate Scripts 13.Configure ETags 14.Make AJAX Cacheable content server javascript content css content

PHP Quebec 2008 Page 9 YSlow Yahoo!’s performance lint tool Extension to the Firebug extension to Firefox Checks for compliance with the best practices Grades (offends)

PHP Quebec 2008 Page 10

PHP Quebec 2008 Page 11 The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult

PHP Quebec 2008 Page 12 After YSlow "A"? 1.Flush the buffer early 2.Use GET for AJAX requests 3.Post-load components 4.Preload components 5.Reduce the number of DOM elements 6.Split components across domains 7.Minimize the number of iframes 8.No 404s 9.Reduce cookie size 10.Use cookie-free domains for components 11.Minimize DOM access 12.Develop smart event handlers 13.Choose 14.Avoid filters 15.Optimize images 16.Optimize CSS sprites 17.Don't scale images in HTML 18.Make favicon.ico small and cacheable 19.Keep components under 25K 20.Pack components into a multipart document content javascript content server css images mobile cookie content

PHP Quebec 2008 Page 13 Part I Review of 14 best practices (updated)

PHP Quebec 2008 Page 14 Make Fewer HTTP Requests Less components = fast page HTTP Request overhead Combine scripts, combine stylesheets, combine images into CSS sprites

PHP Quebec 2008 Page 15 CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools:

PHP Quebec 2008 Page 16 Use a Content Delivery Network For static components Content closer to your users Akamai, Amazon S3

PHP Quebec 2008 Page 17 Add Expires header (or Cache-control) For static components –“Never expire” policy, far future Expires header –Once a component is served, the browser never asks for it again –When you need to change a component, rename it –Apache example: ExpiresActive On ExpiresDefault "modification plus 10 years" For dynamic components –Use Cache-control –Help the browser send If-Modified-Since –Writeup on YUI blog/YDN coming up, stay tuned

PHP Quebec 2008 Page 18 Gzip Components You send zipped content over the wire, the browser unpacks it Modern browsers understand compressed content Search engine spiders do too Request header Accept-Encoding: gzip,deflate Response header Content-Encoding: gzip All text components should be sent gzipped: html (php), js, css, xml, txt…

PHP Quebec 2008 Page 19 Put CSS at the Top Firefox and IE will not render anything before the last piece of CSS arrives over the wire Even CSS that is not needed such print Place the stylesheets as early as possible in the document My page

PHP Quebec 2008 Page 20 Move Scripts to the Bottom (inline too) Scripts block downloads The browser’s logic: since this script can do location.href or document.write at any time, why download possibly useless components Move scripts to the bottom to remove the download block Inline scripts too

PHP Quebec 2008 Page 21 Avoid CSS Expressions CSS expression: #content { position: absolute; left: expression(document.body.offsetWidth+‘px’); } IE-only way to have JavaScript in CSS They tend to get executed more often than you planned, think onmousemove often Smart expressions overwrite themselves

PHP Quebec 2008 Page 22 Make JavaScript and CSS External Helps with caching, “never expire” policy Share with other pages But this is two more HTTP requests Homepages might consider inlining yahoo.com

PHP Quebec 2008 Page 23 Reduce DNS Lookups Browser needs to map domain name to an IP address DNS lookups take time 2-4 domains per page

PHP Quebec 2008 Page 24 Minify JavaScript and CSS (inline too) Minify, but still gzip JSMin (written in JavaScript, but has a PHP port) YUI compressor – minifies CSS too Inline styles and scripts should also be minified

PHP Quebec 2008 Page 25 Minify: before /** * The dom module provides helper methods for * manipulating Dom elements. dom * */ (function() { var Y = YAHOO.util, // internal shorthand getStyle, // for load time browser branching setStyle, // ditto propertyCache = {}, // for faster hyphen converts reClassNameCache = {}, // cache regexes for className document = window.document; // cache for faster lookups YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

PHP Quebec 2008 Page 26 Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._i d_counter=YAHOO.env._id_counter||0;

PHP Quebec 2008 Page 27 Avoid Redirects A wasted HTTP request Causes a restart

PHP Quebec 2008 Page 28 Remove Duplicate Scripts Duh! IE might decide to download them again

PHP Quebec 2008 Page 29 Configure ETags ETags are meant to help with caching A component served from server A has a different ETag than the same component served from B Configure ETags not to include inode … or just remove them and implement “never expire” policy Apache default FileETag INode MTime Size Change to FileETag None

PHP Quebec 2008 Page 30 Make AJAX Cacheable Content returned from XMLHttpRequest s is like any other component Should be gzipped Could be cached Cache-control: max-age=?

PHP Quebec 2008 Page 31 Part II After YSlow “A”: 20 more best practices

PHP Quebec 2008 Page 32 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 33 Flush the buffer early Let the browser start fetching components while your backend is busy PHP has the function flush() Best for busy backends / light frontends Case Study: Yahoo! Search

PHP Quebec 2008 Page 34 Use GET for AJAX requests GET is for retrieving data POST is a two-step process (send headers, send data) GET request is one TCP packet (unless you have a lot of cookies) Max URL length 2K (because of IE) POST without actually posting data is like GET Yahoo! Mail Research

PHP Quebec 2008 Page 35 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 36 Post-load components Ask yourself: what's absolutely required in order to render the page initially? The rest can wait (drag and drop, animations, hidden content, images below the fold) JavaScript is ideal candidate for splitting YUI Image Loader YUI Get Utility

PHP Quebec 2008 Page 37 Post-load components Case study: yahoo.com onload.js and onload.css Progressive enhancement

PHP Quebec 2008 Page 38 Preload components Preload Items you'll need in the future Unconditional preload (google.com loads a sprite onload) Conditional preload (search.yahoo.com after you type in the input box) Anticipated preload – preload in advance before launching a redesign

PHP Quebec 2008 Page 39 Preload components (contd.) Unconditional preload example

PHP Quebec 2008 Page 40 Preload components (contd.) Conditional preload example – search.yahoo.com When you start typing the page can safely assume you’ll hit the search results page Time to preload

PHP Quebec 2008 Page 41 Reduce the number of DOM elements World's fastest page? about:blank ! A complex page means more bytes to download It also means slower DOM access in JavaScript It also may mean using semantically incorrect markup (like nested tables or abusing s) Use semantic markup Use YUI's reset.css, fonts.css, grids.css Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length yahoo.com is a busy page and still under 700 elements (HTML tags)

PHP Quebec 2008 Page 42 Split components across domains Maximize parallel downloads But not more than 2-4 domains, because of the DNS lookup penalty – HTML content static.example.org – Static components Future: IE8 will allow 6 requests per domain

PHP Quebec 2008 Page 43 Split components (contd.) 2 components in parallel8 components in parallel

PHP Quebec 2008 Page 44 Minimize the number of iframes pros: –Can help with slow third-party content like badges and ads –Security sandbox –You can download scripts in parallel cons: –They have a cost even if blank –They block page onload –Non-semantic

PHP Quebec 2008 Page 45 No 404s 404 Not Found Useless downloads Some sites have helpful 404s “Did you mean X?”… … which uses server resources (DB, etc) When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it

PHP Quebec 2008 Page 46 No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page

PHP Quebec 2008 Page 47 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 48 Reduce cookie size Eliminate unnecessary cookies Keep cookie sizes as low as possible to minimize the impact on the user response time Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

PHP Quebec 2008 Page 49 Cookie-free hosting for components Option 1: Separate subdomain (static.example.org) Option 2: A new TLD (e.g. yimg.com, ytimg.com, images-amazon.com) Proxies might refuse to cache vs www-no.org? no-www leaves you no choice but to write cookies to *.example.org

PHP Quebec 2008 Page 50 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 51 Minimize DOM access DOM access is the slowest Cache Update nodes “offline” and then add them to the tree Avoid fixing layout with JavaScript

PHP Quebec 2008 Page 52 Develop smart event handlers Don't wait for onload, use DOMContentLoaded Events bubble up, so use delegation (attach listeners to outer elements) Clean up to prevent IE memory leaks Careful with onresize Use YUI Event utility

PHP Quebec 2008 Page 53 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 54 Choose CSS should be at the top In is the same as putting at the bottom

PHP Quebec 2008 Page 55 Avoid filters IE proprietary AlphaImageLoader Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine Blocks rendering, freezes the browser Increased memory consumption Per element, not per image! Best: Avoid completely, use gracefully degrading PNG8 Fallback: use underscore hack _filter not to penalize IE7+ users

PHP Quebec 2008 Page 56 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 57 Optimize images GIF - don't use a bigger palette than you need Use PNGs instead of GIFs “All we are saying is: Give PiNG a Chance!" pngcrush tool (or optipng, or pngoptimizer) Removing gamma chunks also helps with cross- browser colors Strip comments jpegtran - lossless JPEG operations, can be used to optimize and remove comments

PHP Quebec 2008 Page 58 Optimize images (contd.) You can write a simple tool that walks your image directories before site launch and does the following: 1.Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png 2.Crush all PNGs > pngcrush image.png –rem alla –reduce result.png 3.Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

PHP Quebec 2008 Page 59 Optimize images (contd.) You’d be surprised how many sites, from small to huge, could optimize the download size 200K of useless image information sent over the wire for a single page?!

PHP Quebec 2008 Page 60 Optimize CSS sprites Choose horizontal over vertical when possible Combine similar colors Keep color count low (<256) to fit in a PNG8 “Be mobile-friendly” – don’t leave big gaps –Filesize doesn’t increase much, but the image needs to be decompressed into a pixel map –100x100 is pixels –1000x1000 is 1 Million pixels –Case study: Yahoo! Mail Classic

PHP Quebec 2008 Page 61 Optimize sprites

PHP Quebec 2008 Page 62 Don't scale images in HTML Downloads unnecessary bytes If you need then have mycat.jpg 100x100 not 500x500

PHP Quebec 2008 Page 63 Make favicon.ico small and cacheable Necessary evil: –The browser will request it –Better not respond with a 404 –Cookies are sent –Cannot be on CDN –Interferes with the download sequence Make it small (<= 1K) Animated favicons are not cool Set Expires header Tools: imagemagick, png2ico Case study: Yahoo! Search - favicon.ico is 9% of all page views!

PHP Quebec 2008 Page 64 Bonus: crossdomain.xml Cross domain policy for Flash/Flex Sits in the root: example.org/crossdomain.xml Set Expires header gzip … and secure while at it, don’t do:

PHP Quebec 2008 Page 65 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 66 Keep components under 25K Because iPhone won’t cache them Uncompressed size under 25Kb Minify HTML in addition to JS and CSS

PHP Quebec 2008 Page 67 Pack components into a multipart document For UAs that support it (iPhone doesn’t) Like an with attachments

PHP Quebec 2008 Page 68 Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

PHP Quebec 2008 Page 69 Tools YSlow ( Fiddler ( IBM Page Detailer ( HTTPWatch ( AOL Pagetest ( Firebug Net Panel (

PHP Quebec 2008 Page 70 IBM Page Detailer Methodology –Packet Sniffer Competitive Advantage –Most accurate –Provides detailed data –Works for any browser –Best waterfall view Drawbacks –Requires a download –90 day free trial –Runs only on Windows –Misses cached components

PHP Quebec 2008 Page 71 Firebug NET Panel Methodology –Packet Sniffer Competitive Advantage –Integrated with Firebug –Displays waterfall view –Provides HTTP header info Drawbacks –Runs only in Firefox –Inaccurate waterfall view No render time No parse time No redirects No DNS lookups –Misses cached components

PHP Quebec 2008 Page 72 URLs – Exceptional Performance YUI blog YDN (Yahoo Developer Network) YDN blog Mailing list (Yahoo! Group) performance/ Feedback

PHP Quebec 2008 Page 73 URLs (contd.) "When the Cookie Crumbles" Tenni Theurer, Steve Souders "Maximizing Parallel Downloads in the Carpool Lane", Tenni Theurer, Patty Chi YUI Image Loader ( YUI Get ( YUI Compressor ( contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, JSMin ( ) "High-performance AJAX applications" Julien Lecompte Yahoo! engineer Michael J. Radwin talk back in

PHP Quebec 2008 Page 74 Credits – thank you!

PHP Quebec 2008 Page 75 Take-home Focus on the front-end Harvest the low hanging fruit Be an advocate for your users Start early

PHP Quebec 2008 Page 76 Thank you! Merci beaucoup!