Crossing the line first ... or last?

Optimising Joomla! Content Management System

Ruth Cheesley

What we will cover

● What is 'optimising' and why bother

● Establishing a benchmark

● Getting started with Joomla! optimisation

● Caching with Joomla!

● Useful extensions

What is optimisation?

What is optimising?

Optimising is the the process through which

we make something more effective, or

more efficient - getting the most out of it

What do we mean by optimising?

● Identifying 'bottlenecks' which cause a site to load slower

● Cross-browser, cross-platform, cross-device

● Make your website faster for visitors

Why bother with optimisation?

Why should I bother with optimising?

● When pages load slowly, business metrics drop - including

■ Conversions■ Bounce rate■ Page views per visit

● This drop is more significant now than two years ago - users are less willing to suffer a slow loading website

Courtesy of Web Performance Today

Selling the benefits

● Better for visitors

● More sales or conversions

● Better reputation

● Less complaints

● ? Search Engines

Show me an example!

An example - Walmart - Overall Site

Customers who purchased

viewed pages which loaded

twice as fast as non-purchasing

customers

Courtesy of Web Performance Today

An example - Walmart - Single Page

This correlation is true even at the individual page

level, as well as at an overall site

level

Courtesy of Web Performance Today

An example - Walmart - Categories

At department level (category pages) buyers were served

pages quicker than non-buyers

Courtesy of Web Performance Today

An example - Walmart - Bounce rate

Bounce rate strongly

correlates to page load speed

What about my website?

How does this apply to my website?

● Customers may not use your site if it is slow = less revenue

● Small changes can yield significant performance returns

● Joomla! can be optimised!

Establishing a benchmark

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

Optimising Joomla! - Getting started

1. BACK UP!

2. Benchmark

3. Spring clean

4. Identify potential issues

5. Get up to date

6. Re-test after each change

Getting started - Spring Clean

● Remove any extensions you are not using

● Disable any plugins and modules not in use

Remember to clear the cache and retest after each change you make - and document any changes

Getting started - Identify issues

● New problems - suspect recently installed extensions

● Identify existing problems from benchmark scans

Remember to clear the cache and retest after each change you make - and document any changes

Get up to date

● Update Joomla! to latest stable release

● Update all extensions (including modules, plugins and templates)

Remember to clear the cache and retest after each change you make - and document any changes

Caching with Joomla!

What is caching?

"To store away for future use"

In web technologies, caching is used to:

"Store web objects [such as pages, images, and other files] closer to the user to allow faster access, thus improving the user experience of

the visitor"

Why cache a Joomla! site?

● Reduces load time

● Reduce server load

● Faster website

Types of caching with Joomla!

1. Page caching

2. System caching

3. Module caching

Page caching

Page caching

● Takes a copy of each page as displayed

● Enabled via Plugins->System

Use browser caching option

Joomla! sends a 304 'not modified' header

to browser if page has been cached

Why use page caching?

● If visitors regularly visit the same page several times it can make the site a little more responsive

● It can cause big problems if you have pages with dynamic content, as the old content will be served for the period of the cache.

'Global' caching

'Global' caching

● Takes a copy of each page as displayed

● Config>System>Cache settings

● Has two options○ Conservative○ Progressive

More about global caching

Unique cache per visitor

Conservative cache shows all visitors to your site the same exact cached content.

Progressive caching however caches the content for each user uniquely.

Toggling module caching

If you want to toggle caching on/off with individual modules, set the global cache type to Conservative and then use the module's cache type to enable / disable caching.

Progressive caching overrides a specific modules cache settings.

Logged in users and cache

Regardless of conservative vs. progressive caching, logged in users do not see cached module content.

Module cached is based upon the current page

Each module that is cached can have a different cached version for each page.

For example, if you had a "related questions" module, a cached version of this will work (it would show a cached version of related articles for each different article).

Courtesy of InMotion Hosting

Clearing and purging cache

● Clear cache will delete ALL cached files

● Purge expired cache will delete all cache files which are older than the specified cache time - e.g. if the cache time is 30 minutes it will delete all cache files older than 30 minutes

● Purging expired cache is more resource intensive, as Joomla! has to identify which files to delete

Things to bear in mind

● Progressive caching can result in VERY large cache folders

● Progressive caching on LARGE websites may cause problems unless you have a well-resourced dedicated server

● Purging expired cache should be done regularly, but at a low-traffic time due to the resource usage

Other tips

Other performance tips

● GZip compression (Config>Server>GZip compression) may help reduce load time BUT there is a concurrent increase in server load.

● GZip compression compresses any text files (php, html, css, js etc), delivers to the browser, which then decompresses

● GZip when not necessary and supported by a well-resourced server can slow a site

Image size & format

● Images should be in PNG, and resized to the appropriate dimensions

● Do not resize in HTML - it requires the browser to download the whole image then resize

● Optimise your images for the web

● If copyrighted to you, ensure you embed sufficient identifying features in case of misuse

Useful extensions

Extensions of note - caching

JotCache - Int

● Close control of caching by page

● Page exclusion

● Exclude mobile users

Cache cleaner - Beg

● One-click cache clean for admin

● Pro version includes cron job for automated clearing

Extensions of note - CSS/JS

JBetolo - ExpertMerge, compress & minify CSS/JS

Correct HTTP header

CDN-Friendly

htaccess static content rules

JCH Optimise - IntMerge, compress & minify CSS/JS

Background image spritesSupports @import

Option to exclude files

Will you be first across the line?

Thank you!

Ruth Cheesley

@RCheesley