high performance web pages - 20 new best practices
TRANSCRIPT
![Page 1: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/1.jpg)
PHP Quebec 2008 • Page 1
High PerformanceWeb Pages
Stoyan StefanovYahoo! Exceptional Performancehttp://developer.yahoo.com/performancePHP Quebec, March 13, 2008
![Page 2: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/2.jpg)
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)
![Page 3: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/3.jpg)
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!
![Page 4: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/4.jpg)
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
![Page 5: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/5.jpg)
PHP Quebec 2008 • Page 5
![Page 6: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/6.jpg)
Back-
end=5%
Front-
end=95
%Even here, front-end=88%
The Importance of Front-End Performance
![Page 7: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/7.jpg)
PHP Quebec 2008 • Page 7
Focus on the front-end
• 80-90% of the time• Easier than the back-end• Proven to work
![Page 8: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/8.jpg)
PHP Quebec 2008 • Page 8
List of 14 best practices (updated)1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add Expires header (or Cache-control)4. Gzip Components5. Put CSS at the Top6. Move Scripts to the Bottom (inline too)7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10.Minify JavaScript and CSS (inline too)11.Avoid Redirects12.Remove Duplicate Scripts13.Configure ETags14.Make AJAX Cacheable
http://developer.yahoo.com/performance/rules.html
content
server
server
server
server
javascript
javascript
javascript
javascript
content
css
css
css
css
content
content
![Page 9: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/9.jpg)
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)
http://developer.yahoo.com/yslow/
![Page 10: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/10.jpg)
PHP Quebec 2008 • Page 10
![Page 11: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/11.jpg)
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, XHRsevent handlers, components, XHRs
request
backend fetching components
fetuschildteenadult
![Page 12: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/12.jpg)
PHP Quebec 2008 • Page 12
After YSlow "A"?1. Flush the buffer early2. Use GET for AJAX requests3. Post-load components4. Preload components5. Reduce the number of DOM elements6. Split components across domains7. Minimize the number of iframes8. No 404s9. Reduce cookie size10. Use cookie-free domains for components11. Minimize DOM access12. Develop smart event handlers 13. Choose <link> over @import14. Avoid filters15. Optimize images16. Optimize CSS sprites17. Don't scale images in HTML18. Make favicon.ico small and cacheable19. Keep components under 25K20. Pack components into a multipart document
content
javascript
javascript
content
content
content
content
server
server
css
css
images
images
images
images
mobile
mobile
cookie
cookie
content
![Page 13: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/13.jpg)
PHP Quebec 2008 • Page 13
Part I
Review of 14 best practices (updated)
![Page 14: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/14.jpg)
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
![Page 15: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/15.jpg)
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:http://www.csssprites.comhttp://spritegen.website-performance.org/
![Page 16: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/16.jpg)
PHP Quebec 2008 • Page 16
Use a Content Delivery Network• For static components• Content closer to your users• Akamai, Amazon S3
![Page 17: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/17.jpg)
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
![Page 18: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/18.jpg)
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…
![Page 19: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/19.jpg)
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 as @media
print• Place the stylesheets as early as possible in the
document<head> <title>My page</title> <link href=“styles.css” …/></head><body> <!-- content -->
![Page 20: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/20.jpg)
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<!-- content -->
<script src=“script.js” …/></body></html>
![Page 21: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/21.jpg)
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
![Page 22: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/22.jpg)
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
![Page 23: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/23.jpg)
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
![Page 24: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/24.jpg)
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
![Page 25: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/25.jpg)
PHP Quebec 2008 • Page 25
Minify: before/** * The dom module provides helper methods for * manipulating Dom elements. * @module 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;
![Page 26: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/26.jpg)
PHP Quebec 2008 • Page 26
Minify: after(function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;
![Page 27: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/27.jpg)
PHP Quebec 2008 • Page 27
Avoid Redirects• A wasted HTTP request• Causes a restart
![Page 28: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/28.jpg)
PHP Quebec 2008 • Page 28
Remove Duplicate Scripts• Duh!• IE might decide to download them again
![Page 29: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/29.jpg)
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
![Page 30: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/30.jpg)
PHP Quebec 2008 • Page 30
Make AJAX Cacheable• Content returned from XMLHttpRequests is
like any other component• Should be gzipped• Could be cached• Cache-control: max-age=?
![Page 31: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/31.jpg)
PHP Quebec 2008 • Page 31
Part II
After YSlow “A”:20 more best practices
![Page 32: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/32.jpg)
PHP Quebec 2008 • Page 32
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 33: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/33.jpg)
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 ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->• Case Study: Yahoo! Search
![Page 34: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/34.jpg)
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
![Page 35: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/35.jpg)
PHP Quebec 2008 • Page 35
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 36: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/36.jpg)
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
![Page 37: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/37.jpg)
PHP Quebec 2008 • Page 37
Post-load components• Case study: yahoo.com• onload.js and onload.css• Progressive enhancement
![Page 38: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/38.jpg)
PHP Quebec 2008 • Page 38
Preload componentsPreload• 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
![Page 39: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/39.jpg)
PHP Quebec 2008 • Page 39
Preload components (contd.)• Unconditional preload example
![Page 40: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/40.jpg)
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
![Page 41: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/41.jpg)
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 <div>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)
![Page 42: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/42.jpg)
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• www.example.org – HTML content• static.example.org – Static components
• Future: IE8 will allow 6 requests per domain
![Page 43: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/43.jpg)
PHP Quebec 2008 • Page 43
Split components (contd.)
2 components in parallel 8 components in parallel
![Page 44: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/44.jpg)
PHP Quebec 2008 • Page 44
Minimize the number of iframes• <iframe> pros:
– Can help with slow third-party content like badges and ads
– Security sandbox– You can download scripts in parallel
• <iframe> cons:– They have a cost even if blank– They block page onload– Non-semantic
![Page 45: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/45.jpg)
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
![Page 46: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/46.jpg)
PHP Quebec 2008 • Page 46
No 404s (contd.)
The second component is a 404 JavaScript and it blocks the rest of the page
![Page 47: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/47.jpg)
PHP Quebec 2008 • Page 47
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 48: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/48.jpg)
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
![Page 49: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/49.jpg)
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• www.www-yes.org vs www-no.org?• no-www leaves you no choice but to write
cookies to *.example.org
![Page 50: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/50.jpg)
PHP Quebec 2008 • Page 50
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 51: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/51.jpg)
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
![Page 52: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/52.jpg)
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
![Page 53: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/53.jpg)
PHP Quebec 2008 • Page 53
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 54: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/54.jpg)
PHP Quebec 2008 • Page 54
Choose <link> over @import• CSS should be at the top• In IE @import is the same as putting <link>
at the bottom
![Page 55: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/55.jpg)
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
![Page 56: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/56.jpg)
PHP Quebec 2008 • Page 56
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 57: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/57.jpg)
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
![Page 58: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/58.jpg)
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
![Page 59: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/59.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?!
![Page 60: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/60.jpg)
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 10000 pixels– 1000x1000 is 1 Million pixels– Case study: Yahoo! Mail Classic
![Page 61: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/61.jpg)
PHP Quebec 2008 • Page 61
Optimize sprites
![Page 62: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/62.jpg)
PHP Quebec 2008 • Page 62
Don't scale images in HTML• Downloads unnecessary bytes• If you need<img width="100" height="100" src="mycat.jpg" />
then have mycat.jpg 100x100 not 500x500
![Page 63: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/63.jpg)
PHP Quebec 2008 • Page 63
Make favicon.ico small and cacheable • www.example.org/favicon.ico• 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!
![Page 64: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/64.jpg)
PHP Quebec 2008 • Page 64
Bonus: crossdomain.xml• Cross domain policy for Flash/Flex• Sits in the root: example.org/crossdomain.xml<cross-domain-policy> <allow-access-from domain="*.yahoo.com" secure="false"/>
</cross-domain-policy>• Set Expires header• gzip• … and secure while at it, don’t do:<allow-access-from domain="*“ />
![Page 65: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/65.jpg)
PHP Quebec 2008 • Page 65
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 66: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/66.jpg)
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
![Page 67: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/67.jpg)
PHP Quebec 2008 • Page 67
Pack components into a multipart document• For UAs that support it (iPhone doesn’t)• Like an email with attachments
![Page 68: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/68.jpg)
PHP Quebec 2008 • Page 68
Part II
tag: servertag: contenttag: cookie tag: javascript tag: css tag: images tag: mobile
![Page 69: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/69.jpg)
PHP Quebec 2008 • Page 69
Tools• YSlow (http://developer.yahoo.com/yslow/)• Fiddler (http://www.fiddlertool.com/fiddler/)• IBM Page Detailer (http://
www.alphaworks.ibm.com/tech/pagedetailer)• HTTPWatch (http://www.httpwatch.com/)• AOL Pagetest (http://
pagetest.wiki.sourceforge.net/)• Firebug Net Panel (http://www.getfirebug.com/)
![Page 70: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/70.jpg)
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
![Page 71: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/71.jpg)
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
![Page 72: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/72.jpg)
PHP Quebec 2008 • Page 72
URLs – Exceptional PerformanceYUI blog
http://yuiblog.com/blog/category/performance/ YDN (Yahoo Developer Network)
http://developer.yahoo.com/performance/ YDN blog
http://developer.yahoo.net/blog/archives/performance/ Mailing list (Yahoo! Group)
http://tech.groups.yahoo.com/group/exceptional-performance/
Feedbackhttp://developer.yahoo.com/yslow/feedback.html
![Page 73: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/73.jpg)
PHP Quebec 2008 • Page 73
URLs (contd.)• "When the Cookie Crumbles" Tenni Theurer, Steve Souders
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/• "Maximizing Parallel Downloads in the Carpool Lane", Tenni
Theurer, Patty Chihttp://yuiblog.com/blog/2007/04/11/performance-research-part-4/
• YUI Image Loader (http://developer.yahoo.com/yui/imageloader/)• YUI Get (http://developer.yahoo.com/yui/get/)• YUI Compressor (http://developer.yahoo.com/yui/compressor/
contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/)
• JSMin (http://www.crockford.com/javascript/jsmin.html)• "High-performance AJAX applications" Julien Lecompte
http://yuiblog.com/blog/2007/12/20/video-lecomte/• Yahoo! engineer Michael J. Radwin talk back in 2004
http://www.radwin.org/michael/talks/
![Page 74: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/74.jpg)
PHP Quebec 2008 • Page 74
Credits – thank you!
![Page 75: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/75.jpg)
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
![Page 76: High Performance Web Pages - 20 new best practices](https://reader033.vdocument.in/reader033/viewer/2022042908/58ed39c91a28abf0588b4663/html5/thumbnails/76.jpg)
PHP Quebec 2008 • Page 76
Thank you!Merci beaucoup!