Site Speed Optimisation for JWC2012

@hans2103
Joomla World Conference 2012 Site Performance Optimization
Joomla Site Speed Optimization
@hans2103
Hans Kuijpers

@hans2103

@hans2103
Speed matters!

@hans2103
+500ms➙-20%traffic
@ Google
+100ms➙-1%sales
@ Amazon

@hans2103
Joomla World Conference 2012 Site Performance Optimizationhttp://www.websiteoptimization.com/speed/tweak/average-web-page/
Websites are bigger

@hans2103
Google for:
Gomez Web Speed Survey

@hans2103
Now what?
• Measure
• Learn
• Optimize
• Iterate

@hans2103
and again and again

@hans2103
Default Joomla 2.5.x installation
with sample data

@hans2103
http://tools.pingdom.com/fpt/

@hans2103
http://developer.yahoo.com/
performance/rules.html

@hans2103
http://yslow.org

@hans2103
https://developers.google.com/speed/
docs/insights/rules

@hans2103
http://gtmetrix.com

@hans2103
things to do ﬁrst
• reduce http request
• use gzip compression
• use caching

@hans2103
browser server
HTTP requests

@hans2103
6 css ﬁles

@hans2103
6 js ﬁles

@hans2103
http://yireo.com/scriptmerge

@hans2103
Before cache plugin

@hans2103
2 css ﬁles

@hans2103
1 js ﬁles

@hans2103
reduced with 11

@hans2103
still too low

@hans2103
Gzip compression
server
serverbrowser
browser
1 2
34
zip
browser
5
unzip

@hans2103
http://www.whatsmyip.org/
http-compression-test/

@hans2103
change toYES

@hans2103
# Compress output using mod_deﬂate
<IfModule mod_deﬂate.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>
add to .htaccess

@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

@hans2103
http://www.jotcomponents.net/
web-programming/jotcache

@hans2103
order last
my settings

@hans2103
# 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)$">
</filesMatch>
# Set up 2 Hour caching on commonly updated files
<filesMatch ".(xml|txt|html|js|css)$">
Header append Cache-Control "proxy-revalidate"
</filesMatch>
# 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>
add to .htaccess
mod_expires
in combination with
mod_deﬂate
I know my provider
installed both

@hans2103
There are 3 static components
without a far-future expiration date.

@hans2103
# 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)$">
</filesMatch>
# Set up caching on media files for 1 week
<filesMatch ".(gif|jpg|jpeg|png|swf)$">
</filesMatch>
# Set up 2 Hour caching on commonly updated files
<filesMatch ".(xml|txt|html|js|css)$">
Header append Cache-Control "proxy-revalidate"
</filesMatch>
# 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>
set this value to a
week andYSlow will
give you a higher score
add to .htaccess

@hans2103
less is more...
• combine css images in sprites
• css3 instead of images
• optimize images
• remove unwanted css ﬁles
• remove unwanted js ﬁles
• show less ...

@hans2103
reference to a sprite img

@hans2103
reduction of 6 http requests
from 7 to 1

@hans2103
button as css3 instead of image

@hans2103
http://www.colorzilla.com/
gradient-editor/

@hans2103
http://css3generator.com

@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

@hans2103
Do you really need
mootools?
if not... remove it
using Mootools
Enabler/Disabler

@hans2103
https://github.com/phproberto/
plg_sys_mootable

@hans2103
set per menu item

@hans2103
Is a fast website
important?
yes it is!

@hans2103
are there more
things to improve?
yes there are... tons of books and
sites are written about it.
go out ﬁnd them and enjoy
improving your site speed.

@hans2103
one more thing
• just seen at the presentation by
Eli Aschkenasy

@hans2103
Joomla World Conference 2012 Site Performance Optimizationhttp://www.ﬂickr.com/photos/trasimac/1217071176
thank you for your time and have fun
http://slideshare.net/hans2103
hans2103
http://about.me/hans2103

Site Speed Optimisation for JWC2012

More Related Content

What's hot (19)

Similar to Site Speed Optimisation for JWC2012 (20)

More from Hans Kuijpers (20)

Recently uploaded (20)

Site Speed Optimisation for JWC2012