This document discusses optimizing Joomla templates for high performance. It recommends tools like Firebug and YSlow to measure performance, and optimizing assets like JavaScript, CSS, and images. JavaScript should be moved to the end of the page, unused code removed, and files minified and compressed. CSS should be moved to the head and stripped of unused rules. Images can be optimized by using sprites, compression, and delivery via a CDN. The optimization process involves these techniques applied at each stage of development.

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
www.clickingmad.com

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
http://developer.yahoo.com/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 www.joomla.org?
Cached DNS server
206.123.111.172
User's web browser
Opens TCP connectionre-used
Connection to 206.123.111.172
Request resource: GET / HTTP/1.1
Server
at
Server sends requested resource back 206.123.111.172
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
http://www.browserscope.org/

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
http://code.google.com/apis/ajaxlibs/documentation/

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
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. 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
http://spritegen.website-performance.org/
Upload zip file containing images
Open-source
Written in PHP
Can be run locally

27. Optimising images
Use Smush.it ™

28. Optimising images
Use Smush.it ™

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. http://clickingmad.com

33. This presentation is available for use under the
Joomla! Electronic Documentation License
http://docs.joomla.org/JEDL
Copyright © 2010 Chris Davenport