A very brief dive into the world of template optimisation for the Joomla! Content Management System

1. How fast can you go?
Optimising Joomla! templates
Ruth Cheesley

2. What we will cover
● Why optimise templates
● Top tips for templates
● How to optimise your template
● Compression and minimisation

3. Why optimise templates?

4. Why optimise your templates?
● Users are less
willing to suffer a
slow loading
website
● Conversions are
more likely with
faster loading sites
● It's good practice!

5. What is happening to slow
websites?
Courtesy of Web Performance Today

6. This means that...
● If your website is loading slow you will:
○ Have less conversions (sales)
○ Have a higher bounce rate
○ Have less page views per visit
● Your business may experience a reduction
in sales, poor customer satisfaction, and
frustration for users on slower connections

7. Why focus on the template?
● Templates apply site-wide therefore
problems are far-reaching
● More complex templates and extensions can
mean more files to load - therefore higher
load time

8. Top tips for optimising templates

9. Top tips for templates
● Adhere to current WC3 standards
● Load CSS before Javascript but not
intermingled
● Avoid inline CSS
● Minimise use of large images

10. Optimising your template

11. Key concepts
● Use sprites where you can
● Don't load javascript for the sake of it!
● Combine, compress and minify JS & CSS
● Optimise images

12. What are sprites?
● Combining multiple images
(icons, menu images etc) into
one file
● Use CSS to tell the browser
how to find the correct image to
display (using background-
position)

13. Taming the Javascript beast

14. Taming the Javascript beast
● Only load each javascript file ONCE
● Check extensions which often load their own
JS file, identical to existing JS files but
named differently (e.g. K2.js)
● Load (where possible) from the latest
Google repository
● Be vigilant for multiple versions being loaded
(causes conflicts)

15. Compress, combine & minify CSS & JS

16. Compress, combine & minify CSS &
JS
CSS can look like this 1 body {
line-height: 1;
2
}
3 ol, ul {
4 list-style: none;
5 }
blockquote, q {
6 quotes: none;
7 }
8
9
Or like this, and it still works. 1 body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}
Also, use shorthand!
BUT
Long Version: Shorthand version:
#container { #container {
padding-top: 5px padding: 5px 10px 30px 18px;
padding-right: 10px }
padding-bottom: 30px
padding-left: 18px
}

17. Why compress, combine & minify?
● Compress - significant reduction in size of
files downloaded by browser
● Combine - significant reduction in the
number of files compressed & downloaded
by browser
● Minify - significant reduction in the volume
of data being sent to (and interpreted by) the
browser

18. Establishing a benchmark
● Identify benchmarks to test
against & demonstrate
improvement
● Lots of free tools available
with professional reports
produced
● Demonstrate business case
and return on investment

19. Tools of the trade
● Google minifier - combines, minifies and
caches JS and CSS files on demand - http:
//code.google.com/p/minify
● Yui compressor - compresses JS/CSS -
http://refresh-sf.com/yui

20. Thank you!
Ruth Cheesley
@RCheesley