How to make your web sites perform better. Presented at the PHP Conference Brazil.

1. Web Sites on Speed

5. About me

6. About me
• Tom Hughes-Croucher

7. About me
• Tom Hughes-Croucher
• @sh1mmer

8. About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist

9. About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
• Evangelism = stuff I believe in

10. About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
• Evangelism = stuff I believe in
• Wrote Web Standards (W3C, BSI, etc)

11. About me
• Tom Hughes-Croucher
• @sh1mmer
• Yahoo! Technical Evangelist
• Evangelism = stuff I believe in
• Wrote Web Standards (W3C, BSI, etc)
• Currently doing performance research

12. Overview

13. Overview
• What makes a web site slow?

14. Overview
• What makes a web site slow?
• What can we do to make it faster?

15. Overview
• What makes a web site slow?
• What can we do to make it faster?
• What tools can help?

16. Why are web
sites slow?
http://www.flickr.com/photos/topaz-mcnumpty/3544574591/sizes/l/

17. What is a website
made of?

18. What is a website
made of?
• Content (HTML)

19. What is a website
made of?
• Content (HTML)
• Images / Flash

20. What is a website
made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)

21. What is a website
made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
• Interaction (JavaScript)

22. What is a website
made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
• Interaction (JavaScript)
• Server farm

23. What is a website
made of?
• Content (HTML)
• Images / Flash
• Styles (CSS)
• Interaction (JavaScript)
• Server farm
• Maybe a database, Web services, CDN

24. PHP is only a part
9% 91%

25. Where does the
time go?

26. Where does the
time go?
• DNS lookups & HTTP requests

27. Where does the
time go?
• DNS lookups & HTTP requests
• Building pages

28. Where does the
time go?
• DNS lookups & HTTP requests
• Building pages
• Downloading stuff

29. Where does the
time go?
• DNS lookups & HTTP requests
• Building pages
• Downloading stuff
• Rendering stuff

30. Where does the
time go?
• DNS lookups & HTTP requests
• Building pages
• Downloading stuff
• Rendering stuff
• User Interaction

31. It’s about perception!

32. How do we speed it up?

33. How do we speed it up?
• DNS lookups & HTTP
requests

34. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections

35. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages

36. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible

37. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible
• Downloading stuff

38. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible
• Downloading stuff ➡ Reduce the size of
content

39. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible
• Downloading stuff ➡ Reduce the size of
content
• Rendering stuff

40. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible
• Downloading stuff ➡ Reduce the size of
content
• Rendering stuff ➡ Structure pages for
performance

41. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible
• Downloading stuff ➡ Reduce the size of
content
• Rendering stuff ➡ Structure pages for
performance
• User Interaction

42. How do we speed it up?
• DNS lookups & HTTP ➡ Reduce lookups and
requests connections
• Building pages ➡ Return content as fast
as possible
• Downloading stuff ➡ Reduce the size of
content
• Rendering stuff ➡ Structure pages for
performance
• User Interaction ➡ Cheat

43. Fixing stuff
http://www.flickr.com/photos/sharynmorrow/29351619/

44. 1. Reduce DNS
Lookups & connections

45. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)

46. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects

47. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
• 301, 302, location.href=...

48. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
• 301, 302, location.href=...
• Combine CSS and Javascript files into a
single file for each type

49. Simple Combo Handler
$combo = preg_replace('/^.*?/', '',
$_SERVER['REQUEST_URI']);
$sources = split('&', $combo);
header('Content-type: text/javascript');
foreach($sources as $source) {
// TODO: Verify that $source is safe and exists
include("/var/www/$source");
}

50. 1. Reduce DNS
Lookups & connections

51. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
• 301, 302, location.href=...
• Combine CSS and Javascript files into a
single file for each type

52. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
• 301, 302, location.href=...
• Combine CSS and Javascript files into a
single file for each type
• Combine decorative images into sprites

53. 30px
30px
0px

55. 1. Reduce DNS
Lookups & connections

56. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
• 301, 302, location.href=...
• Combine CSS and Javascript files into a
single file for each type
• Combine decorative images into sprites

57. 1. Reduce DNS
Lookups & connections
• Reduce the number of domains (2-4)
• Avoid redirects
• 301, 302, location.href=...
• Combine CSS and Javascript files into a
single file for each type
• Combine decorative images into sprites
• Cache aggressively

58. 1. Reduce DNS
Lookups & connections
<Location /static>
ExpiresActive On
ExpiresDefault "access plus 1 year"
</Location>

59. 2. Return Quickly

60. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible

61. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible
• Flush often

66. 2. Return Quickly

67. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible
• Flush often

68. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible
• Flush often
• Don't bother your server with static
content

69. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible
• Flush often
• Don't bother your server with static
content
• Cache expensive back end calls, and use a
front-end cache

70. 2. Return Quickly
Cache expensive back end calls, and use a front-end cache

71. 2. Return Quickly

72. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible
• Flush often
• Don't bother your server with static content
• Cache expensive back end calls, and use a
front-end cache

73. 2. Return Quickly
• Get the first chunk of bytes out as soon as
possible
• Flush often
• Don't bother your server with static content
• Cache expensive back end calls, and use a
front-end cache
• Reduce MaxClients in apache

74. 3. Slim down

75. 3. Slim down
• gzip content over the wire

76. 3. Slim down
• gzip content over the wire
• Minify CSS and Javascript (use YUI
Compressor) & Optimise images (use smush.it)

77. 3. Slim down
• gzip content over the wire
• Minify CSS and Javascript (use YUI
Compressor) & Optimise images (use smush.it)
• Avoid duplicate CSS and Javascript files

78. 3. Slim down
• gzip content over the wire
• Minify CSS and Javascript (use YUI
Compressor) & Optimise images (use smush.it)
• Avoid duplicate CSS and Javascript files
• Reduce cookie size

79. 3. Slim down
• gzip content over the wire
• Minify CSS and Javascript (use YUI
Compressor) & Optimise images (use smush.it)
• Avoid duplicate CSS and Javascript files
• Reduce cookie size
• Use a CDN

80. 3. Slim down
• gzip content over the wire
• Minify CSS and Javascript (use YUI
Compressor) & Optimise images (use smush.it)
• Avoid duplicate CSS and Javascript files
• Reduce cookie size
• Use a CDN
• Post-load components

81. 4. Restructure pages

82. 4. Restructure pages
• Put CSS at the top to avoid having to
redraw the page later

83. 4. Restructure pages
• Put CSS at the top to avoid having to
redraw the page later
• Put Javascript at the bottom so that it
doesn't block rendering

84. 4. Restructure pages
• Put CSS at the top to avoid having to
redraw the page later
• Put Javascript at the bottom so that it
doesn't block rendering
• Avoid tables for layout

85. 4. Restructure pages
• Put CSS at the top to avoid having to
redraw the page later
• Put Javascript at the bottom so that it
doesn't block rendering
• Avoid tables for layout
• Delay loading of invisible content

86. 4. Restructure pages
• Put CSS at the top to avoid having to
redraw the page later
• Put Javascript at the bottom so that it
doesn't block rendering
• Avoid tables for layout
• Delay loading of invisible content
• Reduce the number of HTML elements

87. 5. Cheat the DOM

88. 5. Cheat the DOM
• Attach events on a container rather than on
each element

89. 5. Cheat the DOM
• Attach events on a container rather than on
each element
• Delay event attachment

90. 5. Cheat the DOM
• Attach events on a container rather than on
each element
• Delay event attachment
• Cache DOM elements and work on invisible
elements

91. 5. Cheat the DOM
• Attach events on a container rather than on
each element
• Delay event attachment
• Cache DOM elements and work on invisible
elements
• Reduce iterations on DOM elements

92. 5. Cheat the DOM
• Attach events on a container rather than on
each element
• Delay event attachment
• Cache DOM elements and work on invisible
elements
• Reduce iterations on DOM elements
• Use more specific, semantically correct HTML
tags

93. Use the right tags
<div>
<div>
<input class="entry" name="larry">
<input class="entry" name="curly">
</div>
<div>
<input class="entry" name="moe">
</div>
</div>

94. Use the right tags
<ul>
<li>
<input class="entry" name="larry">
<input class="entry" name="curly">
</li>
<li>
<input class="entry" name="moe">
</li>
</ul>

95. 5. Cheat the DOM

96. 5. Cheat the DOM
• Attach events on a container rather than on each
element
• Delay event attachment
• Cache DOM elements and work on invisible elements
• Reduce iterations on DOM elements
• Use more specific, semantically correct HTML tags

97. 5. Cheat the DOM
• Attach events on a container rather than on each
element
• Delay event attachment
• Cache DOM elements and work on invisible elements
• Reduce iterations on DOM elements
• Use more specific, semantically correct HTML tags
• Use local copies of global variables

98. 5. Cheat the DOM
• Attach events on a container rather than on each
element
• Delay event attachment
• Cache DOM elements and work on invisible elements
• Reduce iterations on DOM elements
• Use more specific, semantically correct HTML tags
• Use local copies of global variables
• Profile your Javascript (use YUI Profiler)

99. More tips

100. More tips
• Preload expected content

102. More tips

103. More tips
• Preload expected content

104. More tips
• Preload expected content
• Progressively enhance your pages

105. It’s about perception!

106. More tips

107. More tips
• Preload expected content
• Progressively enhance your pages

108. More tips
• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
CSS expressions

109. More tips
• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
CSS expressions
• Avoid 404s and reduce IFRAMEs

113. More tips

114. More tips
• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
CSS expressions
• Avoid 404s and reduce IFRAMEs

115. More tips
• Preload expected content
• Progressively enhance your pages
• Use <link> instead of @import and avoid
CSS expressions
• Avoid 404s and reduce IFRAMEs
• Turn off .htaccess

116. YSlow

117. YSlow
• Firebug plugin to analyse pages for
performance gotchas

118. YSlow
• Firebug plugin to analyse pages for
performance gotchas
• http://developer.yahoo.com/yslow/

119. YSlow
• Firebug plugin to analyse pages for
performance gotchas
• http://developer.yahoo.com/yslow/
• Follow YSlow's advice to improve page
performance

120. YSlow
• Firebug plugin to analyse pages for
performance gotchas
• http://developer.yahoo.com/yslow/
• Follow YSlow's advice to improve page
performance
• Try Sergey Chernyshev's ShowSlow to
automate YSlow usage

122. Tools
http://www.flickr.com/photos/bre/552152780/sizes/l/

123. Tools
• YSlow: developer.yahoo.com/yslow/
• SmushIt: smushit.com
• CSS Sprites: pt.spritegen.website-performance.org
• YUI Profiler: developer.yahoo.com/yui/profiler/
• ShowSlow: showslow.com
• Webpage Test: webpagetest.org
• Page Speed: code.google.com/speed/page-speed

124. Conclusion
• Don't optimise prematurely. Profile first.
• Go for the low hanging fruit. Configuration
is cheaper than redevelopment.
• Performance is not the same as scalability,
you probably need both.
• KISS

125. Credits
• The following people were directly or indirectly
involved in research leading to this content:
• Stoyan Stefanov, Nicole Sullivan, Tenni
Theurer, Wayne Shea,
• Julien Lecompte, Iain Lamb, Philip Tellis,
Subramanyan Murali,
• Nicholas Zakas, Jimmy Byrum, Steve Souders
• http://developer.yahoo.net/performance

126. Questions
Tom Hughes-Croucher
croucher@yahoo-inc.com
@sh1mmer & @ydn on Twitter
http://speakerrate.com/sh1mmer Rate me!