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

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

on

  • 463 views

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

Statistics

Views

Total Views
463
Views on SlideShare
454
Embed Views
9

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 9

http://www.ecademy.com 6
http://www.scoop.it 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    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 Presentation Transcript

    • 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 minimisation
    • Why optimise templates?
    • 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!
    • 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 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
    • 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
    • Top tips for optimising templates
    • Top tips for templates● Adhere to current WC3 standards● Load CSS before Javascript but not intermingled● Avoid inline CSS● Minimise use of large images
    • Optimising your template
    • Key concepts● Use sprites where you can● Dont load javascript for the sake of it!● Combine, compress and minify JS & CSS● Optimise images
    • 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)
    • Taming the Javascript beast
    • 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)
    • Compress, combine & minify CSS & JS
    • 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}
    • 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
    • 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
    • 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
    • Thank you!Ruth Cheesley@RCheesley