Having a fast site is always desirable and there are many ways of achieving that. From optimisation (or caching) plugins, to external caching services or CDN networks.
These are all great, but there can be a time where you’ll find that not all of your website’s options will work correctly, or the site might have some display issues. This is the case where the website has been overly optimised, meaning that you might’ve probably turned on too many options that can conflict with each other or with the dynamic nature of today’s websites.
There are a few recommendations that can help you mitigate these effects.
Please note!
The following recommendations are just some general guidelines that can apply to any website. It is your responsibility to research what services you’re using and adjust the optimisation options accordingly.
General Recommendations
Disable CSS processing
Modern websites generate a lot of CSS files, especially when you start integrating lots of third party services, such as WordPress plugins. Having lots of files loaded when painting the website can slow it down to an extent. But over optimising CSS files can have negative consequences on your website such as not displaying correctly for your visitors.
First off, we do not recommend minifying the CSS files. Any respectable developer provides these files already optimised and if they don’t, you shouldn’t use their service in the first place.
Secondly, combining CSS files is an outright bad idea for two main reasons –
- It will always be slower to load one big file, rather than multiple, smaller files on demand.
- CSS classes and IDs can clash with each other creating a mess.
Also, one interesting thing to note here. Many knowledgable developers have already implemented on demand loading of their assets, meaning that even if you have 1000 CSS files, they won’t be loaded until they’re necessary and they will be loaded one by one, on a case by case basis. Optimising the CSS files by combining all into one will break this behaviour and actually slow down your website, rather than speeding it up.
Remove Unused CSS
You might’ve seen this option in many plugins and sometimes under different names (looking at you LiteSpeed’s UCSS). On paper, removing “unused” CSS sounds like the perfect plan, but in reality it is actually not that good.
It sounds like a robot shuffles through the website and analyses each page, removing the CSS classes and IDs that aren’t used on these pages. What a great idea! (not!)
Let’s take the example that we have on hand – our highly dynamic and optimised Blocksy theme. All of our features use on demand loading of assets, meaning that they are not present on the page until the feature is activated or used. With the “Remove Unused CSS” option turned on, the algorithm of that specific optimisation plugin might actually remove the CSS and assets that are needed for on demand loading, thus completely breaking the functionality of your website.
We do not recommend turning on this option at all – even many plugins still label this as an unfinished, experimental feature – as you might have issues down the line even with other services.
Selective JS optimisation
The same rules as with the CSS optimisation apply for JavaScript files as well. Try to not minify or combine them into one. Combination can cause even more errors, since scripts are highly sensitive of being in their actual place, rather than be modified by some external service.
You might’ve also seen deferring and delaying loading of these JS files. These options can be good, but use them with care and consideration.
Delaying a JavaScript file is the process where JS files are not loaded until the user takes the first action on the site. On desktop devices it is usually when the user moves the mouse onto the page and on mobile devices it is the first tap somewhere.
We do not have a specific recommendation concerning this option, but please be sensible with it, as it can cause issues on mobile devices under certain circumstances, especially with lots of third party services.
Deferring a JavaScript is the process where JS files are loaded only after the first paint of the website has been done. This is a good option in 99% of the cases, as it does not affect the front end.
CDN services
CDN services are great for high profile websites. There is nothing that goes against using one of them, as it is actually recommended if you have a very popular website.
The only recommendation that we have to make here is be sure you clear its cache extremely thoroughly whenever you make a major change on the website.
Multiple caching solutions used at the same time
A big no on this one from the start. Running multiple solutions that do the same thing at the same time will cause conflicts all the time and can break even the simplest website. It is best to compare the solutions available and decide upon the best one for your use case.