Site Performance Optimization for Joomla #jwc13

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

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

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

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

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

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

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

@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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

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

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

@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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

@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

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

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

@hans2103 @hans2103 #JWC13 Site Performance Optimization

@hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

@hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization

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

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

@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

Hans Kuijpers
@hans2103

1 / 77

It’s easy to improve the speed of your Joomla website. Just follow the tips & tricks of this presentation about Site Performance Optimization. These are the slides used during the Joomla World Conference 2013 in Boston #jwc13