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

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

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

3. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 "rn"`;
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

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

26. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

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

31. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

35. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

36. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

39. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

42. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

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

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

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

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

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

51. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

54. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

55. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

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

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

61. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

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

66. @hans2103
@hans2103 #JWC13
Site Performance Optimization

67. @hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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

71. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

74. @hans2103
@hans2103
@hans2103 #JWC13
Site Performance Optimization

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

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

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