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 three main elements to take into account: use a solid Hosting Service, optimize your WordPress installation and use a cache plugin to boost your site (this can be crucial).
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:
Hosting & Providers
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).
Optimise your WordPress
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 WP Smush.
- 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.
- Implement a Cache plugin. This one is really important, so it deserves a section of its own. We’ll talk more about some of your options in a moment!
Use a Cache plugin (WP Rocket)
By using a cache plugin you can bypass the server-side creation of the page and provide the user with a saved version of the page implementing load times considerably. All of the commercial or free caching plugins for WordPress are excellent options, but if you’re running Uncode we’d recommend giving WP Rocket a try first (even if this is a commercial plugin).
Setting up WP Rocket is relatively simple. You’ll just need to read about the tool’s basic settings or ask their awesome support. WP Rocket should run perfectly alongside Uncode right out of the box. However, there are a couple of settings you should change to get the most out of this integration. We recommend that you use at least wp-rocket_2.10.7.
Second uncheck the LazyLoad option in Basic tab. Now, save your changes and head over to the Uncode → Theme Options → Performances. Once you’re in, you’ll want to turn on the Asynchronous Adaptive Image feature.
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.
In Theme Options → Performances you can activate the Mobile Settings, these options options make mobile performance more efficient:
- Use Current Mobile Orientation Width: Activate to use the current mobile orientation width (portrait or landscape) instead of the max device's width (landscape).
- Limit Device Density: Activate to limit the pixel density to 2 when generating the most appropriate image for high pixel density displays.
- If you activate the following options you can also use these Image Sizes Range
258,375,414,516,750,828,1032,1440,2064,2880, note that upon request, Uncode will create more versions of Adaptive Images on your server.
Using WP Rocket on your Ecommerce site
If you are using WooCommerce on your website and you are using the mini-cart widget it's suggested to 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: