Download to read offline
More Related Content
Similar to Drupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
- 1. Drupal Frontend PerformanceAshok& Christefano
- 2. August 6, 2010Aboutme (BTMash)Systems programmer.
- 3. Work at CaliforniaInstitute of the Arts.
- 4. Working with Drupalsince 2006 (4.6.x)
- 5. Primarily help withpatches and upgrades for contrib modules on d.o.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. Strong interest inserver optimizationAbout me (Christefano)LADrupal Manager
- 17.
- 18.
- 19. Person of theYear
- 20. D.O and G.D.Owebmaster teams.ResourcesKonstantin Kaefer
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. Do you wantfaster response to the end user per page?
- 27. Do you wantto handle more page views?
- 28. Do you wantto minimize downtime?
- 29. Each is different,though they may be related
- 30. Sometimes, there aresome ‘low hanging fruit’ that are easy to see, that provide noticeable improvement with little effort.
- 31. Gets hard toachieve more performance (more efforts, low return)
- 32. More infrastructure (splittingservers, multiple web/db servers, etc)
- 33.
- 34. Revisions to Architecture(CCK, Views)DiagnosisProper diagnosis is essential before proposing and implementing a solution or you are running blind.
- 35. Must be basedon proper data.
- 36. Analysis of datacollected.
- 37. Can lead towardsa 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.
- 40.
- 41. Time until theDOM is loaded?
- 42. Time until pageis rendered?
- 43. Time until thepage is functional?Tools to measure and diagnoseFirebug’s net panel
- 44. Track loading timefor stylesheets, javascript, images, and total page load time.
- 45.
- 46. Rates a webpagebased on 13 criteria
- 47.
- 48.
- 49. Provides graphs numbersand figures on loading a particular page
- 50.
- 51.
- 52. Provides suggestions onimproving CSS, optimizing image files and javascript
- 53.
- 54. Very powerful (integratedwith Google Page Speed).
- 55. Can track speedof JS. EpisodesProject based on framework by Steve Souders (creator of YSlow) - http://stevesouders.com/episodes/
- 56. Measure timing forWeb 2.0 Applications
- 57. Very granular measurement(measures how long each section
- 58. Drupal Module (http://drupal.org/project/episodes)Non-BrowserToolsAOL Page Test
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Run with Safari41. Reduce RequestsEvery file produces an HTTP request
- 69. Fewer requests isbetter than smaller files
- 70. Current browsers candl atleast 2 components per host in parallelReduce Requests (cont’d)Combine sprites together
- 71. Many images inone file
- 72. Shift into viewvia CSS with background-postion
- 73. Aggregate scripts andstyles
- 74.
- 75.
- 76.
- 77.
- 78. Minify aggregated javascriptReduceRequests (cont’d)Using CSS Instead of images
- 79.
- 80. Use image datain CSS
- 81.
- 82. Similarly, use fontdata in CSS if possible 2. Use a CDNContent Delivery Network
- 83. Lots of Serversscattered around the world
- 84.
- 85. Using a CDNon http://www.zimmertwins.ca increased the requests/second by 30% from 150 req/s to 200 reqs/s
- 86. Can be aninexpensive solution to hosting static files (7 – 80 cents/GB)
- 87.
- 88.
- 89.
- 90.
- 91. Caching (cont’d)Controlled byHTTP Headers
- 92. Browsers check ifthe content is ‘fresh’
- 93. Set Expires headerto 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 whenupdating4. GZipCompress text content
- 96.
- 97.
- 98.
- 99. Compress scripts andstyles as well5. CSS at the topPlaced in <head>
- 100. Page renders whenall CSS in header is loaded
- 101. Loading CSS latercauses re-rendering and user will see moment of unstyled content.
- 102. Use <link> insteadof @import
- 103. Supports downloads inparallel
- 104. More at http://www.stevesouders.com/blog/2009/04/09/dont-use-import/Placedright before </body>
- 105. Loading scripts blockspage rendering
- 106. Only one scriptcan be downloaded at a time and will block other downloads
- 107. Scripts are loadedsequentially
- 108. Don’t use onfooevent handlers in HTML code
- 109. Graceful degradation6. JSat the bottom
- 110. 7. Minify CSSand JSRemove comments and whitespace
- 111. Great savings, evenwith Gzip
- 112. Drupal’s core aggregatoror contributed modules:
- 113.
- 114. http://drupal.org/project/javascript_aggregator8. ParallelizationRFC: shouldnot allow 2 requests per host in parallel
- 115. Using multiple hostnames-> higher parallelization
- 116.
- 117. Modules to helpwith 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 currentbrowsers allow more than 2 connections per host
- 121.
- 122.
- 123.
- 124.
- 125. Opera: 49. Reduceimage download sizeOptiPNG, PNGCrush
- 126.
- 127.
- 128.
- 129. Remove color profiles,meta data
- 130.
- 131. http://smushit.com - nowintegrated into Yslow
- 132. Google Page Speedreports how amount image can be compressed
- 133. Using imagecache foruser submitted content will help with reducing image download size10. Persistent HTTPHTTP supports persistent connections
- 134. Make sure KeepAliveis not turned off11. Lazy InitializationJavascript takes time to initialize
- 135. Libraries such asJQuery also count
- 136.
- 137. Load images onlywhen they need to be displayed for the first time
- 138. Load carousel imagefor first time when it is called
- 139. Initial load sizefor images in carousel: 650kb
- 140. Initial Load sizefor images in carousel after js lazy load: 250kb
- 141. Only load contentabove the fold
- 142.
- 143. Very useful onimage-heavy sites12. Small CSS/Javascript Selector TipsUse Selector IDs when possible
- 144.
- 145. Try to avoidusing .class selectors
- 146. IE Traverses theentire DOM
- 147.
- 148. Use the nearestparent id as your context for class selectors
- 149. Try to avoidcomplicated selectors.
- 150. If possible havefewer DOM elements on the page.
- 151. Use Google PageSpeed to update inefficient selectors.12. Small optimizationsMove components to a cookieless host
- 152. Can be solvedif using a CDN or a reverse proxy such as Varnish
- 153. Pressflow also comeswith a module that will remove cookies for anonymous users.
- 154.
- 155. Setting expires headerswill do more good.
- 156.
- 157. Move contents ofhtaccess to your site config and set allowoverride to none.
- 158. Use the aboveonly if you have optimized everything else.(Possibly) Related PresentationsDesigning Accessible Drupal Themes
- 159.
- 160. HTML5 and DrupalTheming
- 161.
- 162. Stop Complaining aboutViews and learn how to theme them already!
- 163.
- 164. Will touch onSematic Web and reducing the size of the DOM.
- 165. Theme Packets: Amodular approach to theming Drupal
- 166. Helior ColoradoThank you!Questions?Answers? Tips from you all? Discuss!
Editor's Notes
- #10 Show net panel and what is would look like
- #11 Show net panel and what is would look like
- #12 Show net panel and what is would look like
- #13 Show net panel and what is would look like
- #14 Show net panel and what is would look like
- #15 Show net panel and what is would look like
- #16 Show net panel and what is would look like
- #17 Show net panel and what is would look like
- #18 Show net panel and what is would look like
- #19 Show net panel and what is would look like
- #20 Show net panel and what is would look like
- #21 Show net panel and what is would look like
- #22 Show net panel and what is would look like
- #23 Show net panel and what is would look like
- #24 Show net panel and what is would look like
- #25 Show from http://www.webpagetest.org/result/090807_21FQ/1/details/cached/
- #30 Show what top looks like