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

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

18. The Waterfall
1. Less stuff
2. Smaller stuff
3. Out of the way
4. Start early

19. The Waterfall
1. Less stuff
2. Smaller stuff
3. Out of the way
4. Start early

20. Fewer components
• HTTP requests are expensive
• Combine components
The Golden Rule:
Reduce the number
of HTTP requests

21. 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>

22. Fewer components
• After:
<script
src="all.js"
type="text/javascript">
</script>

23. Fewer components
• Saved 3 HTTP requests

24. Fewer components
• repeat for CSS:
<link
href="all.css"
rel="stylesheet"
type="text/css"
/>

25. Fewer components
• CSS sprites for background
images
background-position: -22px -0px;
width: 12px;
height: 10px;

26. Fewer components
CSS sprites
• Before: 15 requests, 6.8 K
• After: 1 request, 1.4 K

27. Fewer components
• CSS sprites are a pain but
there are tools
http://csssprites.com/

28. Less stuff – duh!
• No 404s
• No duplicates
• No near-duplicates

29. Near duplicates
• 30x30 vs. 49x49
• Rounded corners, shadows

30. The Waterfall
1. Less stuff ✔
2. Smaller stuff
3. Out of the way
4. Start early

31. The Waterfall
1. Less stuff
2. Smaller stuff
3. Out of the way
4. Start early

32. Gzip
• Server compression

33. Gzip
• What to gzip?
HTML, XHTML, XML,
W00TChaMaCallitML,
CSS, JS, JSON, HTC,
plain text… all but binary
fonts
too

34. Gzip
• How to gzip?
AddOutputFilterByType DEFLATE text/html text/…
http://www.sitepoint.com/article/
web-site-optimization-steps

35. Minify
• Before

36. Minify
• After

37. Minify
• YUI Compressor
• Minifies both JS and CSS
http://developer.yahoo.com/yui/compressor/
http://tools.w3clubs.com/cssmin/

38. 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/

39. Gzip + minification
• Filesize reduction:
- 85% for JavaScript
- 80% for CSS
• Almost a crime if you don’t

40. Now
lossless
Optimizing image file sizes

41. Rule #1: No GIFs
$ optipng *.gif

42. PNG-8
• Palette image (like GIF)
• 256 colors (like GIF)
• Smaller than GIF
• Alpha transparency

43. Rarely PNG-24
• Truecolor

44. PNGSlim
OptiPNG DeflOpt
PNGOut
PNGOptimizer
PNGCrush
AdvPNG
PNGRewrite

45. JPEG
• The format for photos
• Run through JPEGTran

46. 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?

47. Top 1000 – GIF vs. PNG?
Animated
GIF
3%
PNG
24%
GIF
73%

48. Top 1000 – GIF vs. PNG vs. JPG?
JPEG GIF
46% 40%
Animated GIF
PNG
1%
13%

49. Top 1000 – GIF to PNG
23.79%
savings
$ optipng *.gif
$ pngoptimizercl –file:"*.png”
(1 min/1000 files)

50. http://www.youtube.com/watch?v=bPdkWJe9XH0

51. Top 1000 – Optimizing PNG
16.90%
savings
$ pngoptimizercl –file:"*.png"

52. Top 1000 – Optimizing JPG
13.08%
savings
$ jpegtran –copy none -optimize

53. Images – progressive JPEG
• for images ~10K+

54. Images
• It’s only human to forget
• Best to have a process so
you don’t have to
remember

55. Web Fonts
• Don’t go overboard!
• Subset
• Gzip!
http://snook.ca/archives/html_and_css/
screencast-converting-ttf2eot

56. The Waterfall
1. Less stuff ✔
2. Smaller stuff ✔
3. Out of the way
4. Start early

57. The Waterfall
1. Less stuff
2. Smaller stuff
3. Out of the way
4. Start early

58. Free-falling waterfalls
• Serve components from not
more than 2-4 domains
• Fewer redirects

59. JavaScript rocks!
• But also blocks
html
js
png
png

60. JavaScript at the bottom
html
png
png
js

61. 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);

62. The Waterfall
1. Less stuff ✔
2. Smaller stuff ✔
3. Out of the way ✔
4. Start early

63. The Waterfall
1. Less stuff
2. Smaller stuff
3. Out of the way
4. Start early

64. flush() early
html
png
js 
css
html
js
png
✔
css

65. flush()
<html>
<head>
<script src="my.js"
type="text/javascript"></script>
<link href="my.css"
type="text/css" rel="stylesheet" />
</head>
<?php flush() ?>
<body>
....

66. Progressive rendering
Chunk
#1
Chunk
#2
Chunk
#3

67. Progressive + source order
1
3
2
4

68. The Waterfall
1. Less stuff ✔
2. Smaller stuff ✔
3. Out of the way ✔
4. Start early ✔

69. Tools

70. Waterfall view
Firebug Net Panel
Web Inspector
Fiddler, HTTPWatch,
WebPageTest.com

71. YSlow
• Firebug extension
• Why (is my page) slow?
http://developer.yahoo.com/yslow/

72. YUICompressor Desktop

73. Words of Wisdom

74. What not to say…
• “Everyone is on high-speed
these days”
• “It’s all in the cache”

75. Speed matters
• It affects the user happiness
• It affects the bottom line
• It affects search engine rankings

76. Front-end
• That’s where the time is spent
• Good news:
- we control it
- cheap

77. Thank you!
Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com