Joomla is a very good CMS out of the box. It is reasonably fast, it has built-in support for structured data and even caching. Yet, it has an unwarranted bad reputation about being slow and bad for SEO. In this series of articles I will tell you how you can tune a Joomla 3 site to improve its SEO and PageSpeed score and how to avoid all the pitfalls when building your or your client's site. The end result is a site that's appealing to both search engines and living, breathing site visitors.
In this first part of the series we'll talk about why this is important, in general, and what are the obvious first steps you can take to get to that goal.
Why does performance matter, anyway?
Before we set off discussing all the different ways you can optimize a site let's start with the implied question everyone has in their mind right now. Does it even matter? Is it really worth my time and effort to optimize my site for SEO and performance, even if it already attracts a decent amount of organic traffic and feels speedy to me?
The answer, for me is a categorical yes on both philosophical and practical grounds.
The first thing that led me down the path to optimize my site was the fact that a slow site is a waste. A slow site wastes everyone's time. Waiting 4-5 seconds for a page to load may not sound that big of a waste but over the course of a year and hundreds of thousands of pages each one of us is waiting to load we are collectively wasting person-years of our time. All the while we are wasting electricity to generate the content slower than it should take, deliver more data than we could be delivering, and process it slower than necessary for display. It shortens our device's battery lives and it shortens our lives through the environmental impacts of the wasted energy's production. We are literally killing ourselves. This is absurd. Okay, maybe a touch of hyperbole here but the core truth still stands: slow sites are wasteful.
Slow sites are exclusionary. They are harder to reach by underserved communities who rely on high-latency or slow Internet connections. Be it the satellite Internet that's the only feasible link to the outside world in an African village or the weak WiFi in a McDonald's parking lot in a poor school district in the USA, the slow site may be setting an invisible fence between its content and the people who could be consuming it and benfiting for it. I strongly believe that information needs to be free and every last person should be able to partake in the information age. We can't afford to be unwitting gatekeepers to open content when we've benefited so much by it in the form of the Free and Open Source Software that powers our sites.
On more practical terms, a slow site creates a frustrating experience to the visitor. They are likely to give up on your site and visit someone else's. If they stay, they are likely to be in a negative frame of mind after being subjected to a long and unnecessary delay. This weakens and hurts your content.
Last, but not least, search engine algorithms do change over time. In mid-2020 Google announced that starting sometime in 2021 the performance of a site, as measured in the Web Vitals reported by PageSpeed Insights, will factor into the search engine results placement. Simply put, a frustrating user experience will penalize the site in the search results. It is in your best interest to have a fast site even if you don't care about the social and environmental impact of your site.
Operating assumptions
Most articles I've read on the subject of site optimization tend to be axiomatic. They purport there's such a thing as the One True Way and you'll be cast to eternal damnation if you don't follow it. The irony of the fact that there are as many mutually exclusive axiomatic views as there are people writing articles has apparently eluded these authors.
There is no such thing as the One True Way. Even implying that a small site built by a single person in their spare time can or, worse, should follow the same methodology as a medium-to-large site being built and maintained by a dedicated team of a few dozen people is out of touch with reality.
I am writing this article series with the majority of site integrators using Joomla out there, building sites alone or as part of a small team, within time and budget constraints imposed by their clients. Most of you are building very small to medium sites for Small to Medium Businesses or even smaller. You can't afford to get obsessed over achieving a "perfect score". That's the nearly unattainable target, not the pragmatic expectation. Yes, you can achieve a perfect score but if that means that you have a site that's a pain in the rear to build and maintain is that really positive or did you unwittingly win a Darwin award?
You should optimize only as much as you can afford to. You have deadlines to meet and, frankly, some of the optimizations might simply take a disproportionate amount of your time for marginal gains. Start simple and only go further depending on your time and budget.
This is the context of my article series. It's all the different ways I've found I can practically optimize a site. These are real world techniques used in real world sites. It's not the idealized version applicable to some fictional site with unrealistic amounts of resources.
To put it in another way. Sure, you can always create a microservices and CDN backed application if you please. Or use some really advanced techniques which work around a plethora of limitations imposed by the one-size-fits-all approach of using a CMS like Joomla (or WordPress, or Drupal, or...) instead of building your own custom application. But I'm not here to tell you why not to use a CMS. I'm here to tell you how you can better use the CMS you have to achieve results that previously seemed elusive or unattainable. These are all things I've done myself on this site or our business site (akeeba.com) and they worked like gangbusters.
The absolutely "obvious"
When you have been using Joomla since it was called Mambo back in 2004, like yours truly, there are some basic truths about how you approach site building that seem fairly obvious.
In the past I thought that people must be out of their mind or just plain silly for not seeing these points which are painfully obvious to me. Eventually I did realize that I have a unique experience of having been into the backends of countless sites and I have collected a unique set of skills over a long career... Sorry, wrong movie. I meant that I did realize that what is obvious to me is fairly arcane to someone who's either starting out now or is used to doing things a different way than I have. Truth be told, if I could reach out to myself from 16 years ago I'd probably slap me for doing things that I learned later they're stupid, usually the hard way.
I'll discuss the three most common mistakes I've seen on sites and how to easily fix them. Hey, some of them don't even have to do with Joomla itself!
Hosting
The most common mistake I see is people choosing cheap, shared hosting and then complaining that their Joomla is slow. Their site is slow, but Joomla is not the culprit. The hosting you choose for your site is crucial. Don't try to shave pennies here!
Have you ever wondered why a cheap host offers a price in the sub-$3 per month range whereas a good quality host charges five to ten times as much for shared hosting of the same or nominally lower specifications? The difference is that the cheapest host is trying to cram more sites on a single physical server and keeps costs down by using slower CPUs and memory, slower mechanical disk drives and more limited Internet connections. All these conspire to make your site appreciably slower to begin with. No amount of tuning can save you when you start with bad hosting.
Try to strike a balance between ideal performance and your realistic budget. If unsure, choose a mid-range priced shared hosting with good word-of-mouth reputation and re-evaluate after a couple of months with real world traffic.
Pre-built templates
Another common mistake I see people make is using a pre-built template with a myriad of options, a generic framework that tries to be everything for everybody, typically combined with dozens of components, plugins and modules to build a site that is really not all that complex.
I understand the appeal, having done that myself in the past. You feel empowered to mess around with your site's layout and try out different options until you find what sticks. I'd say that you should do it if you feel like that's your creative process but don't necessarily stick with the generic, pre-built template once you've figured out how you want your site to look.
The problem is that a generic template is built for flexibility, not speed. In my experience your page load (Time to First Byte - TTFB) can increase by a good 1 to 3 seconds just because of all the unnecessary baggage you're dragging with you using this kind of template. Put this in contrast to my site's TTFB being in the sub-200msec range to get a good grip of what kind of impact we're talking about. Even if you go halfway and only use a template framework you're still dragging along a lot of unnecessary code unless you really know what you're doing. Not to mention that you've installed a substantial amount of PHP and JavaScript code that needs to be regularly maintained for security purposes.
If you have the skills and time you'll be better off creating your own template. This sounds scary, but it isn't if you're already an experienced Joomla site builder and understand Joomla's powerful tools, like template overrides. You can use any CSS framework you want and you can start by forking off the default Joomla template, Protostar.
For this site I chose to go really simple on account of my very limited CSS skills. I merely forked and slightly customized the default Protostar template. It uses Bootstrap 2 which is undeniably ancient. Yet, I made a workable design with very good performance. Again, I am not a frontend developer. I've seen what my wife can do with a custom template on several of her projects and I'm truly convinced there's no limit on what you can implement with Joomla.
Don't overdo it
The third most common mistake I see is people not heeding the age-old adage of "just because you can doesn't mean you should". I am referring, of course, to extensions.
With more than 7000 extensions in the Joomla Extensions Directory it's fairly easy to go overboard and install everything under the sun. A plugin for this, a module for that and before you know it you have 300+ third party extensions loading on every page of your site. As you can imagine, this would make any site slow down to a crawl.
I'll start with the obvious: modules. About 90% of modules displayed on 90% of the sites I've visited or worked on have no real reason of existence. Nobody cares about the weather in your city; if they did, they'd be asking Google, Alexa or Siri instead of visiting your site. Nobody cares about the three dozen buttons, links and banners to content you have on the sidebar. People don't even read the phonebook anymore, why do you think they'd meticulously go through the cognitive overload of an overcrowded sidebar? Even worse, social media sites have conditioned them into entering "sidebar and banner blindness" mode, i.e. they assume this content is junk they don't need to care about. Have you noticed I have a tag cloud on my sidebar? No? Don't feel bad, you belong to the majority of my site's visitors. That's all to say that modules should be used sparingly and only if they truly serve a purpose nothing else would.
Then it's the worst and invisible offender. Plugins. Especially content plugins and system plugins which do full page text search and replace. Content plugins run every time content is displayed on your site. They need to do some sort of initialization and some sort of text replacement. These operations take time. Full page search and replace by system plugins, especially if they use regular expressions, take even more time.
Yeah, sure, if you are displaying 30 modules and have another 50 plugins doing text replacement on your page your site will be slow as a snail. It's not Joomla's fault, y'all. The problem is that we're seriously overdoing it with extensions. You need to practice the KISS rule when building a site: Keep It Simple, Stupid! It's easier said than done and it usually takes a few iterations to get there. Just remember to always re-evaluate whether you need an extension and disable or uninstall it when you're no longer using it.
Override instead of adding cruft
This is closely related to the previous point and a pet peeve of mine. Most people approach Joomla as though it's a closed product, like iPhone, which can only do things if you add cruft onto it. When they want to do something they first question they ask themselves is "is there an extension for that?". When you find yourself having that question as your first thought stop and ask yourself a different question: can I possibly do this with just the Joomla core features?
Unlike most CMS out there, Joomla allows you to override how it displays anything and everything using template overrides and layout overrides. Combined with custom fields and d2Content you can create incredibly complex content that's easy to manage.
As an example I'll just show you our business site's Videos page. The video categories page you land on is Joomla's category list with a simple template override and a sprinkling of custom CSS. When you click on a category you see a list of videos. This is just an articles list with a template override. The length of the video is a custom text field. There are two more custom URL fields pointing to the video file and the poster frame image. These are used to display the upper part of the individual video page (video player). That page is just an article. The article content is the transcript you see further below the page. The transcript has data-timecode attributes which are parsed by the page's JavaScript, itself loaded in the template override, making them clickable links to point to specific points in time in the video player. It's neat and it's all core Joomla.
If you go to a support category page on our business site, like the Akeeba Backup support page, you see there's a tabbed interface with the video tutorials and documentation. These are modules. The module container in this case is set to display as tabs in a template override. The video tutorials tab is the core article list module with a template override. The documentation module is the DocImport module with a custom template override.
Even our product pages are core Joomla articles, this time without any overrides. The header and footer are modules, the former targeted to the specific menu item for the product. The page displays different if you're a subscriber by using plugin tags (stuff in curly braces you put in your content and handled by a content plugin) handled by Akeeba Subscriptions' content plugin. Download links and version numbers are also plugin tags. The HTML structure is deliberately simple and easily upgradeable to Bootstrap 4 or beyond for when Joomla 4 gets released.
Our business site is a very simple site. I've seen the humble Tags list page becoming a beautiful content area selection panel for a non-profit. I've seen core articles with custom fields define the content in a user friendly manner for a touch-first web application, with zero third party code except the JavaScript touch event handler.
Joomla is incredibly powerful as soon as you stop thinking of it as a rigid, closed system like an iPhone and start thinking of it as wet clay you can use a minimal amount of template and layout overrides to shape to your will. Extensions help and many times they are necessary -- you can't reasonably do e-commerce or book appointments with core Joomla, for example -- but they are not the first or the only choice you have as a site integrator.
By sticking to a minimum of well-planned, reputable third party extensions you avoid making the site slower and ensure that it's maintainable in the long term. This is especially important when lesser used extensions drop out of the face of the Earth and you're left with the hard choice of partially reimplementing a site or sticking with an out of date version of Joomla. Remember, kids, an ounce of forethought is worth a pound of frantically trying to fix a bad decision when it's already too late.
To be continued
Come back tomorrow for Part II: Basic settings.
Thanks Nicholas for the first part of this article. It is a timely reminder of reviewing what's installed on a site. If it's no longer needed get rid. If you can use Joomla core, then do. The tension of using flashy templates and builders in order to make the site look good may in fact compromise the load speed of the site. This is what I constantly wrestle with and hope your article will help me to see the way forward for better SEO and page speed. Thank you for writing this and supporting the Joomla community.
You're welcome, Alex! The second part gets thing rolling with more hands-on yet easy optimisations you can implement on your sites.
Nice and useful series of articles every developer or administrator should have in mind. Many people who run or build sites they don't want to understand the benefits of simplicity and performance.
PS In case you want to enhance the readability of this page but no time is left for this, please allow me to suggest this simple and quick override :)
div[itemprop="articleBody"] {
max-width: 600px;
font-size: 1rem;
line-height: 1.6;
margin: 3rem 0;
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
}
This site is currently using Bootstrap 2 and a small customization of the default Protostar template shipped with Joomla 3. This was a deliberate choice. There was no point implementing a template with something else — and have to do template overrides for all core components — when I know that in a few short months Joomla 4 will be out and ship with Bootstrap 4 which does use relative units. I'd rather spend my time creating a J4/BS4 template instead.
Regarding your settings, I'd actually use a 0.9 rem base font size for the text, about 1.2 line spacing (I'd have to test the exact amount) and 0.5 em top and bottom margin. This is more in scale to the rest of the web, meaning that people won't have to change their accessibility settings to accommodate my site.
Again, I have not done any work on the accessibility front for this site not because I don't have time but because I don't want to waste my time when I know Joomla 4 will do two thirds of the work for me. Once I change the site to Joomla 4 I can work more on accessibility settings. If I have the time I will even create an alternate stylesheet for easier readability and another one for people with dyslexia. It's on the to-do list BUT they all depend on Joomla 4 being released first.
Your serie of articles is so good, but not in the right order, so if I am in TWO and click to next : I am in ONE instead of being in THREE ....
Thanks for all
The links in the article itself are correct.
The Next and Previous buttons are actually rendered by Joomla. In its never ending wisdom, Next displays the next article in the category list. Since the category list is ordered by date descending (news first), the “next” article is the immediately previously published article. So, if you are in Part II the Next link in Joomla leads to Part I, i.e. the article I had published immediately before Part II.
Yeah. I know. It's not like you can even change these buttons just for this one category. They change globally. So, we're stuck with these weird buttons...
Thank you for your insights. The videos page really strikes a chord with me as I have been trying for ever to build something way too complicated with videos at it’s heart. I am wondering if you were building a site with paid video contact would you have a suggestion for how to do so. eg using your method but with the option watch the first 2 videos of 12 for free. And then a Pay Wall to watch the remaining 10 videos. Any thoughts gratefully appreciated?
The beauty of having a video player as articles is that standard article rules apply. If you have a sales system which allows limited access to a category's articles until you make a purchase you have the solution you're looking for.