Optimize Joomla's Loading Speed

There are many variables when it comes to how fast a webpage will load, and most of them are out of the developer's hands. Thankfully, there are a few things we can do to optimize how the page is delivered to the user, speed up the whole browsing process, and also use less bandwidth.

Server-side caching

If your website uses a database to generate content, like most CMSs do, there is a fair amount of work that the server has to do in order to generate the page's HTML before sending it to the browser. Content like pages and articles of a site, which aren't designed to be changing all the time, can be stored by the server, allowing it to just reference the cached version instead of having to recreate it every time.

  1. Joomla has server-side cache functions built in, under Global Configuration > System > Cache Settings. Set the cache to "ON - Progressive caching" and set the Cache Time to whatever you see fit. (This is how long a cached page is stored before the server re-creates it. The default, 15 minutes, works well.)
  2. One downside to having caching turned on is that it can be a pain to have to do the three clicks it takes to clear the cache, if you want to force Joomla to show your changes right away. To solve this, NoNumber Cache Cleaner works nicely. It adds a "Clean Cache" button to the status bar of the Administrator panel in Joomla, and can be configured to clear the cache each time you save an article.
  3. If you site has dynamic elements, like contact forms, caching everything can cause issues. To selectively cache your site's elements, so as to not cache problem components, use JotCache. It allows you to exclude parts of your site that you don't want cached, and gives you the added benefit of being able to clear the cached versions of specific pages rather than clearing the entire cache (useful on very large sites).

Browser-side caching

As a user browses the web, many sites will store cached versions of parts of their content locally on the user's computer, so that those items don't have to be re-downloaded each time the user goes to the site. To enable this manually, add the following code to your site's .htaccess file:

<IfModule mod\_expires.c>

ExpiresActive on  
ExpiresDefault "access plus 1 month"  
ExpiresByType text/cache-manifest "access plus 0 seconds"

\# Your document html  
ExpiresByType text/html "access plus 0 seconds"

\# Data  
ExpiresByType text/xml "access plus 0 seconds"  
ExpiresByType application/xml "access plus 0 seconds"  
ExpiresByType application/json "access plus 0 seconds"

\# Feed  
ExpiresByType application/rss+xml "access plus 1 hour"  
ExpiresByType application/atom+xml "access plus 1 hour"

\# Favicon  
ExpiresByType image/x-icon "access plus 1 week"

\# Media: images, video, audio  
ExpiresByType image/gif "access plus 1 month"  
ExpiresByType image/png "access plus 1 month"  
ExpiresByType image/jpg "access plus 1 month"  
ExpiresByType image/jpeg "access plus 1 month"  
ExpiresByType video/ogg "access plus 1 month"  
ExpiresByType audio/ogg "access plus 1 month"  
ExpiresByType video/mp4 "access plus 1 month"  
ExpiresByType video/webm "access plus 1 month"

\# HTC files (css3pie)  
ExpiresByType text/x-component "access plus 1 month"

\# Webfonts  
ExpiresByType application/x-font-ttf "access plus 1 month"  
ExpiresByType font/opentype "access plus 1 month"  
ExpiresByType application/x-font-woff "access plus 1 month"  
ExpiresByType image/svg+xml "access plus 1 month"  
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

\# CSS and JavaScript  
ExpiresByType text/css "access plus 1 year"  
ExpiresByType text/javascript "access plus 1 year"  
ExpiresByType application/javascript "access plus 1 year"

<IfModule mod\_headers.c>  
Header append Cache-Control "public"  
</IfModule>

</IfModule> 

You can change the values as you see fit, depending on how often content on your site changes.

Compression

The third way you can reduce your loading times is to reduce the size of everything being loaded.

  1. Content
    • Turn on Gzip Page Compression in Global Configuration > Server > Server Settings. This compresses the content retrieved from the database before it is sent to the user.
    • Doing this has one caveat, and that it that it breaks Facebook's preview of your site. To fix this, use Prevent Gzip for Facebook.
  2. Images
    • By default, images have a lot of data that is not actually part of the image, as well as storing information in a longer form than needed. To clean this up, run your .png and .jpg images through TinyPNG before uploading them to your site.
  3. Everything else
    • JCH Optimize is an outstanding product for compressing everything. It's easy to set up, and does several useful things. It will combine CSS and JS files, reducing the amount of requests from the server, and it will compress those files as well. It'll also compress your HTML, and many other things.

To test your site's speed and for more advanced things to improve, use Google's PageSpeed Insights and Pingdom's Website Speed Test. They tend to be useful resources, but Google's likes to suggest changes that you've already done, so take theirs with a grain of salt.