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


Published on

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

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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: //● Yui compressor - compresses JS/CSS -
  20. 20. Thank you!Ruth Cheesley@RCheesley