Your SlideShare is downloading. ×
Template tuning for high performance
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Template tuning for high performance


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Template tuning for high performance Chris Davenport Website performance optimisation for Joomla template developers
  • 2. About me Joomla Leadership Team Production Working Group Documentation Coordinator Web developer Clickingmad Limited
  • 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. Performance matters +500 ms -20% traffic @ Google +100 ms -1% sales @ Amazon
  • 5. Google takes site speed into account
  • 6. What tools should you use? You can't manage control what you can't measure +
  • 7. Using the Firebug Net Panel
  • 8. Using YSlow
  • 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. Anatomy of a single request Where is 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. So, why the staircase?
  • 12. Optimising JavaScript What's the problem? CSS JavaScript CSS JavaScript blocks other browser activity
  • 13. Optimising JavaScript Parallel download limits
  • 14. Optimising JavaScript Older browsers have lower limits Expect at least 25% of visitors to have low parallel download limits
  • 15. Optimising JavaScript Move JavaScript to the end JavaScript here Moved here
  • 16. Optimising JavaScript Move JavaScript to the end
  • 17. Optimising JavaScript Use Google AJAX Libraries API Make sure you request the right version
  • 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. Optimising JavaScript Minify JavaScript
  • 20. Optimising JavaScript Minify and compress JavaScript 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. Optimising JavaScript Minify and compress JavaScript Modify your template index.php Note: Minify also sets far future expiry date headers
  • 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. Optimising CSS
  • 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. Optimising images Use CSS sprites Sprites reduce the number of HTTP requests Removes latency when applying hover effects
  • 26. Optimising images Generating CSS sprites Upload zip file containing images Open-source Written in PHP Can be run locally
  • 27. Optimising images Use ™
  • 28. Optimising images Use ™
  • 29. Other Optimisations Content Delivery Networks
  • 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. Questions?
  • 32.
  • 33. This presentation is available for use under the Joomla! Electronic Documentation License Copyright © 2010 Chris Davenport