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
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
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)
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)
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