When it comes to speed & performance there is not a given rule that can address the problem in all scenarios. A possible problem with speed & performance can be caused by multiple different factors. Speed is critical to the success of any website, including those built with Uncode. Fortunately, there are plenty of ways to optimize the performance of your WordPress site and different tools like Google PageSpeed, GTmetrix & Pingdom to benchmark your site. There are four main elements to take into account:
- Use a solid Hosting service;
- Use a cache plugin (WP Rocket);
- Use the Performance settings;
- Optimise your WordPress installation.
A few examples
These are some Uncode websites taken from our Showcase that can be used as example of excellent speed results that can be achieved following best practices. This also helps you to understand that possible speed problems are not caused by the theme:
1. Use a solid Hosting service
The quickest win you can have with page speed, is upgrading from a cheap shared hosting provider to a better host. Cheap hosts are good for when you are starting out, but for ultimate performance you can’t match a solid hosting provider. If you spend few dollars each month you cannot expect your site's loading times to be performing. First of all you need to evaluate your host's performance based on the SRT and TTFB:
- Server response time (SRT): is the amount of time between the web browser requesting something from the server and the web server responding to that request back.
- Time to First Byte (TTFB): is the amount of time a browser waits to receive a response from your server after a request. TTFB configured through the server. Generally, TTFB is very small (within 10ms).
2. Use a cache plugin (WP Rocket)
By using a cache plugin you can bypass the PHP server-side creation of the page and provide the user with a saved version of the page implementing load times considerably. If you’re running Uncode we’d recommend giving WP Rocket a try first. WP Rocket is more than just a caching solution and it also enables you to minify your site’s files. Setting up WP Rocket is amazing simple, you’ll just need to read about the tool’s basic settings or ask their awesome support, and it runs perfectly alongside Uncode right out of the box (we recommend to use at least WP Rocket 3.1):
When using WP Rocket or any other cache plugin, please activate the Uncode → Theme Options → Performances → Asynchronous Adaptive Image System, screenshot . This feature enables your visitors to load low-resolution versions of your images when they first visit your site and improve loading times. As your pages finish loading, those low-resolution images will be replaced by the full versions of your images. Please note to not use the LazyLoad option, since it's incompatible with the Adaptive Image of Uncode.
Alternative cache plugins
As for WP Rocket please activate the Uncode → Theme Options → Performances → Asynchronous Adaptive Image System. Note that the same guidelines are valid for other cache plugins as well you set the same settings for the JS files to exclude from minify.
Cache plugins and WooCommerce
If you are using WooCommerce on your website it's suggested to take some precautions: in fact you have to make sure to exclude the mini cart and the cart pages from the cache, otherwise, users will not see variable content such as products inserted in the cart.
If you are using WP Rocket please insert this code in the WP Rocket → Advanced Rules and enter the following value in the Never Cache Cookies field, please find more info in the WP Rocket website (for other plugins, please consult the specific documentations):
Cache plugins, WordPress Nonces and Cache Lifespan
In Uncode 1.9.0 and later we have introduced security improvements and we must therefore pay attention to the right settings for WordPress Nonces. Nonces are security tokens in WordPress. Nonces can only be used once (hence “n once”), and they are only valid for a certain length of time. On a cached page, the nonce can expire in the background while its ID is still present in the HTML source code of the page. If that happens, the HTML source is referencing an invalid nonce and things break. This can affect all kinds of functionality, from form validation, to not working Async Adaptive Images, and a lot more.
- Set cache lifespan to 10 hours or less with WP Rocket: after the cache gets cleared, the HTML gets regenerated and references a correct nonce again. Hence, when your WordPress setup (theme, plugins) operates with nonces, the only way to keep them updated on cached pages is to set your Cache lifespan option in WP Rocket to a value below 12 hours; 10 hours would be a starting point and it works fine screenshot , but you may have go down to 8 or even less, find more info.
- I don't have a Cache Lifespan option with my cache plugin: some cache plugins don't have a Cache Lifespan option, in case please contact the author of the plugin for more information. For example Autoptimize does not have its proper cache purging mechanism, as this could remove optimized CSS/JS which is still referred to in other caches, which would break your site. Moreover a fast growing cache is an indication of other problems you should avoid. Despite above objections, there are 3rd party solutions to automatically purge the AO cache, e.g. using this code or this plugin, but for reasons above these are to be used only if you really know what you’re doing, find more info.
3. Use the Performance settings
The section Theme Options → Performance allows you to manage important settings you can use to improve your theme’s overall performance like the Adaptive Images, Image Quality, Mobile options and server settings. Please read the specific documentation, more info...
4. Optimise your WordPress installation
If you’re confident in your choice of hosting provider, the best thing you can do is optimize your site methodically. That way, you’ll be able to root out any underlying issues affecting its performance:
- Optimize your site’s images. Graphic files tend to take up a lot of space, and optimizing yours can help your website load much faster. Before uploading your images, be sure to have them saved with the Save for Web option and that you have used optimization tools like JPEGMini or Optimizilla. Once uploaded on the WordPress Media Library you can also use an amazing plugin like WWW Image Optimizer.
- Get rid of any slow plugins. If you’re the kind of person who uses lots of these tools, there’s probably one or two among the bunch that are slowing down your site too much.
- Clean up your WordPress database. All the information that’s stored on your site has to go somewhere, and in most cases that ‘somewhere’ is your database. Over time, yours can become bloated and start handling requests too slowly unless you clean it up.