Site Speed Optimisation for JWC2012

@hans2103

Joomla World Conference 2012 Site Performance Optimization

Joomla Site Speed Optimization

@hans2103Hans Kuijpers

@hans2103

Speed matters!

@hans2103

+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

Google for:Gomez Web Speed Survey

@hans2103

Now what?

• Measure

• Learn

• Optimize

• Iterate

@hans2103

and again and again

@hans2103

Default Joomla 2.5.x installationwith 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 first

• reduce http request

• use gzip compression

• use caching

@hans2103

browser server

HTTP requests

@hans2103

6 css files

@hans2103

6 js files

@hans2103

http://yireo.com/scriptmerge

@hans2103

Before cache plugin

@hans2103

2 css files

@hans2103

1 js files

@hans2103

reduced with 11

@hans2103

still too low

@hans2103

Gzip compression

server

serverbrowser

browser

browser5

@hans2103

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

@hans2103

change to YES

@hans2103

# 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

Cachingis page in Joomla cache?

• yes ➙ serve cached page• no ➙ generate page

Joomla cache is goodjotCache 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 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

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

@hans2103

# 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

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

reference to a sprite img

@hans2103

reduction of 6 http requestsfrom 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 needmootools?

if not... remove it

using Mootools Enabler/Disabler

@hans2103

https://github.com/phproberto/plg_sys_mootable

@hans2103

set per menu item

@hans2103

and again and again

@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 find 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.flickr.com/photos/trasimac/1217071176

thank you for your time and have fun

http://slideshare.net/hans2103

hans2103

http://about.me/hans2103

@hans2103

Site Speed Optimisation for JWC2012

mozilla4 gzip

gzip dontvaryadd

pagejoomla cache

cachecontrol public

texthtmlsetenvifnocase

hour caching

media files

cached page

Technology

DESIGN, OPTIMISATION AND TESTING OF A HIGH-SPEED AERODYNAMIC...

Optimisation SEO de son site mobile et de ses applications

Site professionnel - MISSIONS DELEGUEES Tourisme...

Maximizing site speed with mercy corps

Green DC Transformation Through Optimisation – Best...

Site Speed EXTREME - SEOkomm 2014

WordPress Speed OptimisationSite... · WordPress Speed...

SEO on site optimisation by FrozenRank

HOLISTIC DESIGN AND OPTIMISATION OF HIGH-SPEED MARINE …...

Site Speed Optimization by Itamar Gero

Site Speed am Limit - Campixx 2015

Engage EMEA 2010 - Site Optimisation Business Justification

BRIGHT IDEAS - BEST AMMUNITION Solutions... · analysis,...

ANALYSIS AND OPTIMISATION OF TOTAL SITE UTILITY SYSTEMS.pdf

CUT Competitive Use of Waterjet...

Vehicle Energy Management Optimisation through Digital ... -...