• Like
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 364 views
Published

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

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

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
364
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 ● Its 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● Dont 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! BUTLong 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