Site Speed Optimisation for JWC2012

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

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

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

Slide 37

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

Slide 38

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

Slide 39

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

Slide 40

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

Slide 41

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

Slide 42

@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

Slide 43

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

Slide 44

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

Slide 45

@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

Slide 46

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

Slide 47

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

Slide 48

@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

Slide 49

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

Slide 50

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

Slide 51

@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

Slide 52

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

Slide 53

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

Slide 54

@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

Slide 55

@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

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

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

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

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

Slide 64

@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

Slide 65

@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

Slide 66

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

Slide 67

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

Slide 68

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

Slide 69

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

Slide 70

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

Slide 71

@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

Slide 72

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

Slide 73

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

Slide 74

@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