Download - 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