Drupal Frontend Performance and Scalability

1. Drupal Frontend PerformanceAshok & Christefano

2. August 6, 2010About me (BTMash)Systems programmer.

3. Work at California Institute of the Arts.

4. Working with Drupal since 2006 (4.6.x)

5. Primarily help with patches and upgrades for contrib modules on d.o.

6. Abuse

7. Favorites

8. Flag Content

9. Fivestar

10. Nice Menus

11. Simplenews

12. Userpoints

13. Userpoints_badges

14. User_badge

15. And more!

16. Strong interest in server optimizationAbout me (Christefano)LADrupal Manager

17. Camp Organizer

18. Drupal Core Contributor

19. Person of the Year

20. D.O and G.D.O webmaster teams.ResourcesKonstantin Kaefer

21. http://kkaefer.com/

22. Steve Souders

23. http://www.stevesouders.com/blog/

24. High Performance

25. http://groups.drupal.org/high-performanceGoalsDefine your objectives and goals first

26. Do you want faster response to the end user per page?

27. Do you want to handle more page views?

28. Do you want to minimize downtime?

29. Each is different, though they may be related

30. Sometimes, there are some ‘low hanging fruit’ that are easy to see, that provide noticeable improvement with little effort.

31. Gets hard to achieve more performance (more efforts, low return)

32. More infrastructure (splitting servers, multiple web/db servers, etc)

33. Patching Drupal

34. Revisions to Architecture (CCK, Views)DiagnosisProper diagnosis is essential before proposing and implementing a solution or you are running blind.

35. Must be based on proper data.

36. Analysis of data collected.

37. Can lead towards a few possible paths of optimization.Points of optimizationIntroductionTools to measure and diagnose.Speed Optimizations

38. Front EndLoading images, stylesheets, javascript can account for over 80% of load time

39. Overall load time?

40. Page size?

41. Time until the DOM is loaded?

42. Time until page is rendered?

43. Time until the page is functional?Tools to measure and diagnoseFirebug’s net panel

44. Track loading time for stylesheets, javascript, images, and total page load time.

45. Yslow

46. Rates a webpage based on 13 criteria

47. Determines overall load time

48. Provides optimization suggestions

49. Provides graphs numbers and figures on loading a particular page

50. Google Page Speed

51. Similar to Yslow

52. Provides suggestions on improving CSS, optimizing image files and javascript

53. Google Chrome Developer Panel

54. Very powerful (integrated with Google Page Speed).

55. Can track speed of JS. EpisodesProject based on framework by Steve Souders (creator of YSlow) - http://stevesouders.com/episodes/

56. Measure timing for Web 2.0 Applications

57. Very granular measurement (measures how long each section

58. Drupal Module (http://drupal.org/project/episodes)Non-Browser ToolsAOL Page Test

59. http://webpagetest.org

60. IBM Page Detailer

61. http://www.alphaworks.ibm.com/tech/pagedetailer

62. Only for windows

63. Pingdom

64. http://tools.pingdom.com

65. Waterfall Diagram

66. WebKit

67. http://webkit.org/

68. Run with Safari 41. Reduce RequestsEvery file produces an HTTP request

69. Fewer requests is better than smaller files

70. Current browsers can dl atleast 2 components per host in parallelReduce Requests (cont’d)Combine sprites together

71. Many images in one file

72. Shift into view via CSS with background-postion

73. Aggregate scripts and styles

74. Built into Drupal

75. More sophisticated modules:

76. http://drupal.org/project/sf_cache

77. http://drupal.org/project/javascript_aggregator

78. Minify aggregated javascriptReduce Requests (cont’d)Using CSS Instead of images

79. -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;

80. Use image data in CSS

81. background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExK cppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) top left no-repeat; )

82. Similarly, use font data in CSS if possible 2. Use a CDNContent Delivery Network

83. Lots of Servers scattered around the world

84. Reduces roundtrip times

85. Using a CDN on http://www.zimmertwins.ca increased the requests/second by 30% from 150 req/s to 200 reqs/s

86. Can be an inexpensive solution to hosting static files (7 – 80 cents/GB)

87. http://akamai.com

88. http://www.simplecdn.com

89. http://cachefly.com

90. http://aws.amazon.com/cloudfront3. Caching

91. Caching (cont’d)Controlled by HTTP Headers

92. Browsers check if the content is ‘fresh’

93. Set Expires header to a date far in the future

94. <location /css>ExpiresActive OnExpiresDefault “access + 1 year”</location>ExpiresByType image/png "access plus 1 year”

95. Change filenames/URL when updating4. GZipCompress text content

96. <IfModulemod_deflate.c>AddOutputFilterByType DEFLATE text/cssapplication/x-javascript</IfModule>

97. Vastly reduces page size

98. http://calarts.edu: 250kb -> 100kb

99. Compress scripts and styles as well5. CSS at the topPlaced in <head>

100. Page renders when all CSS in header is loaded

101. Loading CSS later causes re-rendering and user will see moment of unstyled content.

102. Use <link> instead of @import

103. Supports downloads in parallel

104. More at http://www.stevesouders.com/blog/2009/04/09/dont-use-import/Placed right before </body>

105. Loading scripts blocks page rendering

106. Only one script can be downloaded at a time and will block other downloads

107. Scripts are loaded sequentially

108. Don’t use onfoo event handlers in HTML code

109. Graceful degradation6. JS at the bottom

110. 7. Minify CSS and JSRemove comments and whitespace

111. Great savings, even with Gzip

112. Drupal’s core aggregator or contributed modules:

113. http://drupal.org/project/sf_cache

114. http://drupal.org/project/javascript_aggregator8. ParallelizationRFC: should not allow 2 requests per host in parallel

115. Using multiple hostnames -> higher parallelization

116. Don’t overdo it!

117. Modules to help with this:

118. CDN (http://drupal.org/project/cdn) - Requires Patching or usage of Pressflow to work correctly.

119. Parallel (http://drupal.org/project/parallel) - only usage is with parallel domain pointing to same server with same assets.

120. However, Most current browsers allow more than 2 connections per host

121. Chrome: 6

122. FF 3: 6

123. IE8: 6

124. Safari: 4

125. Opera: 49. Reduce image download sizeOptiPNG, PNGCrush

126. Removes invisible content

127. Lossless Recompression

128. JPEGTran/ImageMagick

129. Remove color profiles, meta data

130. Lossless JPEG operations

131. http://smushit.com - now integrated into Yslow

132. Google Page Speed reports how amount image can be compressed

133. Using imagecache for user submitted content will help with reducing image download size10. Persistent HTTPHTTP supports persistent connections

134. Make sure KeepAlive is not turned off11. Lazy InitializationJavascript takes time to initialize

135. Libraries such as JQuery also count

136. Defer setup work

137. Load images only when they need to be displayed for the first time

138. Load carousel image for first time when it is called

139. Initial load size for images in carousel: 650kb

140. Initial Load size for images in carousel after js lazy load: 250kb

141. Only load content above the fold

142. jQueryPlugin: http://bit.ly/NpZPn

143. Very useful on image-heavy sites12. Small CSS/Javascript Selector TipsUse Selector IDs when possible

144. Indexed in the DOM

145. Try to avoid using .class selectors

146. IE Traverses the entire DOM

147. Use element.class selector

148. Use the nearest parent id as your context for class selectors

149. Try to avoid complicated selectors.

150. If possible have fewer DOM elements on the page.

151. Use Google Page Speed to update inefficient selectors.12. Small optimizationsMove components to a cookieless host

152. Can be solved if using a CDN or a reverse proxy such as Varnish

153. Pressflow also comes with a module that will remove cookies for anonymous users.

154. Remove Etags

155. Setting expires headers will do more good.

156. Load Order

157. Move contents of htaccess to your site config and set allowoverride to none.

158. Use the above only if you have optimized everything else.(Possibly) Related PresentationsDesigning Accessible Drupal Themes

159. Heather Wozniak

160. HTML5 and Drupal Theming

161. Scott Vandehey (spaceninja)

162. Stop Complaining about Views and learn how to theme them already!

163. Helior Colorado

164. Will touch on Sematic Web and reducing the size of the DOM.

165. Theme Packets: A modular approach to theming Drupal

166. Helior ColoradoThank you!Questions? Answers? Tips from you all? Discuss!

Drupal Frontend Performance and Scalability

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Drupal Frontend Performance and Scalability (20)

More from Ashok Modi (8)

Recently uploaded (20)

Drupal Frontend Performance and Scalability

Editor's Notes