Joomla Performance Tuning V: Content Quality
Have you ever thought that transfering disembodied data across the globe using lasers and electromagnetic fields to your thinking rock powered by lightning so that it conjures some scribblings on a piece of glass which make you vividly hallucinate my thoughts is nothing sort of magic? Well, folks, let's talk about the source of those hallucinations, what we call content.
The web is practical modern magic, designed to communicate our thoughts to people we have possibly never met and never would have the chance of talking to. In this light, web sites are tools for communicating. Search engine optimisation (SEO) is a means to an end, not a goal in its own right. SEO is about helping more people find our thoughts.
Let's talk about what to do and, most importantly, not to do for our content to make sense for our readers, for ourselves and for the magic thinking rocks that weigh our words and decide which brains to infect with them.
Break down long articles
I know that I am guilty of writing very long form content. My articles typically run in the few thousand words. Beyond a certain point they become too taxing to both humans and machines consuming them.
If your articles are longer than a couple of paragraphs it helps putting headings in them. Headings act as anchors for the reader, both the first time and the returning one. Speaking of anchors, if you want to be able to link to specific headings remember to give them
id attributes. I admit I don't frequently do that in articles. I do, however, practice that when writing documentation.
Headings will only take you this far. Once you get to a couple printed pages long your content becomes too long for a human to take in. It is best to break it down into logical groups of those headings and put each one of them in a new page.
You do not need to and should not create a new article for each page! Joomla has a built-in article pagination feature. Use the Page break editor button to separate your logical pages. Joomla will show a table of contents at the top of each page and links to the previous and next page in your article.
Keep the DOM size in check
Your entire site and your content are delivered as HTML to the browser. HTML is structured text. Each tag creates a node in the Document Object Model (DOM) tree, the internal representation of the parsed HTML in your browser's memory. OK, technically it's more complicated than that but this is a good approximation to begin with.
A very large or excessive nested DOM will cause problems when rendering your site. The browser will need to expend more effort to lay out your page. Interactions with the page will require the browser to recompute a very large number of DOM nodes. Your pages will be slow to load, display, scroll and interact with while using up a whole lot more power. If your content is likely to be consumed by 9 out of 10 people out there on a mobile, underpowered device you should take that into account.
You can keep the DOM size down in at least two ways. First, break down long articles in pages as explained above. Second, mind your HTML! Don't use inline styles, use classes. Chances are your inline styles are something you will be reusing and will fare better as a CSS class anyway. Don't paste directly from Word or another site. It's better to paste as plain text and spend a bit more time reformatting your content than end up with a rat's nest of tags and nonsensical CSS classes.
Regarding DOM nesting it's something that starts with your template. Try to organise your template sensibly, without too many nested tags. This may push your CSS skills a bit. I should know. I am not exactly a leading authority in creating a page structure in CSS out of thin air. Whenever I had to do something that would normally require me to use half a dozen nested CSS tags I asked my wife and she came up with a solution that at first looked like dark magic but once I dissected it to its components it made a great deal of sense. Flexbox and CSS Grid are your friends in creating layouts that are powerful as they are easy on the browser and yourself to understand. These things are magic. If you're not into writing CSS from scratch you can use Bootstrap 5 (shipped with Joomla 4) which, unlike its previous versions, is a slightly friendlier wrapper around Flexbox.
Hey, purists: I know that Bootstrap 5 is heavy, blah blah blah. Please remember that most people reading this article are trying to make sites with a tiny team, on impossible deadlines and shoestring budgets. Losing 10 points in Lighthouse is not the end of the world. Not delivering a site in time may just as well be.
Write primarily for humans, not bots
A lot of the advice you will find on writing good content for the web focuses on short term goals. Typically it is telling you how to make search engines rank your content highly, at least in the short term, with contemptuous disregard on how humans perceive the end result. For some sites, such as limited time marketing campaigns, this makes sense and if you have such a site continue doing that. For most sites, however, this may be a shortsighted approach.
Search engines may highly rank your content and place it in front of more eyeballs but this means nothing if it doesn't lead to more traffic on your site. A human who has visited your site before and found it full of nonsense will ignore your precious highly ranked search results when they're looking for something else. Humans remember bad experiences more than they remember good ones. This is a key feature of the human nature, one that kept our primitive ancestors alive — learning to avoid the cave with the hungry bear was a key survival skill. I mean, people still hold Joomla 1.0 against this project — never-mind that Joomla has not looked or worked anything like it the past 15 years.
The best approach for your content is to write it as it is most appealing to your intended audience. My content, for example, falls into two rough categories: technical how-to articles and opinion pieces like this one here. They have distinct audiences with different needs and expectations. My technical articles focus on what you have to do with a short description of why and a longer explanation of exactly how which is clearly marked as such. They are laid out in the order you need to do things. Caveats are pointed out. Plenty of headings help you find your place if you found yourself lost. The writing is dry, technical and to the point. Well, most of the time.
My opinion pieces are a different story. My intro text starts with a short hook that will make for a good summary under the link card when shared on social media. I use eye-catching images for the same reason. In the full text I lead with a paragraph that sets the expectations and the tone. You can admit it, my over–the–top paragraph about how the web works made you click and read this article. I try to employ cohesive storytelling, each section building up on what I have already covered. I finish with an outro paragraph which gently takes the reader back to the here and now and prods them to think more about my content. The content itself is written in the same informal tone I'd use when making a presentation.
Find out what are your audience's expectations and modulate your tone of voice and content structure to appeal to them. Avoid what would best be described as "wooden language" i.e. excessive formality — unless you're a lawyer or writing a press release for the Prime Minister in which case it can't be avoided. On the other end of the spectrum and unless your audience explicitly expects that kind of content please avoid excessive jargon, slang and colloquialisms. Avoid verbalism; your erudition is not called in question when writing content for the web. I understand the irony of telling you not to use big words by using big words; it was intentional and demonstrates how out of tone content can give your readers a pause. Finally, avoid "fluff" i.e. saying something simple with too many words. If your content reads like it was written by a bored student trying to hit a word limit you lose credibility.
Spell and grammar check
Always check your content for spelling and grammar mistakes. Nobody expects you to be at the level of a linguist, unless you are one, but do make an effort to avoid blatant mistakes.
Most modern browsers and Operating Systems include built-in dictionaries and spell checkers. I am using Safari to write this content. All I need to do to check my content for spelling and grammar is right click on it, click on Spelling and Grammar and have it spot my mistakes and make recommendations.
Beyond that, you can use third party resources such as Grammarly and Thesaurus to improve your writing. You could also try marrying an American who's a stickler for proper grammar like I did but third party resource are very likely far more practical. (Hey, Crystal, if you're reading this content, please don't give me an F.)
Beyond your content tone and structure you should avoid unnecessary disruptions in the visitor's reading flow. Don't interject advertisements in your content. If you must, keep them to a minimum and clearly mark them as such with subtle visual cues (such as a more opaque background or a slight border). Avoid big, moving, flashing, in–your–face; or popup, popover and pop-under advertisements. They are extremely unfriendly to people with cognitive disabilities, epilepsy or ADHD like yours truly. I use an aggressive ad blocker because this kind of ads make it impossible for me to focus on the content. Do not use advertisements which look like part of your content or your site, they are throwing off your visitors and they're likely to close the tab because your content suddenly makes no sense. Do not use advertisements that magically appear when people scroll the page. They disrupt the reading flow and they trigger a flight response. For the love of whatever you hold dear, do not under any circumstances link random words to advertisements. When people see a link they expect something useful, not utter drivel.
Do not use auto-playing video unless your content is only video, clearly marked as such and your users expect it to start playing. Many of us have small children trying to sleep and we are on our phones while they settle to sleep, a process that can take over an hour on a regular basis. Autoplaying videos can make our phones start blurting out sound and wake the child up. Most parents feel very strongly about that, to the point that it'd be very harmful for your physical safety to be in the same room as them once you identify yourself as the source of that autoplaying video. Similar reactions occur when our partner is sleeping, we're at the office, the train station (ditto) and so on and so forth. Even when in our lonesome those auto-playing videos are unexpected, startling, annoying and make us never want to visit your site again.
In the same note, please, do not overdo it with popups and popovers. I don't want your cookies, a point I already talked about. I don't want to sign up to your newsletter, we just met. I don't care about the discount you shoved in my face; I have not read about your product description yet, I won't just buy it because you waved a 5% discount in front of my face — not to mention you just admitted that you consider your own products overpriced. No, you are not allowed to block me because I am accessing your site from the European Union, you are doing GDPR wrong. Oh, for crying out loud, I won't disable my ad blocker to read your content; your flashing ads making it impossible for me to access your content is why I am using it in the first place. STOP. WITH. THE. POPUPS. Argh! *closes tab in despair* That's my typical experience visiting a site these days. Most people loathe this kind of site and have choice words for its developer. You are doing a disservice to your audience and, effectively, yourself.
In short, keep unnecessary distractions to an absolute minimum. Your audience will appreciate a mostly distraction free experience. Do subtle advertisements if that's what is paying your bills. Offer your newsletters as a sidebar action or an in-line advertisement towards the end of your content — if I liked it then, yes, I might even subscribe to your newsletter to get more of it. Funny how predisposing me positively works! Show me the first time client discount when I go to the product purchase page, not the product description page. I will appreciate it, even more so if it's a button that applies it for me instead of trying to copy it on my smartphone which invariable causes it to disappear from my sight. Respect my privacy and my decision to use an ad blocker. If you need to restrict my access to the amount of content I can consume, do it; New York Times does it and I still visit their site.
Make your content bot-friendly all the same
Good quality content that is enjoyable by humans on a fast-loading site does rank very well in search engines. Your visitors are also far more likely to share it which will create even more inbound links for you which will further improve the rankings. It's as though search engines try to show users the most relevant, human reader friendly content that's relevant to their search query…
Sarcasm aside, there are a few things you can do to further help search engines and social media platform to digest your content and make sense of it: microdata. These are additional attributes in your HTML content which hint machines to the type of your content and provide further context. For example, you can tell the machines that ingest your content who's its author, when it was created and last modified, what kind of product you're talking about and where to find more information about it and so on and so forth.
Joomla has built-in support for microdata using the Schema.org language. It made its first appearance as a core library in 2013 for use by third party plugins and got fully integrated into the core components' HTML output around 2017. If you have a third party you should check if their template overrides include microdata. Everything you see in the Publishing tab when editing an article becomes part of the microdata.
Speaking of the Publishing tab, remember to fill in the information there for your content. The meta keywords are no longer the only hints for a search engine but it helps them with disambiguation if they are not entirely sure about your content's context. The meta description is rarely, if ever, used in search results anymore but many third party sites use it to present a summary of your content when there's a link to it. Content rights are an often forgotten but important piece of information that gives a hint to machines and people about the licensing of your content and whether it can be reused.
Your links to external resources should have a
rel attribute set to
nofollow for any links pointing to something you do not endorse or is commercial in nature. If you are linking to internal pages which should not be indexed such as a cart or checkout page, a user panel etc you should set the
rel attribute to
That's all, folks!
I hope you enjoyed this article series as much as I enjoyed writing it. If I did it right, at the very least I gave you a small itch to start optimising your sites and possibly helped you learn something new or rediscover something forgotten. Enjoy your site building with Joomla!
German translation of this article: Performance Tuning in Joomla Teil 5: Qualität der Inhalte
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/