Presentation from Perry Wirth on Joomla! speed optimization. This presentation covers concepts and methods behind speeding up the load time of your site. This covers what you can do within a base Joomla installation along with template parameters and extensions which can also help.

1. Perry Wirth

3. • BS Management Information Systems
• 10+ Years web experience
• Accenture
– Services – BPO
– Client Service Liaison for Global CPG
• Created over 20 Joomla! Sites
• Own a martial arts academy (3 sites)

4. http://www.websiteoptimization.com

5. http://www.websiteoptimization.com

7. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

8. Website Loading Time (s) Elements Size (KB)
http://www.facebook.com .65 12 116
http://www.yahoo.com 16.98 60 399
http://www.live.com 1.33 6 77.3
http://www.wikipedia.com 1.38 15 85.2
http://www.msn.com 6.72 60 294
http://www.microsoft.com 2.6 56 372
http://www.blogspot.com 4.48 32 111
http://www.baidu.com 26.20 6 9.5
http://www.qq.com 14.07 95 602
http://www.mozilla.com 0.07 11 142
http://gtmetrix.com/top1000.html

9. • FireBug
– YSlow
– Google Page Speed
• Chrome Speed Tracer
• GT Metrix - Score and history
• webpagetest.org
• Your eyes

13. • Minify
– Take out white space = smaller file size
• Combine CSS and JS into 1 file (or about)
– Less requests for the client
• Compress
– GZip
• Cache
– Keep everything in memory
• Optimize Images
– Resize, quality and compress

14. • Global Configuration (System and Server)
• System Cache Plugin

15. Browser Server Server Browser Browser
Server Zips
Requests Recognizes Sends Receives Unzips

16. Before
After

18. • Only does template, not components or system files
• Data URIs
– Doesn’t work in IE 7 and below
– Turns the images into raw data, less requests
• Gzip template files
– Similar to zipping a file on your computer

19. Before After

20. Before
After

21. • Choose the best format
– Photos=JPG, Flat Colors=PNG
• Check the quality and adjust
• Resize before uploading
• Sprites when possible
• Smush.it - Lossless compression
– YSlow >> Tools >> All Smush.it
• RIOT - Radical Image Optimization Tool

23. • Enabled the following…
– Global Config Cache
– Global Config GZIP
– System Cache
– YooTheme’s maximum optimization
• minify + gzip + combination + data URIs
– Optimized Images

27. • extensions.joomla.org
• Site Management >> Site Performance
• JHC Optimize (1.5, 1.6)
• Jbetolo (1.5, 1.6)
• jFinalizer (1.5, 1.6, 1.7)
• Webo (1.5, 1.6, 1.7)
• Admin Tools (1.5, 1.6, 1.7)

28. • Minify, combine, compress CSS and JS
• Exclude files, directories, components
• JS Ordering
• Compress HTML
• Debug Information
• Bonus – Sprites, CDN, different methods

29. • Joomla Cache, GZIP, System Cache
• Template – Turned everything off
– Handled by 3rd party plugin now
• JHC Optimize
– Combine, gzip, minify CSS and JS
– Minify HTML
• Smush.it all my images (home page)

30. • System plugin order
– All plugins, Optimizing Plugin, Cache Plugin
• Are my pages displayed properly?
• Does all of my JavaScript work?
• Can I cruise on the site?
• Tip: You can turn off caching on a per module basis

33. • Dedicated environment
– OPCode cache
• Use a CDN
• Better image optimization
– Adjust quality, use sprites
• Remove un-used CSS (Hard in templates)

34. • Don’t have to worry about others
• Separate servers for Apache and MySQL
• Server Side Optimization
– MySQL and Advanced Opcode Caching
• Used for larger sites
• More Expensive

35. • Serve on a cloud
• Many servers send you the files
• Helps with proximity
• Speedy multimedia
• Monthly Fees

36. • Do the previously mentioned
• Look into CSS Sprites
• Greatly reduces requests
• Some extensions help
• Involved higher skills to be done manually

37. • Large issue with CMS
• Plugins the pages
• CSS/JS only used on specific pages
• Increases files size
• Increases requests
• Live with it, but disable what your not using

38. • http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-
search-ranking.html
• http://developer.yahoo.com/performance/rules.html
• http://www.webpagetest.org/
• http://gtmetrix.com/
• http://www.smushit.com/ysmush.it/
• http://www.whatsmyip.org/http_compression/
• http://getfirebug.com/
• http://developer.yahoo.com/yslow/
• http://code.google.com/speed/page-speed/