Site Speed Optimisation for JWC2012

A presentation at Joomla World Conference 2012 in November 2012 in San Jose, CA, USA by Hans Kuijpers

@hans2103 Joomla Site Speed Optimization @hans2103 Hans Kuijpers Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Speed matters! Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 +500 ms ➙ -20% traffic @ Google +100 ms ➙ -1% sales @ Amazon Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Websites are bigger Joomla World Conference 2012 Wednesday 8 May 13 http://www.websiteoptimization.com/speed/tweak/average-web-page/ Site Performance Optimization

@hans2103 Google for: Gomez Web Speed Survey Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Now what? • Measure • Learn • Optimize • Iterate Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 and again and again Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Default Joomla 2.5.x installation with sample data Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://tools.pingdom.com/fpt/ Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://developer.yahoo.com/ performance/rules.html Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://yslow.org Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 https://developers.google.com/speed/ docs/insights/rules Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://gtmetrix.com Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 things to do first • reduce http request • use gzip compression • use caching Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 HTTP requests browser Joomla World Conference 2012 Wednesday 8 May 13 server Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 6 css files Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 6 js files Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://yireo.com/scriptmerge Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Before cache plugin Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 2 css files Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 1 js files Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 reduced with 11 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 still too low Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Gzip compression 1 browser 2 server zip 4 browser 3 server unzip 5 browser Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://www.whatsmyip.org/ http-compression-test/ Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 change to YES Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 add to .htaccess # Compress output using mod_deflate <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml AddOutputFilterByType DEFLATE application/javascript application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary SetEnvIfNoCase Request_URI .(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary </IfModule> Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Caching is page in Joomla cache? • yes ➙ serve cached page • no ➙ generate page Joomla cache is good jotCache is better. exclude pages from cache Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://www.jotcomponents.net/ web-programming/jotcache Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 order last my settings Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 add to .htaccess
Turn on Expires and set default to 0 ExpiresActive On ExpiresDefault A0
Set up caching on media files for 1 year (forever?) <filesMatch “.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$”> ExpiresDefault A29030400 Header append Cache-Control “public” </filesMatch> # Set up caching on media files for 1 week <filesMatch “.(gif|jpg|jpeg|png|swf)$”> ExpiresDefault A604800 Header append Cache-Control “public” </filesMatch> # Set up 2 Hour caching on commonly updated files <filesMatch “.(xml|txt|html|js|css)$”> ExpiresDefault A7200 Header append Cache-Control “proxy-revalidate” </filesMatch>
mod_expires in combination with mod_deflate I know my provider installed both
Force no caching for dynamic files <filesMatch “.(php|cgi|pl|htm)$”> ExpiresActive Off Header set Cache-Control “private, no-cache, no-store, proxy-revalidate, no-transform” Header set Pragma “no-cache” Joomla World Conference 2012 Site Performance Optimization </filesMatch> Wednesday 8 May 13

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 There are 3 static components without a far-future expiration date. Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 add to .htaccess
Turn on Expires and set default to 0 ExpiresActive On ExpiresDefault A0
Set up caching on media files for 1 year (forever?) <filesMatch “.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$”> ExpiresDefault A29030400 Header append Cache-Control “public” </filesMatch> # Set up caching on media files for 1 week <filesMatch “.(gif|jpg|jpeg|png|swf)$”> ExpiresDefault A604800 Header append Cache-Control “public” </filesMatch> # Set up 2 Hour caching on commonly updated files <filesMatch “.(xml|txt|html|js|css)$”> ExpiresDefault A7200 Header append Cache-Control “proxy-revalidate” </filesMatch>
set this value to a week and YSlow will give you a higher score
Force no caching for dynamic files <filesMatch “.(php|cgi|pl|htm)$”> ExpiresActive Off Header set Cache-Control “private, no-cache, no-store, proxy-revalidate, no-transform” Header set Pragma “no-cache” </filesMatch> Joomla World Conference 2012 Site Performance Optimization Wednesday 8 May 13

@hans2103 less is more… • combine css images in sprites • css3 instead of images • optimize images • remove unwanted css files • remove unwanted js files • show less … Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 reference to a sprite img Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 reduction of 6 http requests from 7 to 1 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 button as css3 instead of image Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://www.colorzilla.com/ gradient-editor/ Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 http://css3generator.com Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 • original image: 2.4MB • png-24: 387.9 KB • gif 256 colors: 164.3KB • png-8 256 colors: 139KB • jpg 60 quality: 99.46 KB choose wisely Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Do you really need mootools? if not… remove it using Mootools Enabler/Disabler Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 https://github.com/phproberto/ plg_sys_mootable Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 set per menu item Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 and again and again Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Is a fast website important? yes it is! Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 are there more things to improve? yes there are… tons of books and sites are written about it. go out find them and enjoy improving your site speed. Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 one more thing • just seen at the presentation by Eli Aschkenasy Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization

@hans2103 thank you for your time and have fun http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 Joomla World Conference 2012 Wednesday 8 May 13 Site Performance Optimization http://www.flickr.com/photos/trasimac/1217071176

Hans Kuijpers
@hans2103

1 / 74

my presentation about Site Speed Optimisation during Joomla World Conference… the low hanging fruit.