Improving Drupal’s page loading performance

     Wim Leers ~ http://wimleers.com/

     Drupal.org, IRC, Twitter, LinkedI...
Overview




Sunday, February 8, 2009
Overview

     • Reasons

         • Why does it matter?

         • What is it?

         • Why is it important to Drupal...
Overview

     • Reasons

         • Why does it matter?

         • What is it?

         • Why is it important to Drupal...
Overview

     • Reasons                              • Drupal + YSlow

         • Why does it matter?                • Th...
Overview

     • Reasons                              • Drupal + YSlow

         • Why does it matter?                • Th...
Overview

     • Reasons                              • Drupal + YSlow

         • Why does it matter?                • Th...
Overview

     • Reasons                              • Drupal + YSlow

         • Why does it matter?                • Th...
Why does it matter?

     • Users care about performance!

          • Amazon: 100 ms of extra load time caused a 1% drop ...
What is it?

                                                HTML   Components
     • End user response time


         • ...
Terminology: page loading performance




        page loading or front-end performance: the time it takes to
        load...
Why is it important to Drupal?




Sunday, February 8, 2009
Why is it important to Drupal?

     • The Drupal Experience: happier users (and developers)




Sunday, February 8, 2009
Why is it important to Drupal?

     • The Drupal Experience: happier users (and developers)

     • Drupal’s numbers

   ...
Why is it important to Drupal?

     • The Drupal Experience: happier users (and developers)

     • Drupal’s numbers

   ...
Toolbox

     1. Cuzillion: for understanding browser behavior better (learning)




Sunday, February 8, 2009
Toolbox

     1. Cuzillion: for understanding browser behavior better (learning)

     2. Hammerhead: while developing (ba...
Toolbox

     1. Cuzillion: for understanding browser behavior better (learning)

     2. Hammerhead: while developing (ba...
Toolbox

     1. Cuzillion: for understanding browser behavior better (learning)

     2. Hammerhead: while developing (ba...
Toolbox: 1. Cuzillion

        Tool for quickly constructing web pages to see how components interact




Sunday, February...
Sunday, February 8, 2009
Sunday, February 8, 2009
Sunday, February 8, 2009
Sunday, February 8, 2009
Toolbox: 2. Hammerhead

     • Firebug extension


     • Makes it easier to stay aware of page loading performance while ...
Toolbox: 3. YSlow

        Checks how well a page implements 14 basic rules (actually 34)




Sunday, February 8, 2009
Toolbox: 4. Jiffy

     • Raison d’être: 3rd-party     • Jiffy, on the other hand:
       performance monitoring
       sy...
Terminology: CDN




        A content delivery network (CDN) is a collection of web servers distributed
        across mu...
Drupal + YSlow: things to keep in mind




Sunday, February 8, 2009
Drupal + YSlow: things to keep in mind

     • YSlow score does not necessarily reflect real-world performance, e.g.:


   ...
Drupal + YSlow: things to keep in mind

     • YSlow score does not necessarily reflect real-world performance, e.g.:


   ...
Drupal + YSlow: The Good

     • Conform to YSlow rules through:




Sunday, February 8, 2009
Drupal + YSlow: The Good

     • Conform to YSlow rules through:


         • Doing nothing :)




Sunday, February 8, 2009
Drupal + YSlow: The Good

     • Conform to YSlow rules through:


         • Doing nothing :)


         • Very simple Dr...
Drupal + YSlow: The Good

     • Rule 1: Make fewer HTTP requests




     • Remarks

         • Problem: “dumb bundling” ...
Sunday, February 8, 2009
Default   CSS aggregation   CSS/JS aggregation




Sunday, February 8, 2009
Drupal + YSlow: The Good

     • Rule 3: Add an Expires header




     • Rule 4: Gzip components




     • Rule 5: Put C...
Drupal + YSlow: The Good

     • Rule 6: Put JS at the bottom




     • Rule 7: Avoid CSS expressions




     • Rule 8: ...
Drupal + YSlow: The Good

     • Rule 9: Reduce DNS lookups




     • Remarks

         • External JS (e.g. Google Analyt...
Sunday, February 8, 2009
Drupal + YSlow: The Good

     • Rule 11: Avoid Redirects




     • Rule 12: Remove Duplicate Scripts




Sunday, Februar...
Drupal + YSlow: The Easy Fixes

     • Conform to YSlow rules through:




Sunday, February 8, 2009
Drupal + YSlow: The Easy Fixes

     • Conform to YSlow rules through:


         • Modules




Sunday, February 8, 2009
Drupal + YSlow: The Easy Fixes

     • Conform to YSlow rules through:


         • Modules


         • Drupal core/modul...
Drupal + YSlow: The Easy Fixes

     • Conform to YSlow rules through:


         • Modules


         • Drupal core/modul...
Drupal + YSlow: The Easy Fixes

     • Rule 1: Make fewer HTTP requests




     • How to fix?

         • Intelligent bund...
Drupal + YSlow: The Easy Fixes

     • Rule 4: Gzip components




     • How to fix?

         • Apache 2: edit your .htac...
Drupal + YSlow: The Easy Fixes

     • Rule 10: Minify JavaScript




     • Remarks

         • Use JSMIN, not Packer!

 ...
Drupal + YSlow: The Hard Problems




Sunday, February 8, 2009
Drupal + YSlow: The Hard Problems

     • Rule 2: Use a CDN




     • The Tricky Thing

         • Far future Expires hea...
Drupal + YSlow: The Hard Problems

     • Rule 6: Put JS at the bottom




     • The Tricky Thing

         • JS that aff...
Drupal + YSlow: The Hard Problems

     • Rule 14: Make AJAX Cacheable




     • Remarks

         • Possible today, but ...
Drupal + YSlow: recap

     • Many things are already good out-of-the-box

     • Easy fixes

         • Intelligent bundli...
Other optimizations

     • Image optimization! (PNG-8, PNG instead of GIF, progressive JPEG …)


     • Prefetching (part...
Bachelor thesis

        I’ll solve 2 of the 3 hard problems: CDN integration and JS at the bottom.



        Hasselt Uni...
Bachelor thesis: JS at the bottom

     • Not enough work/too easy for an entire bachelor thesis


     • Will be a core p...
Bachelor thesis: CDN integration

     • Plenty of work for a bachelor thesis

     • 3 parts

         1. Daemon for sync...
Bachelor thesis: CDN integration

     • Daemon goals

         • Ability to use any CDN transparently (FTP, rsync, Amazon...
Bachelor thesis: collaborating companies

        The following Drupal companies       The following CDN companies
       ...
Questions?


        Relevant links:


         • This presentation – along with relevant links – can be found online at
 ...
Upcoming SlideShare
Loading in …5
×

Improving Drupal's Page Loading Performance

6,281 views
6,197 views

Published on

As many already know by now, 80 to 90% of the response time of a web page is dependent on the page loading performance (the fetching of the HTML and all files referenced). This is different from the page rendering performance, which is just the time it takes to generate the HTML. Drupal already tackles several issues pretty well. But there's more we can do!
You can solve several additional problems today, just by installing extra modules (such as Support file Cache), by configuring Apache (e.g. gzipped output), or by configuring some shell scripts (e.g. to optimize image files). I'll explain you how to apply these solutions.

For most Drupal sites, CDN integration and putting JS at the bottom of the page have the biggest impact. However, these two techniques are currently very hard to apply properly to Drupal: both require hacks to Drupal core. My aim is to solve both of these problems as part of my bachelor thesis. I'll explain how I expect to solve this and the impact of both issues on your site.

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
6,281
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
117
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide
  • Student at Hasselt University
    Freelance Drupal developer
    Intern at Mollom




  • Popularity numbers: d.o usage statistics

    Conclusion: important for:
    - Drupal project growth
    - More Happy People


  • Create a simple test: the effect of an inline script between 2 images in different browsers.
    Webkit: executes script, then displays images
    Firefox: displays first image, executes script, displays second image

  • Notice how both images finish loading at the same time.
  • Notice how the second image finishes loading about 2 seconds after the first one.

  • I’ll only cover the 14 that were first published
  • - Apache logs => database (script on cron) => reports
    - Mark (start timing) & measure (measure elapsed time) approach
    - June 2008



  • - dumb bundling reduces the effectiveness of aggregation



  • script downloading? -> no other downloads are started, not even from other domain names
    == blocks parallel downloads






  • - Packer:
    * typically higher compression ratio, but:
    * adds a decompression delay on every page load!


  • script downloading? -> no other downloads are started, not even from other domain names
    == blocks parallel downloads









  • Improving Drupal's Page Loading Performance

    1. 1. Improving Drupal’s page loading performance Wim Leers ~ http://wimleers.com/ Drupal.org, IRC, Twitter, LinkedIn: wimleers Sunday, February 8, 2009
    2. 2. Overview Sunday, February 8, 2009
    3. 3. Overview • Reasons • Why does it matter? • What is it? • Why is it important to Drupal? Sunday, February 8, 2009
    4. 4. Overview • Reasons • Why does it matter? • What is it? • Why is it important to Drupal? • Toolbox • Cuzillion • Hammerhead • YSlow • Jiffy Sunday, February 8, 2009
    5. 5. Overview • Reasons • Drupal + YSlow • Why does it matter? • The Good • What is it? • The Easy Fixes • Why is it important to Drupal? • The Hard Problems • Toolbox • Cuzillion • Hammerhead • YSlow • Jiffy Sunday, February 8, 2009
    6. 6. Overview • Reasons • Drupal + YSlow • Why does it matter? • The Good • What is it? • The Easy Fixes • Why is it important to Drupal? • The Hard Problems • Toolbox • Other optimizations • Cuzillion • Hammerhead • YSlow • Jiffy Sunday, February 8, 2009
    7. 7. Overview • Reasons • Drupal + YSlow • Why does it matter? • The Good • What is it? • The Easy Fixes • Why is it important to Drupal? • The Hard Problems • Toolbox • Other optimizations • Cuzillion • Bachelor thesis • Hammerhead • JS at the bottom • YSlow • CDN integration • Jiffy Sunday, February 8, 2009
    8. 8. Overview • Reasons • Drupal + YSlow • Why does it matter? • The Good • What is it? • The Easy Fixes • Why is it important to Drupal? • The Hard Problems • Toolbox • Other optimizations • Cuzillion • Bachelor thesis • Hammerhead • JS at the bottom • YSlow • CDN integration • Jiffy • Questions? Sunday, February 8, 2009
    9. 9. Why does it matter? • Users care about performance! • Amazon: 100 ms of extra load time caused a 1% drop in sales • Google: 500 ms of extra load time caused 20% fewer searches • Fast web sites are rewarded, slow web sites are punished source: http://www.slideshare.net/stubbornella/designing-fast-websites-presentation Sunday, February 8, 2009
    10. 10. What is it? HTML Components • End user response time • 10-20%: the HTML document (mix of back-end + front-end) 90% • 80-90%: the components in the page (front-end only) • More effective to focus on front-end 10% performance! source: http://stevesouders.com/hpws/ Sunday, February 8, 2009
    11. 11. Terminology: page loading performance page loading or front-end performance: the time it takes to load a web page and all its components (CSS, JS, images …) includes page rendering or back-end performance: the time the server needs to render a web page Sunday, February 8, 2009
    12. 12. Why is it important to Drupal? Sunday, February 8, 2009
    13. 13. Why is it important to Drupal? • The Drupal Experience: happier users (and developers) Sunday, February 8, 2009
    14. 14. Why is it important to Drupal? • The Drupal Experience: happier users (and developers) • Drupal’s numbers • Big, high-traffic web sites • Popular (>125,000 sites): optimization affects many sites Sunday, February 8, 2009
    15. 15. Why is it important to Drupal? • The Drupal Experience: happier users (and developers) • Drupal’s numbers • Big, high-traffic web sites • Popular (>125,000 sites): optimization affects many sites • Drupal is international (thanks to i18n/L10n) • International audiences: high network latencies • Developing countries: low-speed connections Sunday, February 8, 2009
    16. 16. Toolbox 1. Cuzillion: for understanding browser behavior better (learning) Sunday, February 8, 2009
    17. 17. Toolbox 1. Cuzillion: for understanding browser behavior better (learning) 2. Hammerhead: while developing (basic profiling/awareness) Sunday, February 8, 2009
    18. 18. Toolbox 1. Cuzillion: for understanding browser behavior better (learning) 2. Hammerhead: while developing (basic profiling/awareness) 3. YSlow: while improving page loading performance (detailed profiling) Sunday, February 8, 2009
    19. 19. Toolbox 1. Cuzillion: for understanding browser behavior better (learning) 2. Hammerhead: while developing (basic profiling/awareness) 3. YSlow: while improving page loading performance (detailed profiling) 4. Jiffy: for measuring real-world page loading performance (big scale profiling) Sunday, February 8, 2009
    20. 20. Toolbox: 1. Cuzillion Tool for quickly constructing web pages to see how components interact Sunday, February 8, 2009
    21. 21. Sunday, February 8, 2009
    22. 22. Sunday, February 8, 2009
    23. 23. Sunday, February 8, 2009
    24. 24. Sunday, February 8, 2009
    25. 25. Toolbox: 2. Hammerhead • Firebug extension • Makes it easier to stay aware of page loading performance while developing Sunday, February 8, 2009
    26. 26. Toolbox: 3. YSlow Checks how well a page implements 14 basic rules (actually 34) Sunday, February 8, 2009
    27. 27. Toolbox: 4. Jiffy • Raison d’être: 3rd-party • Jiffy, on the other hand: performance monitoring systems (Gomez, Keynote): • Can measure every page load if desired • Limited number of measurement points • Runs in the browser: it’s JS code • Real-world browsers • No real-world browsers used • Can measure anything • Paid • Open source! Jiffy.mark(quot;slow3PStartquot;); jQuery.getScript(‘http://slowsite.com/slow.js’); Jiffy.measure(quot;slow3PDonequot;, quot;slow3PStartquot;); Sunday, February 8, 2009
    28. 28. Terminology: CDN A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. source: http://developer.yahoo.com/performance/rules.html#cdn Sunday, February 8, 2009
    29. 29. Drupal + YSlow: things to keep in mind Sunday, February 8, 2009
    30. 30. Drupal + YSlow: things to keep in mind • YSlow score does not necessarily reflect real-world performance, e.g.: • Using a CDN, but a slow or non-global one Sunday, February 8, 2009
    31. 31. Drupal + YSlow: things to keep in mind • YSlow score does not necessarily reflect real-world performance, e.g.: • Using a CDN, but a slow or non-global one • Striving to a perfect YSlow score is good • Especially in Drupal core: affects many sites and developers • But don’t forget to check real-world performance! Sunday, February 8, 2009
    32. 32. Drupal + YSlow: The Good • Conform to YSlow rules through: Sunday, February 8, 2009
    33. 33. Drupal + YSlow: The Good • Conform to YSlow rules through: • Doing nothing :) Sunday, February 8, 2009
    34. 34. Drupal + YSlow: The Good • Conform to YSlow rules through: • Doing nothing :) • Very simple Drupal core configuration changes Sunday, February 8, 2009
    35. 35. Drupal + YSlow: The Good • Rule 1: Make fewer HTTP requests • Remarks • Problem: “dumb bundling” of CSS/JS files (see later) • How to enable? • Enable at admin/settings/performance Sunday, February 8, 2009
    36. 36. Sunday, February 8, 2009
    37. 37. Default CSS aggregation CSS/JS aggregation Sunday, February 8, 2009
    38. 38. Drupal + YSlow: The Good • Rule 3: Add an Expires header • Rule 4: Gzip components • Rule 5: Put CSS at the top Sunday, February 8, 2009
    39. 39. Drupal + YSlow: The Good • Rule 6: Put JS at the bottom • Rule 7: Avoid CSS expressions • Rule 8: Make JS and CSS external Sunday, February 8, 2009
    40. 40. Drupal + YSlow: The Good • Rule 9: Reduce DNS lookups • Remarks • External JS (e.g. Google Analytics) should be cached on your server • How to enable? • Proper setting in Google Analytics module • Hacking other modules? Sunday, February 8, 2009
    41. 41. Sunday, February 8, 2009
    42. 42. Drupal + YSlow: The Good • Rule 11: Avoid Redirects • Rule 12: Remove Duplicate Scripts Sunday, February 8, 2009
    43. 43. Drupal + YSlow: The Easy Fixes • Conform to YSlow rules through: Sunday, February 8, 2009
    44. 44. Drupal + YSlow: The Easy Fixes • Conform to YSlow rules through: • Modules Sunday, February 8, 2009
    45. 45. Drupal + YSlow: The Easy Fixes • Conform to YSlow rules through: • Modules • Drupal core/module configuration Sunday, February 8, 2009
    46. 46. Drupal + YSlow: The Easy Fixes • Conform to YSlow rules through: • Modules • Drupal core/module configuration • Web server configuration Sunday, February 8, 2009
    47. 47. Drupal + YSlow: The Easy Fixes • Rule 1: Make fewer HTTP requests • How to fix? • Intelligent bundling of CSS/JS files: Support file Cache module (Drupal 5 only) Sunday, February 8, 2009
    48. 48. Drupal + YSlow: The Easy Fixes • Rule 4: Gzip components • How to fix? • Apache 2: edit your .htacces/httpd.conf AddOutputFilterByType DEFLATE text/css application/x-javascript • Use a CDN • Drupal 7: core patch? Sunday, February 8, 2009
    49. 49. Drupal + YSlow: The Easy Fixes • Rule 10: Minify JavaScript • Remarks • Use JSMIN, not Packer! • How to fix? • Javascript Aggregator module (Drupal 5 & 6) Sunday, February 8, 2009
    50. 50. Drupal + YSlow: The Hard Problems Sunday, February 8, 2009
    51. 51. Drupal + YSlow: The Hard Problems • Rule 2: Use a CDN • The Tricky Thing • Far future Expires headers are more effective, but require unique filenames • How to fix? • Drupal core patch: file_url() • CDN integration module Sunday, February 8, 2009
    52. 52. Drupal + YSlow: The Hard Problems • Rule 6: Put JS at the bottom • The Tricky Thing • JS that affects the style of a web page cannot be at the bottom • How to fix? • Manual hacks :( • Drupal core patch necessary to change default location (see later) Sunday, February 8, 2009
    53. 53. Drupal + YSlow: The Hard Problems • Rule 14: Make AJAX Cacheable • Remarks • Possible today, but structured approach would be better • How to fix? • Drupal 7 will support multiple rendering formats! • Gzip-ability should be a follow-up patch Sunday, February 8, 2009
    54. 54. Drupal + YSlow: recap • Many things are already good out-of-the-box • Easy fixes • Intelligent bundling of CSS/JS • Gzipping components • JS minification • Hard problems • Using a CDN • Putting JS at the bottom • Make AJAX cacheable Sunday, February 8, 2009
    55. 55. Other optimizations • Image optimization! (PNG-8, PNG instead of GIF, progressive JPEG …) • Prefetching (part of the HTML5 specification) <link rel=quot;prefetchquot; href=quot;/images/big.jpegquot;> • The 20 new rules (post- and pre-load components, flush the buffer early …) •… Sunday, February 8, 2009
    56. 56. Bachelor thesis I’ll solve 2 of the 3 hard problems: CDN integration and JS at the bottom. Hasselt University has allowed me to work in an open source fashion and all of my work will therefor be available for everybody. Thanks! My promotor will be Prof. dr. Wim Lamotte and I will be guided by Stijn Agten and Maarten Wijnants. Sunday, February 8, 2009
    57. 57. Bachelor thesis: JS at the bottom • Not enough work/too easy for an entire bachelor thesis • Will be a core patch • Change the default location to “footer” • Clear guidelines on how to separate “style JS” from “non-style JS” Sunday, February 8, 2009
    58. 58. Bachelor thesis: CDN integration • Plenty of work for a bachelor thesis • 3 parts 1. Daemon for synchronization, written in Python (back-end) 2. Drupal core patch to unify generation of file URLs and allow to alter them 3. Drupal module for administration and reporting (front-end) Sunday, February 8, 2009
    59. 59. Bachelor thesis: CDN integration • Daemon goals • Ability to use any CDN transparently (FTP, rsync, Amazon S3 …) • Ability to mix CDNs and static file servers • Post-processing: image optimization, CSS/JS compression … transcoding? • Detect files instantly through file system event monitor (inotify on Linux) • Other use cases: backup system, automatically sharing files within LAN … Sunday, February 8, 2009
    60. 60. Bachelor thesis: collaborating companies The following Drupal companies The following CDN companies will be evaluating my work and will be providing their services giving feedback. for free for testing purposes. A big thanks to all of them! Sunday, February 8, 2009
    61. 61. Questions? Relevant links: • This presentation – along with relevant links – can be found online at http://wimleers.com/talk/fosdem-2009 • You can track my bachelor thesis’ progress at http://wimleers.com/tags/bachelor-thesis • Questions & feedback are welcome! Contact me via http://wimleers.com/contact Sunday, February 8, 2009

    ×