Template tuning for high performance


Published on

Presentation given at the J and Beyond conference on 31 May 2010.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Template tuning for high performance

  1. 1. Template tuning for high performance Chris Davenport Website performance optimisation for Joomla template developers
  2. 2. About me Joomla Leadership Team Production Working Group Documentation Coordinator Web developer Clickingmad Limited www.clickingmad.com
  3. 3. Quick overview Template tuning for high performance: Optimisation for Joomla template developers (not looking at things like PHP, SQL or server optimisation) Tools to measure performance Optimising JavaScript Optimising CSS Optimising images Optimisation process
  4. 4. Performance matters +500 ms -20% traffic @ Google +100 ms -1% sales @ Amazon
  5. 5. Google takes site speed into account
  6. 6. What tools should you use? You can't manage control what you can't measure +
  7. 7. Using the Firebug Net Panel
  8. 8. Using YSlow http://developer.yahoo.com/yslow/
  9. 9. Web page timeline c. 20% c. 80% 80% of the time to render a page is waiting for files to download This is the only time where Joomla Is directly involved
  10. 10. Anatomy of a single request Where is www.joomla.org? Cached DNS server User's web browser Opens TCP connectionre-used Connection to Request resource: GET / HTTP/1.1 Server at Server sends requested resource back Closes TCP connection Connection re-used
  11. 11. So, why the staircase?
  12. 12. Optimising JavaScript What's the problem? CSS JavaScript CSS JavaScript blocks other browser activity
  13. 13. Optimising JavaScript Parallel download limits http://www.browserscope.org/
  14. 14. Optimising JavaScript Older browsers have lower limits Expect at least 25% of visitors to have low parallel download limits
  15. 15. Optimising JavaScript Move JavaScript to the end JavaScript here Moved here
  16. 16. Optimising JavaScript Move JavaScript to the end
  17. 17. Optimising JavaScript Use Google AJAX Libraries API Make sure you request the right version http://code.google.com/apis/ajaxlibs/documentation/
  18. 18. Optimising JavaScript Remove unused JavaScript For example, if you don't need MooTools, remove it. Note: This code can be placed anywhere in the template index.php to prevent MooTools from loading.
  19. 19. Optimising JavaScript Minify JavaScript
  20. 20. Optimising JavaScript Minify and compress JavaScript http://code.google.com/p/minify/ Download the Minify zip file Extract into your template root directory Set paths in min/config.php Set up groups of files in min/groupsConfig.php
  21. 21. Optimising JavaScript Minify and compress JavaScript Modify your template index.php Note: Minify also sets far future expiry date headers
  22. 22. Optimising CSS Move CSS to the head Remove unnecessary CSS rules Merge, minify and compress CSS files (Minify script used for JavaScript also supports CSS) Consider using a Content Delivery Network (CDN)
  23. 23. Optimising CSS
  24. 24. Optimising images Start downloading large images early Merge and compress image files Serve images from a cookie-free domain Consider using a Content Delivery Network (CDN)
  25. 25. Optimising images Use CSS sprites Sprites reduce the number of HTTP requests Removes latency when applying hover effects
  26. 26. Optimising images Generating CSS sprites http://spritegen.website-performance.org/ Upload zip file containing images Open-source Written in PHP Can be run locally
  27. 27. Optimising images Use Smush.it ™
  28. 28. Optimising images Use Smush.it ™
  29. 29. Other Optimisations Content Delivery Networks
  30. 30. Suggested optimisation process At all times during development Keep CSS in the head and JavaScript in the tail During final stages of site build Create CSS sprite images Update CSS to use the sprites and test Crush images Minify and compress CSS Update template index.php and test Minify and compress JavaScript Update template index.php and test After site has gone live Evaluate, reflect and improve
  31. 31. Questions?
  32. 32. http://clickingmad.com
  33. 33. This presentation is available for use under the Joomla! Electronic Documentation License http://docs.joomla.org/JEDL Copyright © 2010 Chris Davenport
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.