Voices that matter: High Performance Web Sites

3,202 views

Published on

http://webdesign2010.crowdvine.com/talks/10509



No one likes slow pages. Faster sites increase user satisfaction and happiness, help improve business metrics and, since April 2010, rank higher in Google search results. In this session Stoyan shares his research and expertise covering:
- The performance Golden Rule, which helps you cut page loading time in half.
- Speeding up the initial page rendering.
- Writing smarter CSS.
- Image optimizations that shave 10-30% off the file sizes, with no quality loss.
- Improving the perception of speed
- Maintaining the user's "flow" as they move from page to page

Step ahead of your competitors by building faster and more pleasant user experiences following the proven best practices

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/i7K0s4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • In trying to download this file after VTM_WD, I keep getting an error saying the file is damaged. Has anyone else been able to download it?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,202
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
65
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Voices that matter: High Performance Web Sites

  1. 1. “Don’t make me wait” or Building High-Performance Web Apps Stoyan Stefanov, Yahoo! Voices That Matter San Francisco, June 29, 2009 http://slideshare.net/stoyan/
  2. 2. About me •  Yahoo! Search •  Yahoo! Exceptional Performance •  YSlow 2.0 architect •  http://smush.it •  Books, articles •  http://phpied.com
  3. 3. Why?
  4. 4. Importance of performance 1sec = -2.8% revenue
  5. 5. Importance of performance Gets worse with time After-effect
  6. 6. Importance of performance •  Yahoo!: 400 ms slower = 5-9% drop in full-page traffic
  7. 7. Importance of performance Slower pages get less traffic
  8. 8. Importance of performance From 4-6 seconds to 1.5 seconds
  9. 9. Importance of performance •  Psychology, physiology •  Effects of waiting •  “Time is money” •  Make people happy
  10. 10. Importance of performance •  SEO •  Speed is a ranking factor
  11. 11. Where to start?
  12. 12. Ashton Kutcher’s Twitter
  13. 13. First visit, empty cache 10% 90%
  14. 14. Repeat visit, full cache 38% 62%
  15. 15. Front-end performance •  Where 80% time is spent •  Easier •  Works
  16. 16. The Waterfall
  17. 17. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  18. 18. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  19. 19. Fewer components •  HTTP requests are expensive •  Combine components The Golden Rule: Reduce the number of HTTP requests
  20. 20. Fewer components •  Before: <script src="jquery.js"></script>  <script src="jquery.twitter.js"></script>  <script src="jquery.cookie.js"></script>  <script src="myapp.js"></script> 
  21. 21. Fewer components •  After: <script src="all.js" type="text/javascript"> </script>
  22. 22. Fewer components •  Saved 3 HTTP requests 
  23. 23. Fewer components •  repeat for CSS: <link href="all.css" rel="stylesheet" type="text/css" />
  24. 24. Fewer components •  CSS sprites for background images background-position: -22px -0px;
 width: 12px;
 height: 10px;
  25. 25. Fewer components CSS sprites •  Before: 15 requests, 6.8 K •  After: 1 request, 1.4 K 
  26. 26. Fewer components •  CSS sprites are a pain but there are tools http://csssprites.com/
  27. 27. Less stuff – duh! •  No 404s •  No duplicates •  No near-duplicates
  28. 28. Near duplicates •  30x30 vs. 49x49 •  Rounded corners, shadows
  29. 29. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff 3.  Out of the way 4.  Start early
  30. 30. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  31. 31. Gzip •  Server compression
  32. 32. Gzip •  What to gzip? HTML, XHTML, XML, W00TChaMaCallitML, CSS, JS, JSON, HTC, plain text… all but binary fonts too
  33. 33. Gzip •  How to gzip? AddOutputFilterByType DEFLATE text/html text/…  http://www.sitepoint.com/article/
 web-site-optimization-steps
  34. 34. Minify •  Before
  35. 35. Minify •  After
  36. 36. Minify •  YUI Compressor •  Minifies both JS and CSS http://developer.yahoo.com/yui/compressor/ http://tools.w3clubs.com/cssmin/
  37. 37. Gzip or minification? •  62,885 bytes - jQuery •  31,822 - minified •  19,758 - original gzipped •  10,818 - minified and gzipped FTW http://www.julienlecomte.net/blog/2007/08/13/
  38. 38. Gzip + minification •  Filesize reduction: - 85% for JavaScript - 80% for CSS •  Almost a crime if you don’t
  39. 39. Now lossless Optimizing image file sizes
  40. 40. Rule #1: No GIFs $ optipng *.gif
  41. 41. PNG-8 •  Palette image (like GIF) •  256 colors (like GIF) •  Smaller than GIF •  Alpha transparency
  42. 42. Rarely PNG-24 •  Truecolor
  43. 43. PNGSlim OptiPNG DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
  44. 44. JPEG •  The format for photos •  Run through JPEGTran
  45. 45. Study of the images on the top 1000 sites Q: How many GIFs are out there? Q: What if we make them PNG? Q: Are PNGs optimized? Q: Are JPEGs optimized?
  46. 46. Top 1000 – GIF vs. PNG? Animated GIF 3% PNG 24% GIF 73%
  47. 47. Top 1000 – GIF vs. PNG vs. JPG? JPEG GIF 46% 40% Animated GIF PNG 1% 13%
  48. 48. Top 1000 – GIF to PNG 23.79% savings $ optipng *.gif $ pngoptimizercl –file:"*.png” (1 min/1000 files)
  49. 49. http://www.youtube.com/watch?v=bPdkWJe9XH0
  50. 50. Top 1000 – Optimizing PNG 16.90% savings $ pngoptimizercl –file:"*.png"
  51. 51. Top 1000 – Optimizing JPG 13.08% savings $ jpegtran –copy none -optimize
  52. 52. Images – progressive JPEG •  for images ~10K+
  53. 53. Images •  It’s only human to forget •  Best to have a process so you don’t have to remember
  54. 54. Web Fonts •  Don’t go overboard! •  Subset •  Gzip! http://snook.ca/archives/html_and_css/
 screencast-converting-ttf2eot
  55. 55. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way 4.  Start early
  56. 56. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  57. 57. Free-falling waterfalls •  Serve components from not more than 2-4 domains •  Fewer redirects
  58. 58. JavaScript rocks! •  But also blocks html js png png
  59. 59. JavaScript at the bottom html png png js
  60. 60. Non-blocking JavaScript •  Asynchronous JavaScript html js png png var js = document.createElement('script');  js.src = 'myscript.js';  var h = document.getElementsByTagName('head')[0];  h.appendChild(js); 
  61. 61. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early
  62. 62. The Waterfall 1.  Less stuff 2.  Smaller stuff 3.  Out of the way 4.  Start early
  63. 63. flush() early html png js  css html js png ✔ css
  64. 64. flush() <html> <head> <script src="my.js" type="text/javascript"></script> <link href="my.css" type="text/css" rel="stylesheet" /> </head> <?php flush() ?> <body> ....
  65. 65. Progressive rendering Chunk #1 Chunk #2 Chunk #3
  66. 66. Progressive + source order 1 3 2 4
  67. 67. The Waterfall 1.  Less stuff ✔ 2.  Smaller stuff ✔ 3.  Out of the way ✔ 4.  Start early ✔
  68. 68. Tools
  69. 69. Waterfall view Firebug Net Panel Web Inspector Fiddler, HTTPWatch, WebPageTest.com
  70. 70. YSlow •  Firebug extension •  Why (is my page) slow? http://developer.yahoo.com/yslow/
  71. 71. YUICompressor Desktop
  72. 72. Words of Wisdom
  73. 73. What not to say… •  “Everyone is on high-speed these days” •  “It’s all in the cache”
  74. 74. Speed matters •  It affects the user happiness •  It affects the bottom line •  It affects search engine rankings
  75. 75. Front-end •  That’s where the time is spent •  Good news: - we control it - cheap
  76. 76. Thank you! Stoyan Stefanov @stoyanstefanov http://www.phpied.com

×