Voices that matter: High Performance Web Sites
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Voices that matter: High Performance Web Sites

  • 3,470 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    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?
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,470
On Slideshare
3,434
From Embeds
36
Number of Embeds
2

Actions

Shares
Downloads
61
Comments
2
Likes
4

Embeds 36

http://www.pixelboy.fr 30
http://www.techgig.com 6

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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