After the headache of spending the past day reducing my Joomla site’s page load time from 15 seconds to three seconds, I think it’s appropriate to discuss some techniques to show you how you can improve your page load time.
Enable the Default Joomla Cache
Cache stores your web pages so that the server doesn’t have to query the database every time a page is requested. Because of this, the website will respond much faster when a user visits your site.
You can find this by going to System > Global Configuration, and then clicking the Server tab. Set it to Conservative Caching if you update your site regularly; otherwise, set it to Progressive Caching.
It is advisable to clear your cache whenever you’ve made updates to your Joomla website. You can do this quite easily by going to System > Clear Cache.
Enable the System Cache Plugin
Similar to (but not to be confused with) the Default Joomla Cache, the System Cache Plugin will cache the content of your pages, and will speed up page loading times considerably.
Because the cache is preserving old data, you will need to clear your cache whenever you update your website. That way, the old data is deleted and the plugin will cache the new content.
This plugin can cause issues with certain elements of your website though, such as shopping cart systems and logins, so please do a thorough test of your site after enabling it.
You can enable it by going to Extensions > Plugin Manager > System - Page Cache. There is an additional option within the plugin to enable Browser Caching, which will store a copy of the page on the user’s browser after their first visit.
Enable Gzip Compression
Enabling Gzip will mean your site is compressed before it is sent out. It stores your pages in a zip file, and then unpacks on the user’s browser when they visit your website. This will result in much faster loading times.
While some frameworks may offer this functionality within their configuration, other don’t, but there are available extensions that will do this for you.
In some situations, this can cause issues with elements of your website, so be sure to test your pages after activating these features.
Optimise Your Images
A basic, but common mistake, is to upload your images to your web server without optimising them. Worse still, is when the images are uploaded to the server from a digital camera, and then resized in the HTML code or editor. The browser needs to load the image from the server, so whenever you upload a large image and downscale it in the HTML code, the browser still has to load the original image, and then resize it, and this will massively slow down your website.
So before you upload any images to your web server, use a photo editing software such as Photoshop. First, make sure the resolution of the image is set to 72dpi, and then resize the image to the size it will display on your web page. Photoshop also includes a handy tool for extra compression: File > Save for Web & Devices, which will further compress your image based on the configuration options you choose. If you don’t have access to Photoshop, not to worry: there are some decent online tools that can do a similar job, such as tinypng.com, which can reduce the file size of your images by 60-70%.
Use CSS Sprites
CSS sprites are another technique for image optimisation, but they have their own way of working. Instead of creating a separate background image for each element on your page, the web page will load more quickly if you create a singular image file containing all your background images, and then set the background position for each element.
When you use an image sprite, the browser is loading just one image for all your CSS images, which reduces the number of HTTP requests and saves bandwidth.
Uninstall/Delete Anything you Don’t Need
Delete anything your website doesn’t need, but make sure you backup the site and perform tests at intervals to make sure your site is still functioning properly. Unless your initial Joomla installation started as a blank template / framework, you will more than likely have an abundance of redundant components, modules, and plugins, that do nothing other than slow your site down.
This deletion exercise isn’t limited to extensions though. You should also remove any unused fonts, templates, module positions, and any irrelevant code in your CSS / LESS files.
Make Use of CSS3 Techniques
CSS3 techniques introduced a lot more flexibility in terms of how you can apply styling to your page elements. The possibility of rounded corners, gradients, and web fonts, for example, have all but made image buttons redundant.
When possible, you should opt for CSS3 rather than inserting images. Images add to the number of HTTP requests - making the website take longer to load, whereas a few lines of code in your stylesheet will not have any effect on the loading time.
Use a Content Delivery Network (CDN)
Before talking about CDN’s, it’s first important to note that the further away your website visitor is from your server’s location, the longer it will take your web page to load for them.
Choose a Reliable Server!
This is often an overlooked factor when trying to diagnose why your website is slow. Even if you performed all of the above optimisation tips, your efforts will be in vain if you have an incompetent hosting server.
It’s not just a matter of finding a good hosting server. It’s also important to find a good Joomla hosting server.
Leave a comment
Make sure you enter the (*) required information where indicated. HTML code is not allowed.