0
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 minimis...
Why optimise templates?
Why optimise your templates?                 ● Users are less                   willing to suffer a                   slow...
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 r...
Why focus on the template?● Templates apply site-wide therefore  problems are far-reaching● More complex templates and ext...
Top tips for optimising templates
Top tips for templates● Adhere to current WC3 standards● Load CSS before Javascript but not  intermingled● Avoid inline CS...
Optimising your template
Key concepts● Use sprites where you can● Dont load javascript for the sake of it!● Combine, compress and minify JS & CSS● ...
What are sprites?● Combining multiple images  (icons, menu images etc) into  one file● Use CSS to tell the browser  how to...
Taming the Javascript beast
Taming the Javascript beast● Only load each javascript file ONCE● Check extensions which often load their own  JS file, id...
Compress, combine & minify CSS & JS
Compress, combine & minify CSS &  JS   CSS can look like this             1     body {                                    ...
Why compress, combine & minify?● Compress - significant reduction in size of  files downloaded by browser● Combine - signi...
Establishing a benchmark             ● Identify benchmarks to test               against & demonstrate               impro...
Tools of the trade● Google minifier - combines, minifies and  caches JS and CSS files on demand - http:  //code.google.com...
Thank you!Ruth Cheesley@RCheesley
Upcoming SlideShare
Loading in...5
×

Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies

418

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
418
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies"

  1. 1. How fast can you go? Optimising Joomla! templates Ruth Cheesley
  2. 2. What we will cover● Why optimise templates● Top tips for templates● How to optimise your template● Compression and minimisation
  3. 3. Why optimise templates?
  4. 4. Why optimise your templates? ● Users are less willing to suffer a slow loading website ● Conversions are more likely with faster loading sites ● Its good practice!
  5. 5. What is happening to slow websites?Courtesy of Web Performance Today
  6. 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. 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. 8. Top tips for optimising templates
  9. 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. 10. Optimising your template
  11. 11. Key concepts● Use sprites where you can● Dont load javascript for the sake of it!● Combine, compress and minify JS & CSS● Optimise images
  12. 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. 13. Taming the Javascript beast
  14. 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. 15. Compress, combine & minify CSS & JS
  16. 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! BUTLong Version: Shorthand version:#container { #container { padding-top: 5px padding: 5px 10px 30px 18px; padding-right: 10px } padding-bottom: 30px padding-left: 18px}
  17. 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. 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. 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. 20. Thank you!Ruth Cheesley@RCheesley
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×