Site Performance Optimization for Joomla #jwc13

3,096 views

Published on

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

Published in: Technology, Art & Photos
1 Comment
2 Likes
Statistics
Notes
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/yT1SNP
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,096
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
18
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Site Performance Optimization for Joomla #jwc13

  1. 1. @hans2103 @hans2103 Site 
 Performance 
 Optimization Hans Kuijpers @hans2103 slideshare.net/hans2103 @hans2103 #JWC13 Site Performance Optimization
  2. 2. @hans2103 @hans2103 presentation is based on
 default Joomla 3.1.x installation
 with sample data @hans2103 #JWC13 Site Performance Optimization
  3. 3. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  4. 4. @hans2103 @hans2103 connection to server use ping to measure @hans2103 #JWC13 Site Performance Optimization
  5. 5. @hans2103 ping msnippets.net @hans2103 #JWC13 @hans2103 Site Performance Optimization
  6. 6. @hans2103 ping joomla.org @hans2103 from The Netherlands @hans2103 #JWC13 Site Performance Optimization
  7. 7. @hans2103 ping joomla.org @hans2103 from Boston HMS @hans2103 #JWC13 Site Performance Optimization
  8. 8. @hans2103 @hans2103 conclusion different server means different connection time
 and
 location of server matters @hans2103 #JWC13 Site Performance Optimization
  9. 9. @hans2103 @hans2103 website files HTML, PHP, etc. Database CSS Images JavaScript @hans2103 #JWC13 Site Performance Optimization
  10. 10. @hans2103 @hans2103 tools for testing @hans2103 #JWC13 Site Performance Optimization
  11. 11. @hans2103 @hans2103 YSlow @hans2103 #JWC13 Site Performance Optimization
  12. 12. @hans2103 @hans2103 PageSpeed @hans2103 #JWC13 Site Performance Optimization
  13. 13. @hans2103 @hans2103 PageSpeed Insights @hans2103 #JWC13 Site Performance Optimization
  14. 14. @hans2103 @hans2103 GTMetrix @hans2103 #JWC13 Site Performance Optimization
  15. 15. @hans2103 @hans2103 pingdom @hans2103 #JWC13 Site Performance Optimization
  16. 16. @hans2103 @hans2103 404 - not found use Inspect Element to find and solve @hans2103 #JWC13 Site Performance Optimization
  17. 17. @hans2103 @hans2103 find and solve broken links @hans2103 #JWC13 Site Performance Optimization
  18. 18. @hans2103 @hans2103 Optimize and combine images @hans2103 #JWC13 Site Performance Optimization
  19. 19. @hans2103 @hans2103 http://creativebloq.com/design/ image-compressiontools-1132865 @hans2103 #JWC13 Site Performance Optimization
  20. 20. @hans2103 @hans2103 imageoptim.com @hans2103 #JWC13 Site Performance Optimization
  21. 21. @hans2103 @hans2103 use Command line Interface to optimize images @hans2103 #JWC13 Site Performance Optimization
  22. 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. 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. 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. 25. @hans2103 @hans2103 use sprite images @hans2103 #JWC13 Site Performance Optimization
  26. 26. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  27. 27. @hans2103 @hans2103 reference to a sprite img @hans2103 #JWC13 Site Performance Optimization
  28. 28. @hans2103 @hans2103 reduction of 6 http requests
 from 7 to 1 @hans2103 #JWC13 Site Performance Optimization
  29. 29. @hans2103 @hans2103 Google for: Retina Revolution @hans2103 #JWC13 Site Performance Optimization
  30. 30. @hans2103 @hans2103 check @hans2103 #JWC13 fill empty Site Performance Optimization
  31. 31. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  32. 32. @hans2103 @hans2103 1024px x 768px @hans2103 #JWC13 Site Performance Optimization
  33. 33. @hans2103 @hans2103 1024px x 768px @hans2103 #JWC13 Site Performance Optimization
  34. 34. @hans2103 @hans2103 Minify, Combine & Compress Files @hans2103 #JWC13 Site Performance Optimization
  35. 35. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  36. 36. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  37. 37. @hans2103 @hans2103 1 css file created using less @hans2103 #JWC13 Site Performance Optimization
  38. 38. @hans2103 @hans2103 The example needs more http-requests. @hans2103 #JWC13 Site Performance Optimization
  39. 39. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  40. 40. @hans2103 @hans2103 6 css files @hans2103 #JWC13 Site Performance Optimization
  41. 41. @hans2103 @hans2103 6 js files @hans2103 #JWC13 Site Performance Optimization
  42. 42. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  43. 43. @hans2103 @hans2103 http://www.yireo.com/software/ joomla-extensions/scriptmerge @hans2103 #JWC13 Site Performance Optimization
  44. 44. @hans2103 @hans2103 Before cache plugin @hans2103 #JWC13 Site Performance Optimization
  45. 45. @hans2103 @hans2103 2 css files @hans2103 #JWC13 Site Performance Optimization
  46. 46. @hans2103 @hans2103 1 js files @hans2103 #JWC13 Site Performance Optimization
  47. 47. @hans2103 @hans2103 Gzip compression @hans2103 #JWC13 Site Performance Optimization
  48. 48. @hans2103 @hans2103 http://www.whatsmyip.org/
 http-compression-test/ @hans2103 #JWC13 Site Performance Optimization
  49. 49. @hans2103 @hans2103 change to YES @hans2103 #JWC13 Site Performance Optimization
  50. 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. 51. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  52. 52. @hans2103 Caching is page in Joomla cache? yes ➙ serve cached page no ➙ generate page @hans2103 #JWC13 Site Performance Optimization
  53. 53. @hans2103 use jotCache Joomla cache is good jotCache is better. exclude pages from cache @hans2103 #JWC13 Site Performance Optimization
  54. 54. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  55. 55. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  56. 56. @hans2103 @hans2103 http://www.jotcomponents.net/
 web-programming/jotcache @hans2103 #JWC13 Site Performance Optimization
  57. 57. @hans2103 @hans2103 order last my settings @hans2103 #JWC13 Site Performance Optimization
  58. 58. @hans2103 @hans2103 http://msnippets.net/index.php? option=com_content&
 view=article&id=1&Itemid=12 @hans2103 #JWC13 Site Performance Optimization
  59. 59. @hans2103 Optimize Browser Caching @hans2103 #JWC13 Site Performance Optimization
  60. 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. 61. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  62. 62. @hans2103 @hans2103 There are 3 static components without a far-future expiration date. @hans2103 #JWC13 Site Performance Optimization
  63. 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. 64. @hans2103 less is more @hans2103 #JWC13 Site Performance Optimization
  65. 65. @hans2103 remove unneeded modules @hans2103 #JWC13 Site Performance Optimization
  66. 66. @hans2103 @hans2103 #JWC13 Site Performance Optimization
  67. 67. @hans2103 @hans2103 #JWC13 Site Performance Optimization
  68. 68. @hans2103 uncomment non-used less files @hans2103 #JWC13 Site Performance Optimization
  69. 69. Do you really need mootools? @hans2103 if not... remove it using Mootools Enabler/Disabler @hans2103 #JWC13 Site Performance Optimization
  70. 70. @hans2103 @hans2103 https://github.com/phproberto/ plg_sys_mootable @hans2103 #JWC13 Site Performance Optimization
  71. 71. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  72. 72. @hans2103 @hans2103 set per menu item @hans2103 #JWC13 Site Performance Optimization
  73. 73. @hans2103 @hans2103 https://developers.google.com/ speed/libraries/devguide @hans2103 #JWC13 Site Performance Optimization
  74. 74. @hans2103 @hans2103 @hans2103 #JWC13 Site Performance Optimization
  75. 75. @hans2103 @hans2103 Is a fast website important? yes it is! @hans2103 #JWC13 Site Performance Optimization
  76. 76. @hans2103 @hans2103 have fun creating fast websites @hans2103 #JWC13 Site Performance Optimization
  77. 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

×