Your SlideShare is downloading. ×
0
“Don’t make me wait”
or
Building High-Performance
Web Apps
Stoyan Stefanov, Yahoo!
Voices That Matter
San Francisco, June ...
About me
•  Yahoo! Search
•  Yahoo! Exceptional
   Performance
•  YSlow 2.0 architect
•  http://smush.it
•  Books, article...
Why?
Importance of performance
                     1sec =
                     -2.8%
                     revenue
Importance of performance
                  Gets worse
                  with time

                  After-effect
Importance of performance
•  Yahoo!: 400 ms slower = 5-9%
drop in full-page traffic
Importance of performance
                  Slower
                  pages get
                  less traffic
Importance of performance
                  From 4-6
                  seconds to
                  1.5 seconds
Importance of performance
•  Psychology, physiology
•  Effects of waiting
•  “Time is money”
•  Make people happy
Importance of performance
•  SEO
•  Speed is a ranking factor
Where to start?
Ashton Kutcher’s Twitter
First visit, empty cache
          10%     90%
Repeat visit, full cache

           38%        62%
Front-end performance
•  Where 80% time is spent
•  Easier
•  Works
The Waterfall
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Fewer components
•  HTTP requests are expensive
•  Combine components

          The Golden Rule:

          Reduce the nu...
Fewer components
•  Before:

<script src="jquery.js"></script> 
<script src="jquery.twitter.js"></script> 
<script src="jq...
Fewer components
•  After:


<script 	
  	src="all.js" 	
  	type="text/javascript">	
</script>
Fewer components
•  Saved 3 HTTP requests 
Fewer components
•  repeat for CSS:

<link 	
  	href="all.css" 	
  	rel="stylesheet" 	
  	type="text/css"	
/>
Fewer components
•  CSS sprites for background
images



background-position: -22px -0px;

width: 12px;

height: 10px;
Fewer components
 CSS sprites
•  Before: 15 requests, 6.8 K
•  After: 1 request, 1.4 K 
Fewer components
•  CSS sprites are a pain but
there are tools




                   http://csssprites.com/
Less stuff – duh!
•  No 404s
•  No duplicates
•  No near-duplicates
Near duplicates
•  30x30 vs. 49x49



•  Rounded corners, shadows
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff
3.  Out of the way
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Gzip
•  Server compression
Gzip
•  What to gzip?

            HTML, XHTML, XML,
           W00TChaMaCallitML,
            CSS, JS, JSON, HTC,
       ...
Gzip
•  How to gzip?

AddOutputFilterByType DEFLATE text/html text/… 




                http://www.sitepoint.com/article...
Minify
•  Before
Minify
•  After
Minify
•  YUI Compressor
•  Minifies both JS and CSS




     http://developer.yahoo.com/yui/compressor/	
               h...
Gzip or minification?
•  62,885 bytes - jQuery
•  31,822 - minified
•  19,758 - original gzipped
•  10,818 - minified and ...
Gzip + minification
•  Filesize reduction:
   - 85% for JavaScript
   - 80% for CSS
•  Almost a crime if you don’t
Now
                         lossless




Optimizing image file sizes
Rule #1: No GIFs




$ optipng *.gif
PNG-8
•  Palette image (like GIF)
•  256 colors (like GIF)
•  Smaller than GIF
•  Alpha transparency
Rarely PNG-24
•  Truecolor
PNGSlim
                  	
OptiPNG	         DeflOpt	

           PNGOut	
      PNGOptimizer	

PNGCrush	
                 ...
JPEG
•  The format for photos
•  Run through JPEGTran
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 optimiz...
Top 1000 – GIF vs. PNG?

                    Animated
                       GIF
                       3%

              ...
Top 1000 – GIF vs. PNG vs. JPG?


    JPEG                  GIF
     46%                  40%




                      An...
Top 1000 – GIF to PNG

                                  23.79%
                                  savings



$ optipng *.g...
http://www.youtube.com/watch?v=bPdkWJe9XH0
Top 1000 – Optimizing PNG

                                  16.90%
                                  savings




$ pngopt...
Top 1000 – Optimizing JPG

                               13.08%
                               savings




$ jpegtran –co...
Images – progressive JPEG
•  for images ~10K+
Images
•  It’s only human to forget
•  Best to have a process so
  you don’t have to
  remember
Web Fonts
•  Don’t go overboard!
•  Subset
•  Gzip!


           http://snook.ca/archives/html_and_css/

                 ...
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff ✔
3.  Out of the way
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
Free-falling waterfalls
•  Serve components from not
   more than 2-4 domains
•  Fewer redirects
JavaScript rocks!
•  But also blocks

   html
          js
               png

               png
JavaScript at the bottom



   html
          png

          png

                js
Non-blocking JavaScript
•    Asynchronous JavaScript
     html
                  js

            png

            png


va...
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff ✔
3.  Out of the way ✔
4.  Start early
The Waterfall
1.  Less stuff
2.  Smaller stuff
3.  Out of the way
4.  Start early
flush() early
 html
                         png

                    js               
                               cs...
flush()
<html>	
<head>	
  <script src="my.js" 	
   	type="text/javascript"></script>	
  <link href="my.css" 	
   	type="te...
Progressive rendering
                        Chunk
                        #1




                        Chunk
         ...
Progressive + source order
                             1


3
                             2
4
The Waterfall
1.  Less stuff ✔
2.  Smaller stuff ✔
3.  Out of the way ✔
4.  Start early ✔
Tools
Waterfall view
      Firebug Net Panel
      Web Inspector
      Fiddler, HTTPWatch,
      WebPageTest.com
YSlow




•  Firebug extension
•  Why (is my page) slow?
           http://developer.yahoo.com/yslow/
YUICompressor Desktop
Words of Wisdom
What not to say…
•  “Everyone is on high-speed
these days”
•  “It’s all in the cache”
Speed matters
•  It affects the user happiness
•  It affects the bottom line
•  It affects search engine rankings
Front-end
•  That’s where the time is spent
•  Good news:
 - we control it
 - cheap
Thank you!


Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com
Voices that matter: High Performance Web Sites
Upcoming SlideShare
Loading in...5
×

Voices that matter: High Performance Web Sites

2,736

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
2,736
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
63
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×