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.
Template tuning for high performance: Optimisation tips for Joomla template developers
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
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
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.
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)
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
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