Your SlideShare is downloading. ×
0
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
Joomla User Group Suffolk - July 2012 - Template Optimisation by Ruth Cheesley, Virya Technologies
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.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

403

Published on

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
403
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
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

×