Template tuning for high performance

Chris Davenport

Template tuningfor high performance

Website performance optimisationfor Joomla template developers

Web developerClickingmad Limitedwww.clickingmad.com

Joomla Leadership TeamProduction Working GroupDocumentation Coordinator

About me

Tools to measure performance

Optimising JavaScript

Optimising CSS

Optimising images

Optimisation process

Quick overview

Template tuning for high performance:Optimisation for Joomla template developers(not looking at things like PHP, SQL or server optimisation)

+500 ms -20% traffic @ Google

+100 ms -1% sales @ Amazon

Performance matters

Google takes site speed into account

You can't manage control what you can't measure

What tools should you use?

+

Using the Firebug Net Panel

Using YSlow

http://developer.yahoo.com/yslow/

This is the only time whereJoomla Is directly involved

80% of the time to render a pageis waiting for files to download

Web page timeline

c. 20% c. 80%

Where is www.joomla.org?

Opens TCP connection to 206.123.111.172

Request resource: GET / HTTP/1.1

Server sends requested resource back

Serverat

206.123.111.172

DNS server

Use

r' s w

eb

bro

wse

r 206.123.111.172

Anatomy of a single request

Closes TCP connection

Connection re-used

Cached

Connection re-used

So, why the staircase?

Optimising JavaScript

JavaScript

CSS

JavaScript blocks other browser activity

CSS

What's the problem?

http://www.browserscope.org/

Optimising JavaScriptParallel download limits

Expect at least 25% of visitors to havelow parallel download limits

Optimising JavaScriptOlder browsers have lower limits

JavaScript here

Moved here

Optimising JavaScriptMove JavaScript to the end

Optimising JavaScriptMove JavaScript to the end

http://code.google.com/apis/ajaxlibs/documentation/

Make sure you requestthe right version

Optimising JavaScriptUse Google AJAX Libraries API

Note: This code can be placed anywhere in the template index.php to prevent MooTools from loading.

For example, if you don't need MooTools, remove it.

Optimising JavaScriptRemove unused JavaScript

Optimising JavaScriptMinify JavaScript

http://code.google.com/p/minify/

Download the Minify zip file

Extract into your template root directory

Set paths in min/config.php

Set up groups of files in min/groupsConfig.php

Optimising JavaScriptMinify and compress JavaScript

Modify your template index.php

Note: Minify also sets far future expiry date headers

Optimising JavaScriptMinify and compress JavaScript

Optimising CSS

Consider using a Content Delivery Network (CDN)

Move CSS to the head

Remove unnecessary CSS rules

Merge, minify and compress CSS files(Minify script used for JavaScript also supports CSS)

Optimising CSS

Optimising images

Start downloading large images early

Consider using a Content Delivery Network (CDN)

Merge and compress image files

Serve images from a cookie-free domain

Use CSS sprites

Sprites reduce the number of HTTP requestsRemoves latency when applying hover effects

Optimising images

http://spritegen.website-performance.org/

Upload zip file containing images

Open-sourceWritten in PHPCan be run locally

Generating CSS spritesOptimising images

Use Smush.it ™Optimising images

Use Smush.it ™Optimising images

Other OptimisationsContent Delivery Networks

Suggested optimisation process

Create CSS sprite images

Update CSS to use the sprites and test

Crush images

Minify and compress CSS

Update template index.php and test

Minify and compress JavaScript

Update template index.php and test

Keep CSS in the head and JavaScript in the tail

During final stages of site build

At all times during development

After site has gone live

Evaluate, reflect and improve

Questions?

http://clickingmad.com

This presentation is available for use under the

Joomla! Electronic Documentation License

http://docs.joomla.org/JEDL

Copyright © 2010 Chris Davenport