Site Performance Optimization for Joomla #jwc13

A presentation at Joomla World Conference 2013 in November 2013 in Boston, MA, USA by Hans Kuijpers

Slide 1

@hans2103 @hans2103 Site Performance Optimization Hans Kuijpers @hans2103 slideshare.net/hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 2

@hans2103 @hans2103 presentation is based on default Joomla 3.1.x installation with sample data @hans2103 #JWC13 Site Performance Optimization

Slide 3

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 4

@hans2103 @hans2103 connection to server use ping to measure @hans2103 #JWC13 Site Performance Optimization

Slide 5

@hans2103 ping msnippets.net @hans2103 #JWC13 @hans2103 Site Performance Optimization

Slide 6

@hans2103 ping joomla.org @hans2103 from The Netherlands @hans2103 #JWC13 Site Performance Optimization

Slide 7

@hans2103 ping joomla.org @hans2103 from Boston HMS @hans2103 #JWC13 Site Performance Optimization

Slide 8

@hans2103 @hans2103 conclusion different server means different connection time and location of server matters @hans2103 #JWC13 Site Performance Optimization

Slide 9

@hans2103 @hans2103 website files HTML, PHP, etc. Database CSS Images JavaScript @hans2103 #JWC13 Site Performance Optimization

Slide 10

@hans2103 @hans2103 tools for testing @hans2103 #JWC13 Site Performance Optimization

Slide 11

@hans2103 @hans2103 YSlow @hans2103 #JWC13 Site Performance Optimization

Slide 12

@hans2103 @hans2103 PageSpeed @hans2103 #JWC13 Site Performance Optimization

Slide 13

@hans2103 @hans2103 PageSpeed Insights @hans2103 #JWC13 Site Performance Optimization

Slide 14

@hans2103 @hans2103 GTMetrix @hans2103 #JWC13 Site Performance Optimization

Slide 15

@hans2103 @hans2103 pingdom @hans2103 #JWC13 Site Performance Optimization

Slide 16

@hans2103 @hans2103 404 - not found use Inspect Element to find and solve @hans2103 #JWC13 Site Performance Optimization

Slide 17

@hans2103 @hans2103 find and solve broken links @hans2103 #JWC13 Site Performance Optimization

Slide 18

@hans2103 @hans2103 Optimize and combine images @hans2103 #JWC13 Site Performance Optimization

Slide 19

@hans2103 @hans2103 http://creativebloq.com/design/ image-compressiontools-1132865 @hans2103 #JWC13 Site Performance Optimization

Slide 20

@hans2103 @hans2103 imageoptim.com @hans2103 #JWC13 Site Performance Optimization

Slide 21

@hans2103 @hans2103 use Command line Interface to optimize images @hans2103 #JWC13 Site Performance Optimization

Slide 22

@hans2103 @hans2103 Optimize your JPG’s with JpegOptim $ find path/to/images/ -iname *.jpg -exec jpegoptim —strip-all -p {} ; @hans2103 #JWC13 Site Performance Optimization

Slide 23

@hans2103 @hans2103 Optimize your PNG’s with OptiPNG $ find path/to/images/ -iname *.png -exec optipng -o7 -preserve {} ; @hans2103 #JWC13 Site Performance Optimization

Slide 24

@hans2103 @hans2103 #!/bin/bash # convertImages.sh # Author: Peter Jaap Blaakmeer (elgentos.nl) # https://gist.github.com/peterjaap/7080989 NEWQUALITY=80 NEWSIZE=1000 DIRECTORY=media/catalog/product/ du -hs $DIRECTORY for f in $(find $DIRECTORY -type f); do WIDTH=identify -format '%w' $f | tr -d "\r\n"; if [ $WIDTH -gt $NEWSIZE ]; then SIZEBEFORE=ls -lah $f | awk '{ print $5}'; convert $f -resize $NEWSIZE -quality $NEWQUALITY $f; SIZEAFTER=ls -lah $f | awk '{ print $5}'; echo “$f has been converted - from ${SIZEBEFORE} to ${SIZEAFTER}”; fi done @hans2103 #JWC13 Site Performance Optimization

Slide 25

@hans2103 @hans2103 use sprite images @hans2103 #JWC13 Site Performance Optimization

Slide 26

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 27

@hans2103 @hans2103 reference to a sprite img @hans2103 #JWC13 Site Performance Optimization

Slide 28

@hans2103 @hans2103 reduction of 6 http requests from 7 to 1 @hans2103 #JWC13 Site Performance Optimization

Slide 29

@hans2103 @hans2103 Google for: Retina Revolution @hans2103 #JWC13 Site Performance Optimization

Slide 30

@hans2103 @hans2103 check @hans2103 #JWC13 fill empty Site Performance Optimization

Slide 31

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 32

@hans2103 @hans2103 1024px x 768px @hans2103 #JWC13 Site Performance Optimization

Slide 33

@hans2103 @hans2103 1024px x 768px @hans2103 #JWC13 Site Performance Optimization

Slide 34

@hans2103 @hans2103 Minify, Combine & Compress Files @hans2103 #JWC13 Site Performance Optimization

Slide 35

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 36

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 37

@hans2103 @hans2103 1 css file created using less @hans2103 #JWC13 Site Performance Optimization

Slide 38

@hans2103 @hans2103 The example needs more http-requests. @hans2103 #JWC13 Site Performance Optimization

Slide 39

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 40

@hans2103 @hans2103 6 css files @hans2103 #JWC13 Site Performance Optimization

Slide 41

@hans2103 @hans2103 6 js files @hans2103 #JWC13 Site Performance Optimization

Slide 42

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 43

@hans2103 @hans2103 http://www.yireo.com/software/ joomla-extensions/scriptmerge @hans2103 #JWC13 Site Performance Optimization

Slide 44

@hans2103 @hans2103 Before cache plugin @hans2103 #JWC13 Site Performance Optimization

Slide 45

@hans2103 @hans2103 2 css files @hans2103 #JWC13 Site Performance Optimization

Slide 46

@hans2103 @hans2103 1 js files @hans2103 #JWC13 Site Performance Optimization

Slide 47

@hans2103 @hans2103 Gzip compression @hans2103 #JWC13 Site Performance Optimization

Slide 48

@hans2103 @hans2103 http://www.whatsmyip.org/ http-compression-test/ @hans2103 #JWC13 Site Performance Optimization

Slide 49

@hans2103 @hans2103 change to YES @hans2103 #JWC13 Site Performance Optimization

Slide 50

@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> @hans2103 #JWC13 Site Performance Optimization

Slide 51

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 52

@hans2103 Caching is page in Joomla cache? yes ➙ serve cached page no ➙ generate page @hans2103 #JWC13 Site Performance Optimization

Slide 53

@hans2103 use jotCache Joomla cache is good jotCache is better. exclude pages from cache @hans2103 #JWC13 Site Performance Optimization

Slide 54

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 55

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 56

@hans2103 @hans2103 http://www.jotcomponents.net/ web-programming/jotcache @hans2103 #JWC13 Site Performance Optimization

Slide 57

@hans2103 @hans2103 order last my settings @hans2103 #JWC13 Site Performance Optimization

Slide 58

@hans2103 @hans2103 http://msnippets.net/index.php? option=com_content& view=article&id=1&Itemid=12 @hans2103 #JWC13 Site Performance Optimization

Slide 59

@hans2103 Optimize Browser Caching @hans2103 #JWC13 Site Performance Optimization

Slide 60

@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>! ! # 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”! @hans2103 #JWC13 Site Performance Optimization </filesMatch>

mod_expires in combination with mod_deflate I know my provider installed both

Slide 61

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 62

@hans2103 @hans2103 There are 3 static components without a far-future expiration date. @hans2103 #JWC13 Site Performance Optimization

Slide 63

@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>! ! # 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> @hans2103 #JWC13 Site Performance Optimization

set this value to a week and YSlow will give you a higher score

Slide 64

@hans2103 less is more @hans2103 #JWC13 Site Performance Optimization

Slide 65

@hans2103 remove unneeded modules @hans2103 #JWC13 Site Performance Optimization

Slide 66

@hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 67

@hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 68

@hans2103 uncomment non-used less files @hans2103 #JWC13 Site Performance Optimization

Slide 69

Do you really need mootools? @hans2103 if not… remove it using Mootools Enabler/Disabler @hans2103 #JWC13 Site Performance Optimization

Slide 70

@hans2103 @hans2103 https://github.com/phproberto/ plg_sys_mootable @hans2103 #JWC13 Site Performance Optimization

Slide 71

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 72

@hans2103 @hans2103 set per menu item @hans2103 #JWC13 Site Performance Optimization

Slide 73

@hans2103 @hans2103 https://developers.google.com/ speed/libraries/devguide @hans2103 #JWC13 Site Performance Optimization

Slide 74

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

Slide 75

@hans2103 @hans2103 Is a fast website important? yes it is! @hans2103 #JWC13 Site Performance Optimization

Slide 76

@hans2103 @hans2103 have fun creating fast websites @hans2103 #JWC13 Site Performance Optimization

Slide 77

@hans2103 @hans2103 thank you for your time and have fun http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 @hans2103 #JWC13 Site Performance Optimization http://www.flickr.com/photos/trasimac/1217071176