How fast can you go?

Optimising Joomla! templates

Ruth Cheesley

What we will cover

● Why optimise templates

● Top tips for templates

● How to optimise your template

● Compression and minimisation

Why optimise templates?

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!

What is happening to slow websites?

Courtesy of Web Performance Today

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

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

Top tips for optimising templates

Top tips for templates

● Adhere to current WC3 standards

● Load CSS before Javascript but not intermingled

● Avoid inline CSS

● Minimise use of large images

Optimising your template

Key concepts

● Use sprites where you can

● Don't load javascript for the sake of it!

● Combine, compress and minify JS & CSS

● Optimise images

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)

Taming the Javascript beast

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)

Compress, combine & minify CSS & JS

Compress, combine & minify CSS & JS

123456789

body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}

1 body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}Or like this, and it still works.

CSS can look like this

BUTAlso, use shorthand!

Long Version:#container { padding-top: 5px padding-right: 10px padding-bottom: 30px padding-left: 18px}

Shorthand version:#container { padding: 5px 10px 30px 18px;}

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

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

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

Thank you!

Ruth Cheesley

@RCheesley