Upload
hans-kuijpers
View
1.520
Download
4
Tags:
Embed Size (px)
DESCRIPTION
my presentation about Site Speed Optimisation during Joomla World Conference... the low hanging fruit.
Citation preview
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Joomla Site Speed Optimization
@hans2103Hans Kuijpers
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Speed matters!
@hans2103
Joomla World Conference 2012 Site Performance Optimization
+500 ms ➙ -20% traffic@ Google
+100 ms ➙ -1% sales@ Amazon
@hans2103
Joomla World Conference 2012 Site Performance Optimizationhttp://www.websiteoptimization.com/speed/tweak/average-web-page/
Websites are bigger
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Google for:Gomez Web Speed Survey
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Now what?
• Measure
• Learn
• Optimize
• Iterate
@hans2103
Joomla World Conference 2012 Site Performance Optimization
and again and again
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Default Joomla 2.5.x installationwith sample data
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://tools.pingdom.com/fpt/
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://developer.yahoo.com/performance/rules.html
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://yslow.org
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
https://developers.google.com/speed/docs/insights/rules
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://gtmetrix.com
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
things to do first
• reduce http request
• use gzip compression
• use caching
@hans2103
Joomla World Conference 2012 Site Performance Optimization
browser server
HTTP requests
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
6 css files
@hans2103
Joomla World Conference 2012 Site Performance Optimization
6 js files
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://yireo.com/scriptmerge
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Before cache plugin
@hans2103
Joomla World Conference 2012 Site Performance Optimization
2 css files
@hans2103
Joomla World Conference 2012 Site Performance Optimization
1 js files
@hans2103
Joomla World Conference 2012 Site Performance Optimization
reduced with 11
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
still too low
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Gzip compression
server
serverbrowser
browser
1 2
34
zip
browser5
unzip
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://www.whatsmyip.org/http-compression-test/
@hans2103
Joomla World Conference 2012 Site Performance Optimization
change to YES
@hans2103
Joomla World Conference 2012 Site Performance Optimization
# 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>
add to .htaccess
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Cachingis page in Joomla cache?
• yes ➙ serve cached page• no ➙ generate page
Joomla cache is goodjotCache is better.
exclude pages from cache
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://www.jotcomponents.net/web-programming/jotcache
@hans2103
Joomla World Conference 2012 Site Performance Optimization
order last
my settings
@hans2103
Joomla World Conference 2012 Site Performance Optimization
# Turn on Expires and set default to 0ExpiresActive OnExpiresDefault 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> # 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_expiresin combination withmod_deflateI know my providerinstalled both
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
There are 3 static components without a far-future expiration date.
@hans2103
Joomla World Conference 2012 Site Performance Optimization
# Turn on Expires and set default to 0ExpiresActive OnExpiresDefault 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> # 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 and YSlow will give you a higher score
add to .htaccess
@hans2103
Joomla World Conference 2012 Site Performance Optimization
less is more...
• combine css images in sprites
• css3 instead of images
• optimize images
• remove unwanted css files
• remove unwanted js files
• show less ...
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
reference to a sprite img
@hans2103
Joomla World Conference 2012 Site Performance Optimization
reduction of 6 http requestsfrom 7 to 1
@hans2103
Joomla World Conference 2012 Site Performance Optimization
button as css3 instead of image
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://www.colorzilla.com/gradient-editor/
@hans2103
Joomla World Conference 2012 Site Performance Optimization
http://css3generator.com
@hans2103
Joomla World Conference 2012 Site Performance Optimization
• 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
Joomla World Conference 2012 Site Performance Optimization
Do you really needmootools?
if not... remove it
using Mootools Enabler/Disabler
@hans2103
Joomla World Conference 2012 Site Performance Optimization
https://github.com/phproberto/plg_sys_mootable
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimization
set per menu item
@hans2103
Joomla World Conference 2012 Site Performance Optimization
and again and again
@hans2103
Joomla World Conference 2012 Site Performance Optimization
Is a fast website important?
yes it is!
@hans2103
Joomla World Conference 2012 Site Performance Optimization
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.
@hans2103
Joomla World Conference 2012 Site Performance Optimization
one more thing
• just seen at the presentation by Eli Aschkenasy
@hans2103
Joomla World Conference 2012 Site Performance Optimization
@hans2103
Joomla World Conference 2012 Site Performance Optimizationhttp://www.flickr.com/photos/trasimac/1217071176
thank you for your time and have fun
http://slideshare.net/hans2103
hans2103
http://about.me/hans2103
@hans2103
Joomla World Conference 2012 Site Performance Optimization