Chapter 10: Performance Optimization and Security
In this chapter, we will look at some of Joomla’s more advanced concepts. You will learn about caching, improving performance, security, and more.
What’s A Cache?
A cache (pronounced like “cash”) is a collection of data saved at an earlier point in time for later use and quick access. Caches improve performance. As it relates to Joomla and web development, there are two caches to think about: the server cache and the user browser cache.
Server Cache
Every time a guest visits your website, the web server needs to do some work. The content they’re viewing has to be retrieved from several files on your server and tables in the database, pieced together, and sent to the visitor. This requires time and server resources. To save on these resources, Joomla can save a cached version of an entire page, or portions of a page for later use.
With caching enabled, when a guest visits a page, Joomla generates the components and modules, and saves the output for later. This saved version is the cached version. When a guest visits the page another time, rather than regenerating the entire page, the server can just use the cached version of the components and modules, put them together, and send them to the user. That way, the server doesn’t have to regenerate each individual element every time someone wants to view the same page. This saves on overall processing required and database use.
If your website only has a few guests at a time, caching isn’t extremely important. But if your website has dozens, hundreds, or thousands of concurrent visitors, caching becomes a must. You don’t want to waste server resources regenerating the same page hundreds of times per second. Failure to enable some sort of caching method on high traffic websites will cause slow, unusable websites or very expensive hosting bills.
User Browser Cache
Besides the server cache, there’s a cache system built into the user’s browser. The browser cache can store important site files like the CSS, HTML, images, and JavaScript for later use. For example, if you use the same background image on every page of your website, it makes little sense for the user to have to re-download it every time they visit another page. Instead, you can leverage the browser cache so the user’s browser stores the image for later and skips downloading it in the future.
Leveraging the browser cache saves your server resources and bandwidth. Even if you don’t plan on having many users, using caches is a good practice to implement.
Server Cache Settings
By default, Joomla has three different server caching methods. The page cache, conservative caching, and progressive caching. The conservative and progressive options can be found under the System tab of the Global Configuration.
Each type of cache, whether it’s a module, component, or the entire page being cached, has an expiration time. After this time, the cached content is deleted, and a new cached version is created when a next visitor loads a page. For progressive and conservative caching, the cache is automatically cleared whenever something is saved. So if you save an article, the cache is immediately cleared and visitors can see the new version on page reload. This does not apply to page caching.
What’s The Difference?
Both conservative and progressive caching methods will cache the modules and component being displayed on a page. All of Joomla’s built in caching options only affect users who are not logged in (Guest user group). Server caching is not used for logged-in users, though some third party extensions may enable this functionality.
With conservative caching, you can disable caching for individual modules. If your site records information about visitors, and needs to display modules differently to each visitor, you can disable caching for these individual modules, so each visitor gets their version of the content. An example would be a shopping cart module, since each visitor’s shopping cart might have different contents.
With progressive caching, you cannot disable caching for individual modules. If a guest visits your site, they will see the same version of the cached module as all the other visitors.
If you have a dynamic module that changes for each individual guest, you would need to enable conservative caching instead of progressive. For most informational websites, blogs, etc. progressive caching will suffice.
The page cache is not a feature found in the global configuration. It’s a feature enabled as with a system plugin. It’s disabled by default. If the page cache plugin is enabled, conservative and progressive caching will be ignored. Joomla will cache an entire version of everything on the page and use this for every user that visits until the cache expires. You can’t cache some things and not other things, since the whole page is cached. This also means modules and components that do not have cache support built in will be cached as part of the page cache.
Cache Settings
View the cache settings under the System tab of the Global Configuration. Here, you can set the settings for the cache.
Determine what type of cache you think would work better for your site based on the above information and enable caching.
Here is what each individual setting does:
- System Cache: The type of cache you’re using
- Cache Handler: File – The only option by default
- Platform Specific Caching: If your site delivers different output to different device types, turn this on. If not, leave off. Usually set to no.
- Cache Time: The time in minutes before the cache gets refreshed. The default is 15 minutes. That means after 15 minutes, the old cache is deleted and a new one is generated for the next 15 minutes of time. If your site rarely has any updates, a longer cache time may suffice.
- Path to Cache Folder: The location where you want the cache to be stored. If left blank, defaults to the “cache” folder under wherever you installed Joomla.
Viewing The Cache
You can view your cache by navigating to the System page and clicking the “Clear Cache” option under the “Maintenance” section. This takes you to a page that displays what’s currently being cached. You can clear the cache for each individual item, or clear the cache for the entire site.
Notice that there are different caches for content, menus, modules, etc. This is important. Rather than caching the entire page, Joomla caches elements of a page individually. That way, we can select what gets cached.
For example, if you have a site that largely remains the same, but one module changes per visitor, we might still want to cache the article but not the module. We can individually turn the cache off for dynamic elements of the page, but leave it on for the less-frequently changed areas.
Module Caching
Each module is cached individually. Not all modules support caching. You can disable caching of certain modules if you need to. This option is usually found under the Advanced tab of all modules that support it.
The main menu is an example of a module that we probably want to cache, since it’s going to be the same for each visitor.
If the Caching option is set to Use Global, it will use the option from the global configuration. If set to off, it will override the caching for this module and turn it off.
Modules that frequently change, are specific to individual visitors, or dynamic should have caching disabled.
Note that modules are cached per page. If a module displays something different from one page to another, it’s still OK to cache it. As long as the content of the module itself isn’t regularly changing on a particular page, like a shopping cart module, it’s safe to enable caching.
Note: If you ever encounter a situation where you update something and you’re still seeing an older version on the front end, it’s likely due to caching. If something is not updating as expected, you may need to change your cache settings, disable caching on something, or clear the cache from the System Maintenance tools. Usually, everything will work fine. But sometimes things fail.
Page Cache
If your site is relatively static and does not change often, like an informational business website, you can enable the page cache. The page cache will cache the entire page for guests until a timer expires. After this time, the cache is updated. This is the fastest cache method, but also the most restrictive. Only use on pages with no dynamic content.
You may enable the page cache by opening the plugin manager under System → Manage → Plugins and then search for “page cache.” If only some pages of your site contain dynamic content, you may choose to exclude certain menu items from the page cache. If a page is excluded, then progressive or conservative caching options set in the global configuration will still apply to it.
If you enable browser caching in the page cache settings, then each entire page visited will be saved locally on the user’s computer for a set amount of time. This will make your pages load even faster when users revisit the same page.
Note that with page caching enabled, it will take time for guests to see newly published content. If a guest downloads a page, that’s the page they’re getting for the next fifteen minutes (or however long the cache is set for). If within those fifteen minutes you update the article or make any other changes to a page, they’ll still be getting the old version of that page until the timer expires or they log in.
If your pages frequently change, do not enable page caching.
The page cache will use the same cache time set in the global configuration under progressive/conservative caching. Enable either of those options before enabling page caching.
Testing The Cache
You may test the cache by enabling any of the cache settings, navigating to the page on the front end (as a Guest, so log out) and then look at your cache directory wherever you installed Joomla. Files and folders should appear here if a cache was created successfully. You could also check the “Clear cache” page under the system maintenance tools and see if anything appears.
If you want to test page cache, you can log out on the front end, view an article, edit it in the back end, refresh the page in the front end, and it should still have the old version of the page displayed even after you refresh. It will continue showing you the old version until you clear the cache in the back end, log in to the front end, or wait until the cache time expires.
Performance Improvements
There are several other things we can do besides enabling caching to improve our site’s performance. The faster your website loads, the happier your users will be, and the longer they’ll stay. This can lead directly to more conversions.
It might make more sense to test out these optimizations in a testing directory on a paid web server rather than your local computer, so you can ensure everything will work when the site goes live. Different servers may or may not support all the optimizations, and changes to the server options itself might be required.
Gzip
Gzip is a file compression technology that functions similarly to zip files on your computer, if you’re familiar with those. Gzip is used to compress the pages on the server before they are sent to the user. Once the browser receives the Gzipped page, it decompresses it and displays it to the user. This reduces the file size, amount of bandwidth required, and ultimately means the user gets the page faster.
All major web servers (e.g. Apache) support Gzip. All major web hosts support Gzip. If you’re testing with XAMPP, that uses Apache, and it’s configured to work with Gzip.
To enable Gzip, simply go to the Server tab of the Global Configuration, turn it on, and save the configuration. If you do nothing else to improve your site performance, at least do this.
Image Optimization
Images are often the largest files on a page, as they contain a lot of information.
Unfortunately, Joomla does not include support out of the box for optimizing images, aside from basic crop and resize functionality. If you want to optimize all the images on your website, you will have to optimize them on your computer before uploading them using graphics editing software, or find an extension to help.
Compression
You can compress your images before you upload them using tools like TinyPNG which compresses PNG images and reduces their size, often significantly.
Crop and Resize
You should also be sure you’re not delivering full resolution images. Don’t upload unedited images directly from your phone, for example. They will probably be several megabytes in size. Ideally, most images should be under 200KB. You may need to resize, crop, and shrink your images down before uploading them.
Create Thumbnails
If you need to display a full resolution image, such as a high detail portfolio picture, or a photo intended for printing, create a thumbnail. A thumbnail is a small size version of a larger file. For example, if you want to show a 12 megapixel, 4290×2800 pixel image, create a thumbnail that’s only 429×280 pixels. Display the thumbnail in your article, and have it link to the full-size image.
Use Webp Format Images
Consider using the webp image format instead of PNG or JPG. It’s an image format developed by Google and is supported in all modern web browsers. It uses advanced compression techniques while preserving transparency. Extensions exist which automatically convert all your sites images to webp and display png or jpg as a fallback if the user’s browser doesn’t support webp.
Use SVG Vector Graphics
If you’re using vector graphics for diagrams, icons, or illustrations, you can display the svg files. Browsers support viewing svgs.
All the images on my website are in svg or webp format. Most of them are under 100kb in size.
Lazy Load Images
Lazy Load your images. There’s an option to lazy load images whenever you insert them into your articles with TinyMCE. Almost always choose this option. It means images don’t get loaded until the user scrolls down to them. So if a user is only viewing the first half of your page, it doesn’t load the bottom half until they get there. There are also extensions that help with this.
Other Methods
There are other, more technical ways to improve your site performance that have to do with how files are delivered, how things are optimized, and how code is arranged. You do not need to know the inner workings of these optimizations, but a general idea of what each feature does is important. These techniques may require you to install third party extensions. I will suggest some soon. But first, let’s understand the techniques.
CDNs
Content Delivery Networks (CDNs) are hosts that take your media and distribute it across several servers, often spanning multiple continents. When a user views a page, the static images and files are delivered to them directly from their closest server. This reduces the file transfers required by your main server, and users get the media faster, as it comes from the server closest to them.
File Minification and Combination
You don’t need to understand how CSS and JavaScript work to use Joomla. But you should know that Joomla and its extensions use a lot of JavaScript and CSS to work. These files add interactivity to your website and tell the browser how your pages should be styled. In very simple terms, CSS files give your site its colors, and JavaScript is what makes dropdown menus and tabs work.
Your pages may require multiple CSS files and JavaScript files to work properly. Even a blank Joomla site using the default template will load 10 different CSS and JS files.
These files may be minified. When they are minified, all unnecessary elements are removed (spaces, code comments, etc.). Only the code required to make it work remains. This is a compression technique.
When files are combined, there are less requests on the server. It’s faster to deliver one combined CSS file than it is to deliver 5 individual files.
After combining and minifying your files, you can further improve performance by handing them over to a CDN.
Eliminate Unused CSS/JS
Extensions exist to eliminate unused CSS and JavaScript. Often, these files contain many things not used on every page. Eliminating these attributes/functions from certain pages can reduce the size of the individual JS/CSS files and result in faster load times.
Third-Party Caching Techniques
Joomla provides a decent caching system. Third party extensions can take it a step further, enabling caching for logged-in users, browser caching for individual images, and more.
HTTP/2 Push
HTTP/2 Push is a way to send files to users before their browsers even ask for them. They’re preloaded in the background, so if a user ends up needing them, they’re already there.
Host Large Files & Video Elsewhere
If your site contains a lot of multimedia or downloadable files, do not store them on your web server. Use cloud storage solutions and link to the files there instead. If you’re showing videos on your site, host them on YouTube or other video platforms and embed them on your pages. Do not host them directly on your web server.
Testing Site Performance
Before and after optimizing your website, you can use a tool called PageSpeed Insights to see how well your site is performing. This was created by Google. It only works on live public sites on the internet, not test sites on your local computer. The tool runs online and needs to view a page on your site. It loads your website and scores it on a scale of 0 to 100 based on a variety of performance and usability factors. It will specifically tell you what areas need improvement.
Aim for a score above 80 at minimum. Ideally, it should be in the high 90s. You may want to run the test several times over the course of time, to see if it improves. Sometimes you’ll get an unusually low score due to network congestion or other issues out of your control.
This test, like any test, is subjective. You can’t rate a site’s performance entirely just based on this score alone. Do keep in mind that Google may use these factors in its search algorithms.
Security
It’s important that your website is secure for yourself and your users. There are a few ways to improve security in Joomla.
HTTPS/SSL
HTTPS works by encrypting communication between the browser and the server. An SSL certificate is issued and used by the server to encrypt data. This way, no one between the user and the server can read the data. It used to be an optional feature, but it’s now required and may affect your sites search rankings. Most web hosts offer free and paid HTTPS options. The most common free solution to get an SSL certificate is through LetsEncrypt, and should suffice for many use cases. If your site is asking for sensitive user data, collecting payment information, or you just want some added convenience when it’s time to renew the certificate, use a paid SSL provider.
Most web hosts automatically give you an SSL certificate. Some may require configuration. You can easily tell if a site’s using SSL/HTTPS by looking for the security lock icon next to the URL in the address bar.
Once your SSL certificate is up and working, you can force SSL through the Global Configuration. This will require all connections to be made securely with HTTPS, rather than HTTP.
On a local test server, there’s no need to enforce HTTPS, as we’re the only ones with access (unless you intentionally changed your local server config to allow outside connections). Leave it disabled if you don’t have an SSL cert.
HTTPS should be enabled and enforced on all live servers.
Update Joomla and Extensions
The next thing you can do to ensure your website is secure is to keep up with the latest updates. Make sure you install all Joomla and extension updates. Failure to do so may cause security breaches. Joomla is secure, but it has been compromised before. As security researchers discover vulnerabilities, they are reported to the Joomla team and a patch is issued promptly.
Don’t let your website get hacked because you forgot to hit the update button.
Assign Appropriate Permissions
Make sure you’re assigning your users/staff to the correct user groups. Don’t give your staff more permissions than they need to accomplish their work. Don’t have more than one Super User. Make sure your staff are trained on their roles and understand what they’re supposed to be doing. Have written guidelines in place for them to reference. If you give your writer Administrator privileges, and their only job is to write articles, you’re doing something wrong. They could accidentally (or intentionally) destroy portions of the site.
Two Factor Authentication
Two Factor Authentication (2FA) is a way to ensure your users are who they say they are. Even if a users password is compromised, they’re required to have a security key, or enter a code, to get into the website. That way, unless the user’s security key or phone has been physically taken from them, the attacker can’t get in. 2FA can reduce the risk of unauthorized remote access by an enormous factor.
Joomla supports two factor authentication through Google Authenticator and YubiKey. To enable this for your special users, find the plugin with the plugin manager and turn it on. The additional settings to finish configuring it can be found in the user’s profile. It’s a good practice to enable this for anyone who has access to your administrator panel.
Note if using Google Authenticator: It’s just called Google authenticator. It will work just fine with other authenticators as well, like Microsoft Authenticator.
Here’s a guide on how to enable 2FA, if you need help.
Make Backups
This was discussed in the previous chapter, but it bears repeating. If all else fails, having a backup to restore from will save you from the pain of completely losing your website to a hack or act of God. You can use Akeeba backup in addition to whatever backup systems your host provides. Save your backups on your local PC if you’re just running a small site, or wherever the person in charge of data security at your organization tells you to. Save them to secure cloud storage if you can.
Only Have One Super User Account
Super Users are the only user group allowed to edit the global configuration and completely take the site offline. It’s a common security practice to only have one Super User account, which is only used when absolutely necessary. For your day-to-day admin tasks, you should have a separate user account in the Administrator user group.
Suggested Performance Extensions
The following extensions may greatly improve your site’s performance. They’re easy to configure and use. Note, you will need to extensively test your site out after enabling any extension that improves performance. It’s possible that these could break things. Some tweaks may be required to fix certain issues combining, compressing, minifying, and delivering files.
JCH Optimize
JCH Optimize is an extremely useful tool for achieving most of the above performance optimizations. It can compress, minify, and combine your CSS and JS files. It can optimize images. It can automatically lazy load all images. It has CDN support, and more. The free version has many of the features you need to get started, and the paid version is pretty affordable.
DJ-Webp
DJ-Webp is a simple plugin that automatically converts your png and jpg images to webp format. It’s free and works well!
Akeeba Admin Tools
Admin Tools is another very useful backend security/admin extension. It allows you to password protect your admin directory, migrate links, maintain the database, and more. Free and paid versions available. The pro version has a firewall to protect you from a variety of common attacks.
Additional Resources
Cloudflare
Cloudflare is an organization dedicated to optimizing and securing websites. They’re most well known for their DDoS protection and CDN services. They offer both free and paid services. The free plan includes DDoS protection, CDN, and SSL services. The paid services include image optimization and more security. I’d highly recommend checking them out. You can easily protect your website with Cloudflare by registering a free account and configuring your domain’s nameservers according to their instructions. It only takes a few minutes.
Kevin’s Guides uses Cloudflare. My page speed improved by 60% after setting up on their free plan, and that’s after I made my improvements with JCH Optimize and webp.
