Category: Coding
Make effective use of transients on your site
Once you start turning your WP site into something more than a basic blog, you’ll be adding lots of functionality that will start weighing heavier and heavier on your database. With every new feature you put together, your database query count is only going higher and higher.
I find that even putting together a page with no more than a couple of widgets and a slider can get your query count into the hundreds.
Just setting up a fresh theme off CodeCanyon can turn your query monitor red. That’s painfully true even for some of the popular ones that try to do everything under the sun, yet fail when it comes to performance.
There are plenty of ways to deal with these, but today I’ll talk about transients.
What are transients?
WordPress introduced a few years ago a new way to temporarily store various structured data in the database and have it easily accessible in just one query.
The data is usually some processed piece of information that you use more than once. It doesn’t (often) change from one use to the next, so it’s not necessary to reprocess it every time. And it automatically expires after a while.
It’s basically a simple way to cache some frequently used data.
When should you consider implementing transients in your code?
You often build something that is excessively heavy on the database. You add a query in here, another in there, another inside a loop and just like that, you now have hundreds of database queries on every page load.
Case in point:
We had a client that needed to have a page which listed ALL product categories and ALL products associated with each one. Not only that, but for each product we needed to include an image, the tags, the labels (a distinct term), the WooCommerce rating, various custom fields, titles, descriptions, etc. And each of these could be from multiple sources (the image could be either a custom field or the featured image, the description could be custom or the excerpt. And others.
You get the picture. A mess.
With 25+ categories and about 5-10 products for each, you can imagine how this quickly spiraled out of control to about 600 queries per page load.
Granted, the server is quite solid, and this wasn’t increasing the load time too much. But still, numbers like that should give you the creeps.
A lot can be said about optimizing those queries. And it should be done. It is the right way to do it. Given more time, I would go and do that first.
In this case, however, going for the low hanging fruit of using transients was the quick and dirty way of handling it and it gave us the biggest bang for the buck.
You see, about 450 of those queries were associates with putting together the data needed to render the product cards. At the end of all the database interaction we had one final structured array which we would then loop through to render the categories and products.
Given that the data doesn’t change from one user to another, we decided to store it into a 12 hour transient and use it from there.
Everyone visiting that page over the next 12 hours would get the cached version. Instead of doing the 450 database queries, they would only do one!
At the end of those 12 hours, the transient would be cleared and one unlucky soul would once again load the page with the full 450 queries, but he would hardly notice, as that still take less than a second.
It’s a good bargain in order to deliver a fast experience to the vast majority of your visitors.
When not to use transients?
I can think of three situations where transients could seem the way to go but might actually cause trouble:
- When you only need to load unprocessed data. Just doing the query might be faster.
- When you need data that is stored in WP options. Just make the options autoload and WP will load them all in one go.
- Any time when saving several queries might complicate your code. It’s not worth losing readability just to reduce the query count by 2 or 3.
Conclusion
Take a look at your code with a good benchmarking tool like Query Monitor.
Does anything stand out? Is it red?
Do you see any duplicate or very similar queries? There’s an opportunity there to refactor your code and do more with less.
Stay tuned. I’ll be back with another post with several easy examples you can implement.
How we came to use Arhitecture Decision Records (ADR)
TL;DR
We realized that there has to a better way to record past decisions made on a project. Clubhouse and Git are limited when it comes to this. ADR offers a better understanding of why something needed to be changed, when it happened, what options were available, how it was implemented.
Our workflow
In most of the cases when we start a new project there are a few things that get set-up.
- Each project will have a folder in OneDrive or Dropbox structured in a conventional way
- The project has a Git repository
- A Clubhouse workspace is set.
Other things are also done, password storage, contact details linked with the project, and so on, but that is not relevant for this article.
After that we have Clubhouse details set, stories added, epics created, milestones set and sprints.
Between Clubhouse and Git, there is enough control to see what happened or needs to be done, who did something and the immediate changes of files. If you also use version control on your app it’s even better, this way you can see what is new from version to version and follow the pull request (usually from dev to production or staging).
The issue
While all that sounds good, there still is a part that is left behind.
For example, you decide to change the payment gateway on your app. In order to have this change, there was a discussion that started for a reason (context), there were some options, a decision was made to go with one of the options, someone took that decision at a certain point in time, that decision has some consequences that you understood.
In the Clubhouse + Git setup you can’t catch all these details. Replace Clubhouse with any project management tool, it’s still the same.
Another example: you added an extra mandatory field in the registration form.
Why did you need that?
What other options did you have?
What decision was made?
When did it happen?
What consequences came from this?
Who was involved in the decision making?
ADR to the rescue
You might’ve already noticed that there is a pattern in the above examples and that will be present in the ADR structure.
What is an ADR?
Architecture decision record (ADR) is a document that will capture an important architectural decision in your project.
This document has some different structure options, but they all include the same elements.
- Context (*)
- Date (*)
- Status (*)
- Options
- Decision (*)
- Consequences (*)
- People involved
(*) – mandatory
Why use ADR?
It’s a good way to keep track of changes and put them in context.
Might not seem that important at the moment, but it will be really helpful when you came back to a project 3 months later and you can’t remember why those changes were made in the first place.
It will also provide insightful information for the people that might come after you to work on the project or for new team members. Having a quick scan over the ADR folder and see why some things are the way they are it’s good way to get up to speed with what happened.
ADR structure
We decided to create an ADR structure to use in your projects.
At the project parent level, we have a docs directory that includes an adr folder.
In that adr folder we create files with a certain name structure 0001-ADRNameDescriptive.md.
Each ADR has a certain file structure.
You can find all these details in our ADR structure repository + some VSCode snippets for ADR.
Final thoughts and ADR example
We literally stumbled upon the idea of ADRs. I didn’t know what you search for in order to find this. It was a tweet that came up and was mentioning ADRs and from there I just connected the dots, did some research, and found out about this way of keeping track of important architectural decisions.
The repository that we linked above has more information, structure, links to external articles about ADR and it also includes some VSCode snippets for ADR.
Give it a try in one of your projects. It might seem like some extra work, but it’s worth it in the long run.
Store libraries locally
I have one example in mind that really annoyed me.
One of our clients needed some features really quick and I wasn’t around at that time to help with it. They got someone from UpWork to do the job and they did it, it worked as expected.
All good until the client mentioned that the loading time is quite high now. We started to look at the code and how it was created to find out that all the libraries were embedded from 3rd party CDNs/servers. Not even the minified versions, the full ones.
We ended up with OwlCarousel twice on the site (and now loaded everywhere), we ended up with Bootstrap twice and some other JS library being delivered from 3rd parties.
Keep libraries locally
My main focus here is the CDN libraries.
This is something that I noticed a lot in WordPress development projects. Mostly when it comes to someone working on an existing project.
Clients will come in and ask for improvement, or some feature to be added on their existing website. This means you need to deal with the code that someone else created, the folder/file structure, re-use some functions/scripts, etc.
This is tedious and it takes time, you just want to have that thing done and ship it. It’s totally understandable, but you also need to make your adjustment robust.
Linking the libraries in the <head> directly from a CDN or server is not a good practice.
It’s perfect for the development environment where you want to quickly test and see if it does the job and you don’t have to worry about adding the library into the compile process or enqueue it on a specific component.
But for the real-world, when you ship that solution, you should store that library locally in the folder of your project. If the project will use a CDN and that asset will be delivered from there, then perfect.
Do not rely on a 3rd party CDN or server to deliver your library.
Reasons
- It might get an update and break your production site (in most cases they are version controlled, but it can happen)
- It can get deleted at some point
- The CDN/server link my go down
- Multiple requests on page load
- Slowing the loading time
- Offers details on what libraries you’re using. Might be easy to target some exploits.
Build things that are durable, robust, and don’t need any external help to run.
Should you go mobile first?
The full question sounds like this:
Should you build your website/web-app mobile first and scale to desktop?
Why do we need another article about this, it has been covered a lot of times already?
To make things clearer, I’m only interested in the site structure, building the CSS around it and how it changes from one device to another. Not the PWA or other things that will take the mobile first approach and make it more like a mobile app.
It might be an obvious answer for a lot of you, but to my shame, it wasn’t for me. I didn’t see a reason to go mobile first in my approach. I’ve created lots of sites with the approach of desktop first and scaling down on mobile as I went along. We even had a full workflow where we have the desktop site ready, test it and after that, we move to mobile.
This workflow might’ve been influenced by the designers I worked with or the clients that focused on the desktop version first.
It all changed after I read Responsive Design: Patterns & Principles by Ethan Marcotte. I recommend this book if you are a web developer, especially front-end.
I was amazed by how much more can be accomplished if you have a different perspective when creating the site. And it so happened that I read it during a complex project where we had a lot of parts and elements that were structured to be re-used throughout the site.
Understand the design/project
It starts by getting a better understanding of the design or the project as a whole. You need to get as many details from the client and designer. They might think the site as page by page, but this is not true anymore. The site has pages but those pages are created by elements, and those elements are the ones that need your attention.
What is relevant for the user on a small device?
- On your newspaper site, you want to show the featured story on mobile and have it display as the first thing, not obstructed by anything else.
- If you have an e-commerce site you want to show the featured product(s) that are available on sale.
- Your book author might want to have a clear way to display the next event or book signing that she’ll attend.
This means understanding your project, getting to know exactly what matters, the core of the project. On mobile, you need to be able to deliver what’s important and not just fill the screen with everything. Providing the right content will keep the user engaged with your site, and it will also help you fix performance issues.
Working with elements
As you look over you will find elements that repeat themselves on different pages.
Once you identified the elements, you can start building the components. Get those components to live in their own space and create a structure just for them.
Then get them styled not in a relationship with the page or other elements, but as a standalone unit that will be placed on a page.
Why are elements important?
First of all, it’s like working with data: you want the actual data, not for it to be wrapped into something that needs to be adjusted when you want to display it.
You want the actual value from a field. Same with elements.
You want an element that does the Featured Story for the newspaper, Product on Sale for your e-commerce, Next Event for the author, that you can re-use wherever you like.
Having elements or components that will come together on a page will help you better manage the outcome.
Mobile Content
On a mobile first approach, the content on mobile devices is specially catered for mobile. You don’t just use what it’s on desktop but on a smaller screen.
There is an important difference here because you will need to take into account the fact that people might browse on 3G connections that are not that fast. This will make every extra resource that is loaded to take some extra seconds for the end-user.
We’re getting a better understanding of how the images are delivered and if you have to just hide content or eliminate it on mobile devices.
As you’re set on creating elements/components, you have to make sure that the media files you use are correctly optimized for screen size and enable/disable certain elements on mobile altogether. Don’t load them just to hide them on mobile.
Today this is even more powerful and easy to achieve with JS frameworks like Vue.
Isn’t mobile first the same as a responsive website?
Yes and no, mostly no. It’s kind of the same thing when you talk about the methods used (you’re still using a CSS framework for example), but it has very different outcomes.
I see the responsive way of creating sites as going from big to small and with this approach comes the idea of hiding elements on certain smaller screens or just move them around to fit. Nothing wrong with this, mobile has less space to display content.
But what do you hide on mobile?
You’re now faced with a problem that you didn’t have in mind at the beginning. You’re not aware of what is vital/relevant for your user on mobile.
The mobile first approach aims to solve this issue. You’re starting the site scaling from small to big, not downgrading the content. When you start with the small screen idea in mind, you realize what is important and what must be shown on the page. It’s not just about moving the content around so it will fit.
I’m aware that responsive is the easy way to do it. When you have a site that is already in use for some while and it has traffic on it, it’s the safe step to make it responsive, move things around to fit and just remove some elements on mobile.
I would love to cover more on this subject and break each idea into an article on its own, but for now I just wanted to offer a glimpse of what I took from that amazing book.
I really recommend reading the book. it’s around 100 pages with a lot of relevant examples and solutions from the real world. It might change the way you think about your current projects.
Should you use !important in CSS?
I feel like this was a popular subject back in the day (2010-2012), but it’s not that important now. Get it?
Anyway, here are some articles that talked about this issue in the past: here, here and here.
What it’s !important?
You can call !important a directive, a keyword, declaration, and it’s placed at the end of a CSS propriety to prioritize it, to add more weight to it over other proprieties that might be in the way.
CSS (Cascading Style Sheets) passes along some of the proprieties from the parent to child and so on. Similar to a cascade, if it wasn’t obvious enough.
In some cases, you need to overpower those proprieties and for different reasons, you end up using the !important solution.
.container h2 {
font-weight: 600;
}
h2 {
font-weight: 300 !important;
}
In the example above your h2 will take the font-weight of 300, even inside the .container element, because it has the use of !important.
This should give you a good idea of how it works.
When will you use !important?
You might end up using !important for different reasons.
A few that I might think of:
- Old code where you don’t know what else will be affected and you prefer to add an !important to fix your style and move on with your day
- Dealing with inline CSS added by some 3rd party JS
- Classes that are overlapping with another plugin or theme
- You are using a framework (Bootstrap)
It’s not always justified, but most of the times it will be an easy way to fix something.
I try to go out of my way and get it fixed correctly without using !important. Try using an extra class when you identify the element, let !important be the last resort.
Bootstrap, frameworks and visual builders
When you use frameworks on your project, you might be forced on using the !important propriety more that you want.
One way to avoid this is to learn more about CSS Specificity. This will allow you to style your files better without abusing !important just to get the things done as you want.
Apart from Bootstrap, you will stumble upon different visual builders for WordPress that will do you the immense ‘favor’ of adding inline CSS with !important in it.
This will be a recurring problem and you will have to decide if you want to edit the elements from the builder proprieties (adding background image, padding, margins) and deal with all the mess that comes with inline CSS (with important) or just assign a class to an element and do the whole work from CSS files.
Dark/Night Mode and !important
I can think of one example that will make the use of !important justified: Night Mode or Dark Mode.
Let’s say you want your site to have a Night Mode option, a simple switch that will change all the content into a dark background and white text.
You can have a simple switch that will add an .dark-mode-on class to the body and after that use a code similar to this:
body {
background: #fafafa;
}
h2 {
color: #dea62f;
}
p {
color: #333;
}
.dark-mode-on {
background: #000!important;
color: #fff!important;
}
.dark-mode-on h2 {
color: #fff!important;
}
Conclusion
Yes, you should use !important, just be sure not to end-up with proprieties cancelling eachother because that will be a nightmare to debug.