January 19th, 2022 at 7:32 am
Autoptimize and Cache-Enabler – the perfect combo for WordPress optimization
Categories:
18 minutes reading
Website loading speed is one of the most significant aspects when it comes to optimal UX. Furthermore, it is a solid criteria for search engine ranking. Considering the importance of both factors, it is not surprising that well-performed optimization is the primary goal of every website owner.
There are various factors to consider when looking at website speed – optimized code, polished theme and content, a finely tuned hosting environment, and, last but not least, a caching system for static content.
With WordPress being the top web application choice for site development globally, there is certainly no deficit in plugins that promise to make your website skyrocket. In this post, we are going to cover an exciting combination of two plugins that partner very well with each other and namely – Cache Enabler and Autoptimize!
Plugins Overview
Cache-Enabler is a free, rich, light-weight, and easy-to-use caching plugin for WordPress. KeyCDN developed it for the primary purpose of speeding your website by offering static caching for HTML files. This process reduces the otherwise resource-intensive tasks typically propagated by the WordPress core, plugins, themes, and heavy database queries. It is one of the few plugins out there natively supporting the WebP file format offering an even further size reduction of your lossy and losslessly compressed images.
Autoptimize is yet another free plugin featuring static content optimizations for your WordPress-based website. Its crucial feature is Minification, which removes all unnecessary characters from your HTML, CSS, and JS files, reducing their size, respectively the amount of time needed for these resources to be processed and delivered to the visitor’s browser. The fact that it does not include HTML cache makes it a perfect match with Cache-Enabler, even with the default settings.
This robust combo will have a positive effect on your website’s performance and will be a great addition if you are not already using any form of cache plugin on your WordPress based website. In this post, we will go over the installation process and configuration options for both plugins and the know-how on setting them up for optimal performance. We will also include tests from the popular website performance testing website GTmetrix to give you an idea of what you can expect from this duo!
In order to keep the tests as objective as possible, we have performed them on a WordPress installation with Avada theme and sample data, which includes pages, images, videos, and different types of content. This allows us to show accurate results applicable to most live websites.
Installation
The installation process of these two plugins is no different than installing any standard WordPress plugin.
First, you need to log into your WordPress Admin Dashboard and navigate to Plugins > Add New. This action will redirect you to the plugin installation page where you can use the search tool. By entering “Cache Enabler” into the search field, will not only be presented with the Cache Enabler plugin but Autoptimize as well!
Click on the “Install Now” button for both plugins and activate them so they can become functional on your WordPress website.
Configuration
As we mentioned earlier, the plugins’ default settings are enough to drastically speed up your WordPress website. There are useful configuration options under their settings pages that are strictly individual and vary from site to site. To save you the time and effort of researching and learning about them, we have assembled the settings we believe to be the most optimal.
Cache Enabler
To access the configuration options for the Cache Enabler, please go to Settings > Cache Enabler.
The first thing you are going to notice and probably tell yourself is, “Hey, there isn’t much here I can do”. Well, this is what makes this plugin great. The developers have baked everything necessary inside its core, so you do not get overwhelmed by multiple pages of settings, which could also end up harming your site. Here are your options:
- Cache Expiry – This is pretty self-explanatory. Inside this text field, you can define the lasting time (in hours) for the generated cache of the plugin. The default setting here is 0, which makes it never expire. We will recommend you leave it with the default value unless you regularly add content to your website. In such a scenario, specifying the time corresponding to your routine could save you from the need for manually removing the cache to see the latest changes you have applied.
- Cache Behaviour – Instead of setting a cache expiry using the above text field, you can modify the cache’s behavior with the various options presented here. You will see five checkboxes, each specifying a condition that will trigger a cache wipe.
- Clear the complete cache if a new post has been published (instead of only the home page cache). – If you tick this checkbox, ALL of the Cache Enabler’s cache will flush once you publish a new post. If left unchecked, only the home page’s cache will be cleared. If you submit posts regularly, turning this on will not be the best idea, as the cache will have to rebuild itself frequently, and you will not see much benefit from it.
- Clear the complete cache if a new comment has been posted (instead of only the page-specific cache). – When checked, this option clears ALL the plugin’s cache after someone adds a new comment. We do not recommend using this option if your posts receive a lot of comments, as you will barely notice the benefits of the cache.
- Pre-compression of cached pages. Needs to be disabled if the decoding fails in the web browser. – This setting will activate compression for your pages. It is useful to have unless your server has either gzip or brotli, compression. If you are hosting your website with HostArmada, you do not need to activate it. We support gzip on our Start Dock and Web Warp plans utilizing NGINX and brotli on our Speed Reaper plan utilizing the highly-efficient LiteSpeed server.
- Create an additional cached version for WebP image support. Convert your images to WebP with Optimus. – As we mentioned earlier, Cache-Enabler is one of the first plugins to introduce WebP support. However, to utilize this option, you need to convert your images to WebP. You may do so using the Optimus plugin. It has a free version that you can test out, and if you like it, you may use the premium plans which are quite affordable. When this checkbox is selected, Cache-Enabler will add cache support for your WebP images.
- Clear the complete cache if any plugin has been upgraded. – The best option here is to tick this checkbox. With a new release, the developers could implement new functionality that may require a cache purge to be enabled.
- Cache Exclusions – This section in the plugin configuration page includes three text fields that can help you exclude pages or posts from the cache. You can use the first text field to define in a comma-separated page or post IDs that you do not want to be cached. Inside the second text field, you can enter Regular Expressions matching a specific page path that you want to exclude. Finally, you can use the third text field to specify Regexes that match cookies, which should bypass the cache.
- Cache Inclusions – The cache inclusion section has a single text field, which will allow you to add pages that you NEED to be cached, regardless of any exclusions you implemented above.
- Cache Minifications – If you plan to combine the Cache-Enabler plugin with the Autoptimize, then any cache minification should be disabled, as this is Autoptimize’s bread and butter. If you want to use Cache-Enabler on its own, then you should use this drop-down and enable minification for HTML and Inline JavaScript.
Autoptimize
To access the configuration page of Autoptimize, please go to Settings > Autoptimize.
As opposed to the Cache-Enabler, Autoptimize offers a wide variety of configuration options on its settings page. Some of them can have a positive impact on your site in terms of speed or page score (if this is something you care about), whereas others may slow down your site. It depends on the site, so it is tough to predict its demeanor. The settings we will provide here will be optimal for most websites, however, if you see a drop in performance, you should simply deactivate the setting causing this, and you will be fine.
Autoptimize has its setting distributed under five separate tabs. We will start with the first one – the “JS, CSS, and HTML” tab.
JavaScript Options
- Optimize JavaScript Code? – Ticking this checkbox will activate minifications for your JavaScript files. In our experience, this is beneficial for larger websites with more JavaScript files. On smaller sites, you will most likely not feel a massive difference as the browser will cache most of your javascript code.
- Aggregate JS-Files? – This setting offers a great option that will combine all your JS files into a single one. It is particularly useful on servers that do not benefit from the HTTP/2 technology. You may not see a massive bump in loading speed when enabled if HTTP/2 or HTTP/2 over QUIC(HTTP/3) is active. You should test it out and see if there are any speed increasing benefits if that is not the case, it is better left disabled. HostArmada supports HTTP/2 on the Start Dock and Web Warp plans and HTTP3 on our Speed Reaper plan.
- Also aggregate inline JS? – We recommend keeping this setting disabled, as it can cause your cache to snowball and make your website too heavily reliant on it – which is never a good thing! Besides, you will most likely not see any performance benefits from enabling it.
- Force JavaScript in <head>? – When you enable this setting, it will most likely result in render-blocking elements, as it will cause JavaScript to load along with the HTML <head> elements on your site. The obstacle comes because whenever the browser starts rendering your page, it has to stop whenever it encounters a javascript code and execute it. Unless this javascript code is inlined or in a small potion, this process can cause slowness as the browser needs to download all external JavaScript resources beforehand.
- Exclude scripts from Autoptimize: – If you want to enable the above option, this setting can come in handy. You can exclude the JavaScript files that the browser detects as render-blocking elements on your page. You can also exclude other JavaScript files from Autoptimize by listing them inside the text field. By default, you will find the “wp-includes/js/dist/”, “wp-includes/js/tinymce/”, “js/jquery/jquery.js” directories excluded.
- Add try-catch wrapping? – If you are not very seasoned with JavaScript, we recommend contacting a developer who should locate the troublesome files if issues with minification show up. This checkbox is useful when you are troubleshooting queries related to JavaScript minification. It will wrap all your JavaScript functions with the <try> and <catch> statements, which should let you figure out where the issue lies.
CSS Options
- Optimize CSS Code? – Activating this option will activate minifications for your CSS files. In our experience, this will benefit larger websites with more CSS files. On smaller sites, you will most likely not feel a massive difference as the browser will typically cache most of your CSS files.
- Aggregate CSS-files – This option is analogical to the above “Aggregate JS-files?” and the same goes for it too. More potent on more prominent sites with more CSS files, less beneficial for smaller websites.
- Also aggregate inline CSS – Enabling this option will typically reduce your page size and increase your score in a page test. Our recommendation is to keep this setting disabled in most situations. However, if you have a smaller website, you could see an improvement in page speed.
- Generate data: URIs for images? – This option requires some testing so you can understand whether you will gain any performance improvement from enabling it. Having it turned on will cause Autoptimize to embed small background images into your CSS after base64-encoded them. This encoding can result in fewer HTTP requests on your site, reduce the loading speed, and improve the page score.
- Inline and Defer CSS – Before using this option, it is essential to note that you need to generate critical CSS for your site. Critical CSS is the CCS required for your website to load as quickly as possible on its upper side (the side which the visitor sees first). When added inline, this can significantly boost your loading speed. We recommend this option for smaller sites that have less CSS. Otherwise, you can experience FOUC (Flash of Unsteady Content) issues, which is awful for UX. If you decide to use this option, you have two ways of generating CCSS(Critical CSS). Either use the API available with Autoptimize, which we will cover a bit later or use this tool, create them manually and paste them within the content box that will show once this setting is enabled.
- Inline all CSS? – Do not use this option. It increases page size and may push out crucial elements to load slower, causing issues with thumbnails from external websites. In addition to that, inlining all CSS can cause the browser to cache your CSS ineffectively.
- Exclude CSS from Autoptimize: – This option functions similarly to the above “Exclude JS from Autoptimize”. By default, you will find the following files/directives disabled “wp-content/cache”, “wp-content/uploads”, “admin-bar.min.css” and “dashicons.min.css”.
HTML Options
- Optimize HTML Code? – Enabling this option will activate minification for your HTML files, effectively removing unnecessary characters from these files (such as whitespaces), reducing their size. In practice, this option works great on most of the websites, however, it can cause issues sometimes. Thus it is better to activate it and see how your website will behave.
- Keep HTML comments? – If you select this option, Autoptimize will keep the comments for the HTML pages optimized.
CDN Options
CDN Base URL – If you are using a CDN, you can enter your CDN based URL inside to serve static pages from there. If you are using Cloudflare, or any other proxy-based CDN service, this option will not be necessary.
Cache Info
This section of the page will show you the cache folder, which is writable, and its size is shown. It is useful to keep track of your cache disk usage and to verify whether the cache is working correctly.
Misc Options
- Save aggregated script/css as static files? – You should leave this option selected unless your server does not handle expiry and compression correctly.
- Minify excluded CSS and JS files? – If you enable this option, your CSS and JS files will benefit from minification, regardless of being excluded from the cache or aggregated.
- Enable 404 fallbacks? – This is a great recent addition to the Autoptimize arsenal. It ensures that your visitor will see a “fallback” version of a page if, for some reason, the cached plugin content is no longer present. To ensure the proper delivery of the “fallback” page, please add the following snippet of code in your .htaccess file:
ErrorDocument 404 wp-content/autoptimize_404_handler.php
- Also optimize for logged in editors/ administrators? – You will typically see this option enabled by default on a fresh Autoptimize installation. However, we do not reckon it is necessary. To begin with, logged in users and admins will usually not pay that much attention to performance, and the speed benefits will not be that substantial. In addition to that, you are keeping things a lot cleaner, not having to deal with the extra cache.
- Also optimize shop cart/ checkout? – The cart/checkout page is very delicate, and we would recommend everyone disable any kind of cache form on it.
Next is the “Images” tab, where Autoptimize offers two options that will help reduce the size of images or enable the “lazy-load” images.
- Optimize Images – Checking this option will allow you to utilize the built-in image optimization of Autoptimize, delivered by ShortPixel, a well-known image optimization plugin. We would like to discourage users from using this option and, instead, use the standalone ShortPixel plugin or similar ones such as WPSmushor EWWW Image Optimizer.
- Lazy-load images – Lazy-load is a robust option if you have many pictures on your page located under the fold (the upper area of the site). It can result in a huge page speed increase. If the majority of your images are above the fold, consider disabling this, or you risk negatively impacting your visitor’s UX.
- Lazy-load exclusions – If you want to use lazy-load, although you have many pictures above the fold, this option comes in handy. You can use this text field to exclude images from the lazy-load functionality.
Earlier, we have pointed that there were two methods of generating critical CSS for your site? Well, this is the API based method, which is handled by criticalcss.com.
In the content boxes provided on the “Critical CSS” tab of Autoptimize, you need to enter your API key, so that the setting under the “CSS Options” regarding “Inline and Defer CSS” can be fetched by the criticalcss.com’s API.
Critical CSS
- Your API Key – When you register at criticalcss.com, please enter your API key so that your website can communicate with their servers and generate CCSS for your site.
The second to last tab is the “Extra” tab, containing neat little tunning tricks that can boost your performance even further when using Autoptimize.
- Google Fonts – The provided options will highly vary based on how much your site relies on Google Fonts. The default choice will bring no performance-enhancing benefit to your site. Play around with the last three options to see which one brings the most benefits in terms of speed. Alternatively, you can use a custom system font stack and altogether remove Google Fonts. If you manage to pull that one out, you can expect a considerable performance boost!
- Remove Emojis – This is an excellent option for reducing page size and removing any un-optimized JavaScript and CSS content represented by the WordPress core emojis.
- Remove query strings from static resources – If you care about your website’s page score, you can enable this option. It will not provide any speed benefits whatsoever.
- Preconnect to 3rd party domains – Enabling this option lets you use the “preconnect” directive, allowing the browser to connect to remote domain names preemptively. Typically, you are loading various content from them, and this can improve the time needed to fetch these resources. To discover the third party domains, please open GoogleChrome and click “F12”, from the console, then please choose “Sources” from the top menu. On the left side, you will see a list of pages, with your domain being on top and all the external ones listed underneath. To “preconnect” to these domains, please specify them inside this text field and use a comma to separate them. Even if you are not using GoogleChrome, any up-to-date web browser should have the same functionality, accessible in a similar manner.
- Preload specific requests – Unless you are very familiar with the assets your website needs to download and use before anything else, we recommend leaving this setting alone. If you genuinely want to use this option, you should consult with a certified web developer.
- Async Javascript-files – You should test this around and see how your website behaves. It will cause your third-party JavaScript resources to load asynchronously by embedding the “async” tag.
- Optimize Youtube Videos – This last setting will recommend installing the “WP YouTube Lyte” plugin, which adds the lazy-load effects to the youtube videos on your site. It could be useful if you have a website that features a lot of youtube videos.
Lastly, the “Optimize More!” tab will include various third-party vendors that Autoptimize recommends that can help you improve your website’s loading speed, even further!
Before Optimization Test
Now that we have covered the configuration options for both plugins let’s get to the fun part and see the performance difference after implementing them!
As you can see, the results are pretty decent, with a loading speed of around 4 seconds and about 75% even without no optimizations.
After Optimization Test
After both plugins are enabled and after applying our recommended settings, here is the result:
As you can see, the load speed became almost 3x faster, and the scores skyrocketed to about 95%, not to mention that the TTFB went down from 600 milliseconds to about 150 milliseconds. The numbers of requests got reduced dramatically, and the total page size dropped to 1MB, which is nearly a perfect score!
Final Words
As you can see, the usage of caching plugins is impeccable when it comes to WordPress and speed and page score. Our technical support team excels in WordPress performance tuning. They will be happy to take a look at your site and recommend the best steps you can make in terms of performance. They will even go as far as doing all the heavy lifting for you, which will let you focus on the important stuff – growing your business or online community and expanding your presence on the web!