@hans2103Joomla World Conference 2012 Site Performance OptimizationJoomla Site Speed Optimization@hans2103Hans Kuijpers
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance OptimizationSpeed matters!
@hans2103Joomla World Conference 2012 Site Performance Optimization+500ms➙-20%traffic@ Google+100ms➙-1%sales@ Amazon
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.websiteoptimization.com/speed/tweak/average-...
@hans2103Joomla World Conference 2012 Site Performance OptimizationGoogle for:Gomez Web Speed Survey
@hans2103Joomla World Conference 2012 Site Performance OptimizationNow what?• Measure• Learn• Optimize• Iterate
@hans2103Joomla World Conference 2012 Site Performance Optimizationand again and again
@hans2103Joomla World Conference 2012 Site Performance OptimizationDefault Joomla 2.5.x installationwith sample data
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://tools.pingdom.com/fpt/
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://developer.yahoo.com/performance/rules.html
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://yslow.org
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttps://developers.google.com/speed/docs/insights/rules
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://gtmetrix.com
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationthings to do first• reduce http request• use gzip compre...
@hans2103Joomla World Conference 2012 Site Performance Optimizationbrowser serverHTTP requests
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization6 css files
@hans2103Joomla World Conference 2012 Site Performance Optimization6 js files
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://yireo.com/scriptmerge
@hans2103Joomla World Conference 2012 Site Performance OptimizationBefore cache plugin
@hans2103Joomla World Conference 2012 Site Performance Optimization2 css files
@hans2103Joomla World Conference 2012 Site Performance Optimization1 js files
@hans2103Joomla World Conference 2012 Site Performance Optimizationreduced with 11
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationstill too low
@hans2103Joomla World Conference 2012 Site Performance OptimizationGzip compressionserverserverbrowserbrowser1 234zipbrows...
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.whatsmyip.org/http-compression-test/
@hans2103Joomla World Conference 2012 Site Performance Optimizationchange toYES
@hans2103Joomla World Conference 2012 Site Performance Optimization# Compress output using mod_deflate<IfModule mod_deflate....
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance OptimizationCachingis page in Joomla cache?• yes ➙ serve cached pag...
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.jotcomponents.net/web-programming/jotcache
@hans2103Joomla World Conference 2012 Site Performance Optimizationorder lastmy settings
@hans2103Joomla World Conference 2012 Site Performance Optimization# Turn on Expires and set default to 0ExpiresActive OnE...
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance OptimizationThere are 3 static componentswithout a far-future expir...
@hans2103Joomla World Conference 2012 Site Performance Optimization# Turn on Expires and set default to 0ExpiresActive OnE...
@hans2103Joomla World Conference 2012 Site Performance Optimizationless is more...• combine css images in sprites• css3 in...
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationreference to a sprite img
@hans2103Joomla World Conference 2012 Site Performance Optimizationreduction of 6 http requestsfrom 7 to 1
@hans2103Joomla World Conference 2012 Site Performance Optimizationbutton as css3 instead of image
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.colorzilla.com/gradient-editor/
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://css3generator.com
@hans2103Joomla World Conference 2012 Site Performance Optimization• original image: 2.4MB• png-24: 387.9 KB• gif 256 colo...
@hans2103Joomla World Conference 2012 Site Performance OptimizationDo you really needmootools?if not... remove itusing Moo...
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttps://github.com/phproberto/plg_sys_mootable
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationset per menu item
@hans2103Joomla World Conference 2012 Site Performance Optimizationand again and again
@hans2103Joomla World Conference 2012 Site Performance OptimizationIs a fast websiteimportant?yes it is!
@hans2103Joomla World Conference 2012 Site Performance Optimizationare there morethings to improve?yes there are... tons o...
@hans2103Joomla World Conference 2012 Site Performance Optimizationone more thing• just seen at the presentation byEli Asc...
@hans2103Joomla World Conference 2012 Site Performance Optimization
@hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.flickr.com/photos/trasimac/1217071176thank yo...
@hans2103Joomla World Conference 2012 Site Performance Optimization
Upcoming SlideShare
Loading in …5
×

Site Speed Optimisation for JWC2012

1,754 views

Published on

my presentation about Site Speed Optimisation during Joomla World Conference... the low hanging fruit.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,754
On SlideShare
0
From Embeds
0
Number of Embeds
145
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Site Speed Optimisation for JWC2012

  1. 1. @hans2103Joomla World Conference 2012 Site Performance OptimizationJoomla Site Speed Optimization@hans2103Hans Kuijpers
  2. 2. @hans2103Joomla World Conference 2012 Site Performance Optimization
  3. 3. @hans2103Joomla World Conference 2012 Site Performance OptimizationSpeed matters!
  4. 4. @hans2103Joomla World Conference 2012 Site Performance Optimization+500ms➙-20%traffic@ Google+100ms➙-1%sales@ Amazon
  5. 5. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.websiteoptimization.com/speed/tweak/average-web-page/Websites are bigger
  6. 6. @hans2103Joomla World Conference 2012 Site Performance OptimizationGoogle for:Gomez Web Speed Survey
  7. 7. @hans2103Joomla World Conference 2012 Site Performance OptimizationNow what?• Measure• Learn• Optimize• Iterate
  8. 8. @hans2103Joomla World Conference 2012 Site Performance Optimizationand again and again
  9. 9. @hans2103Joomla World Conference 2012 Site Performance OptimizationDefault Joomla 2.5.x installationwith sample data
  10. 10. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://tools.pingdom.com/fpt/
  11. 11. @hans2103Joomla World Conference 2012 Site Performance Optimization
  12. 12. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://developer.yahoo.com/performance/rules.html
  13. 13. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://yslow.org
  14. 14. @hans2103Joomla World Conference 2012 Site Performance Optimization
  15. 15. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttps://developers.google.com/speed/docs/insights/rules
  16. 16. @hans2103Joomla World Conference 2012 Site Performance Optimization
  17. 17. @hans2103Joomla World Conference 2012 Site Performance Optimization
  18. 18. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://gtmetrix.com
  19. 19. @hans2103Joomla World Conference 2012 Site Performance Optimization
  20. 20. @hans2103Joomla World Conference 2012 Site Performance Optimization
  21. 21. @hans2103Joomla World Conference 2012 Site Performance Optimization
  22. 22. @hans2103Joomla World Conference 2012 Site Performance Optimizationthings to do first• reduce http request• use gzip compression• use caching
  23. 23. @hans2103Joomla World Conference 2012 Site Performance Optimizationbrowser serverHTTP requests
  24. 24. @hans2103Joomla World Conference 2012 Site Performance Optimization
  25. 25. @hans2103Joomla World Conference 2012 Site Performance Optimization
  26. 26. @hans2103Joomla World Conference 2012 Site Performance Optimization6 css files
  27. 27. @hans2103Joomla World Conference 2012 Site Performance Optimization6 js files
  28. 28. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://yireo.com/scriptmerge
  29. 29. @hans2103Joomla World Conference 2012 Site Performance OptimizationBefore cache plugin
  30. 30. @hans2103Joomla World Conference 2012 Site Performance Optimization2 css files
  31. 31. @hans2103Joomla World Conference 2012 Site Performance Optimization1 js files
  32. 32. @hans2103Joomla World Conference 2012 Site Performance Optimizationreduced with 11
  33. 33. @hans2103Joomla World Conference 2012 Site Performance Optimization
  34. 34. @hans2103Joomla World Conference 2012 Site Performance Optimizationstill too low
  35. 35. @hans2103Joomla World Conference 2012 Site Performance OptimizationGzip compressionserverserverbrowserbrowser1 234zipbrowser5unzip
  36. 36. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.whatsmyip.org/http-compression-test/
  37. 37. @hans2103Joomla World Conference 2012 Site Performance Optimizationchange toYES
  38. 38. @hans2103Joomla World Conference 2012 Site Performance Optimization# Compress output using mod_deflate<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascriptAddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xmlAddOutputFilterByType DEFLATE application/javascript application/x-javascriptBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4.0[678] no-gzipBrowserMatch bMSI[E] !no-gzip !gzip-only-text/htmlSetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-varySetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-varySetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-varySetEnvIfNoCase Request_URI .(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary</IfModule>add to .htaccess
  39. 39. @hans2103Joomla World Conference 2012 Site Performance Optimization
  40. 40. @hans2103Joomla World Conference 2012 Site Performance Optimization
  41. 41. @hans2103Joomla World Conference 2012 Site Performance OptimizationCachingis page in Joomla cache?• yes ➙ serve cached page• no ➙ generate pageJoomla cache is goodjotCache is better.exclude pages from cache
  42. 42. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.jotcomponents.net/web-programming/jotcache
  43. 43. @hans2103Joomla World Conference 2012 Site Performance Optimizationorder lastmy settings
  44. 44. @hans2103Joomla World Conference 2012 Site Performance Optimization# Turn on Expires and set default to 0ExpiresActive OnExpiresDefault A0# Set up caching on media files for 1 year (forever?)<filesMatch ".(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">ExpiresDefault A29030400Header append Cache-Control "public"</filesMatch># Set up caching on media files for 1 week<filesMatch ".(gif|jpg|jpeg|png|swf)$">ExpiresDefault A604800Header append Cache-Control "public"</filesMatch># Set up 2 Hour caching on commonly updated files<filesMatch ".(xml|txt|html|js|css)$">ExpiresDefault A7200Header append Cache-Control "proxy-revalidate"</filesMatch># Force no caching for dynamic files<filesMatch ".(php|cgi|pl|htm)$">ExpiresActive OffHeader set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"Header set Pragma "no-cache"</filesMatch>add to .htaccessmod_expiresin combination withmod_deflateI know my providerinstalled both
  45. 45. @hans2103Joomla World Conference 2012 Site Performance Optimization
  46. 46. @hans2103Joomla World Conference 2012 Site Performance OptimizationThere are 3 static componentswithout a far-future expiration date.
  47. 47. @hans2103Joomla World Conference 2012 Site Performance Optimization# Turn on Expires and set default to 0ExpiresActive OnExpiresDefault A0# Set up caching on media files for 1 year (forever?)<filesMatch ".(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">ExpiresDefault A29030400Header append Cache-Control "public"</filesMatch># Set up caching on media files for 1 week<filesMatch ".(gif|jpg|jpeg|png|swf)$">ExpiresDefault A604800Header append Cache-Control "public"</filesMatch># Set up 2 Hour caching on commonly updated files<filesMatch ".(xml|txt|html|js|css)$">ExpiresDefault A7200Header append Cache-Control "proxy-revalidate"</filesMatch># Force no caching for dynamic files<filesMatch ".(php|cgi|pl|htm)$">ExpiresActive OffHeader set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"Header set Pragma "no-cache"</filesMatch>set this value to aweek andYSlow willgive you a higher scoreadd to .htaccess
  48. 48. @hans2103Joomla World Conference 2012 Site Performance Optimizationless is more...• combine css images in sprites• css3 instead of images• optimize images• remove unwanted css files• remove unwanted js files• show less ...
  49. 49. @hans2103Joomla World Conference 2012 Site Performance Optimization
  50. 50. @hans2103Joomla World Conference 2012 Site Performance Optimization
  51. 51. @hans2103Joomla World Conference 2012 Site Performance Optimizationreference to a sprite img
  52. 52. @hans2103Joomla World Conference 2012 Site Performance Optimizationreduction of 6 http requestsfrom 7 to 1
  53. 53. @hans2103Joomla World Conference 2012 Site Performance Optimizationbutton as css3 instead of image
  54. 54. @hans2103Joomla World Conference 2012 Site Performance Optimization
  55. 55. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.colorzilla.com/gradient-editor/
  56. 56. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://css3generator.com
  57. 57. @hans2103Joomla World Conference 2012 Site Performance Optimization• original image: 2.4MB• png-24: 387.9 KB• gif 256 colors: 164.3KB• png-8 256 colors: 139KB• jpg 60 quality: 99.46 KBchoose wisely
  58. 58. @hans2103Joomla World Conference 2012 Site Performance OptimizationDo you really needmootools?if not... remove itusing MootoolsEnabler/Disabler
  59. 59. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttps://github.com/phproberto/plg_sys_mootable
  60. 60. @hans2103Joomla World Conference 2012 Site Performance Optimization
  61. 61. @hans2103Joomla World Conference 2012 Site Performance Optimizationset per menu item
  62. 62. @hans2103Joomla World Conference 2012 Site Performance Optimizationand again and again
  63. 63. @hans2103Joomla World Conference 2012 Site Performance OptimizationIs a fast websiteimportant?yes it is!
  64. 64. @hans2103Joomla World Conference 2012 Site Performance Optimizationare there morethings to improve?yes there are... tons of books andsites are written about it.go out find them and enjoyimproving your site speed.
  65. 65. @hans2103Joomla World Conference 2012 Site Performance Optimizationone more thing• just seen at the presentation byEli Aschkenasy
  66. 66. @hans2103Joomla World Conference 2012 Site Performance Optimization
  67. 67. @hans2103Joomla World Conference 2012 Site Performance Optimizationhttp://www.flickr.com/photos/trasimac/1217071176thank you for your time and have funhttp://slideshare.net/hans2103hans2103http://about.me/hans2103
  68. 68. @hans2103Joomla World Conference 2012 Site Performance Optimization

×