What is Autoptimize?
Autoptimize is an optimization plugin. It does not offer a caching feature. So, the plugin cannot be used as a replacement of a caching plugin.
Autoptimize is compatible with many caching plugins, and hence, you can use it with your caching plugin.
The core function of Autoptimize is to optimize HTML files, JavaScript files, and CSS files.
Who Should Use Autoptimize?
Your website may be hosted with a hosting company that does not allow most of the caching plugins (example – WP Engine and GoDaddy) because they have their own custom caching mechanism.
In most of the case, they will not have the option of optimizing HTML, CSS, and JS files. Good thing is that Autoptimize can work with all those hosting solutions and help you to further optimize your WordPress site.
So, if you are on any such hosting server, Autoptimize is for you.
How Well-Coded is Autoptimize?
Read this carefully.
Before you ever install any plugin on your website, try to find out whether the plugin is well-coded or not. A poorly coded plugin will have several problems including:
- High memory usage.
- Increase in page load time.
- Conflicts with PHP and latest WordPress versions.
- PHP errors, etc.
So, never settle for a plugin that is not perfectly coded.
What about Autoptimize?
One effortless way to find out technical details about a plugin is to check the WP Hive results. They do the heavy lifting and give you the summary of whatever you need to know.
Here is the summary of WP Hive test results for Autoptimize:
- Memory Usage: The plugin uses 127.36 KB memory, making it faster than 99% of the plugins you find in the WordPress plugins repository.
- Time Added: The plugin adds 0.04 seconds to the overall page load time. This makes Autoptimize faster than 99% of all plugins you find in the WordPress plugins repository.
- Compatibility: Autoptimize is compatible with the latest PHP version 7.4.8. It is also compatible with WordPress 5.7.1.
- Database Entries: The plugin does not add any tables in the database. However, it does add four entries in wp-options which are:
- autoptimize_version
- autoptimize_ccss_version
- autoptimize_service_availability
- autoptimize_imgopt_launched
Here is a screenshot of the tests that Autoptimize passed:
Okay, now that you have a decent idea of the performance of Autoptimize, it is time to go ahead with the rest of the article.
Setting Up Autoptimize – JS, CSS, HTML Optimization
The core function of Autoptimize is to optimize three types of files found on any website – HTML files, CSS files, and JavaScript files.
All other optimization features were added over subsequent version releases of the plugin.
So, let us first learn about the settings related to the core functions in the order as the appear in the first tab of the plugin dashboard.
JavaScript Optimization
Your website will have JavaScript codes and they are especially important for various functions. Even if I were to assume that your site theme and plugins does not use JS files, you will still have JS codes because they are present in WordPress core.
Even Google Analytics that you will use uses JavaScript. You just cannot avoid JavaScript. So, you need to optimize them, and Autoptimize will allow you to do that!
Optimize JavaScript Code? – ENABLE
This is the first option you will see after installing Autoptimize. You must enable it. JavaScript codes are often the greatest of culprits when it comes to slowing down your website speed.
Enabling this option will simply minify your JavaScript codes. Minification simply means that all the whitespaces and unnecessary characters will be removed from the codes.
Removal of these whitespaces and unnecessary characters do not impact the functionality of the JS codes. They simply become difficult for humans to read. However, search engine crawlers can still read them.
Aggregate JS-files? – ENABLE OR DISABLE DEPENDING ON PROTOCOL
This is the second option available in JS optimization. It simply means that all your individual JS code files will be combined to create a single file.
Should you enable it?
That depends.
If you are on a server that does not allow HTTP/2 protocol, aggregating the JS files will be a good decision as that will reduce the number of HTTP requests.
If you are using HTTP/2 protocol, you may not have to use the aggregation feature because this protocol allows simultaneous download of multiple files (also called parallel downloads).
You do not need to be on a hosting server supporting HTTP/2 (such as Kinsta). If you are using a CDN that supports HTTP/2, you can enable that and use it. Cloudflare supports HTTP/2. Many other CDN providers also support HTTP/2.
Having said that, you can still try aggregating JavaScript files even if you are on HTTP/2 supporting server.
There is no denying that combining multiple JS files into a single file does provide a speed boost. However, you must test it for your specific website. You may or may not need it.
Also Aggregate Inline JS? – DISABLE (RECOMMENDED)
Your website has HTML. If you dig deeper into your HTML files, you will notice some JavaScript codes embedded right inside the HTML code. Sometimes it is necessary and at other times, developers do that simply to prevent aggregation.
Autoptimize can extract those inline JS codes and put them in the combined JS file.
You must have an incredibly good reason for enabling this. By enabling this option, you will achieve speed boost, but at the same time your cache size created by Autoptimize will increase quickly. That is something you should be avoiding.
So, it is better that you do not enable this option.
Force JavaScript in <head>? – PLEASE DON’T
Forcing all JavaScript files to move to the <head> of your website will get rid of the JS errors that you may face, but a new devil shows up.
JS files in the <head> become render-blocking. This means that unless the JS files load, the webpage will not be rendered.
When JS becomes render-blocking, Google will ask you to defer render-blocking JS. Apart from that you will face the FID issue (FID stands for First Input Delay in Core Web Vitals). You do not want that to be happening.
Exclude Scripts from Autoptimize – ONE PER LINE
By default, Autoptimize will exclude certain JS files from being optimized. Do not remove them. They are there because they should not be optimized.
If you have other JS files that you do not want to be optimized, you can add each file to the exclusion list. One file per line.
Just because you are adding a JS file to the exclusion list, it does not mean that the file will be left untouched by Autoptimize.
The plugin will still optimize them. However, the optimization will be restricted only to minification of the file. Aggregation will not happen.
Add Try-Catch Wrapping – ENABLE ONLY IF YOUR SITE BREAKS
This option is a debugging option. It simply means that if optimization is breaking your website functionality, you should enable this.
If you are facing a situation where your site works only and only when you enable this option, you need to find a developer to check the JS files that are not receptive to optimization. Those JS files have problems.
Continuously using Try-Catch Wrapping eventually hits the performance of JavaScript codes. So, you should never keep it turned on by default. Use it only for debugging.
CSS Optimization
CSS stands for Cascading Style Sheet. CSS codes are used for styling your websites elements. Trust me, without CSS, your website will look terribly ugly.
However, CSS can also cause performance issues. So, you need to optimize those codes. Let us quickly investigate the CSS optimization options available with Autoptimize.
Optimize CSS Code? – YES, PLEASE!
Enabling this feature will only minify the CSS files by removing unnecessary characters and whitespaces. This will reduce the size of the CSS files but will never degrade the performance of the codes.
Aggregate CSS-Files? – TESTING REQUIRED
The rule that applies to JS files also apply to CSS files. If you are using HTTP/2 protocol, aggregating CSS files is not necessary. However, do test your website with both options (enabled and disabled) to see what works best for you.
Also Aggregate Inline CSS? – DISABLE (RECOMMENDED)
Enabling this will move all inline CSS into the aggregated CSS file created by Autoptimize. Obviously, it will help in reducing the page size, this action may or may not help. Also, enabling this option will increase the cache generated by Autoptimize. Hence, disabling this is recommended by most optimization experts.
Generate Data: URIs for Images? – TEST & DECIDE
The moment you enable this option, Autoptimize will take small background images, encode them using base64 encoding, and finally embed them into the CSS files.
The only benefit you get out of this is that the number of HTTP requests fall. However, the bad side is that images encoded with base64 are heavier than the binary counterparts by around 20 to 30%. That might not be an ideal situation.
So, test it and see how it impacts page speed. If there is an improvement, enable it. If there is a decline in speed, you are better off without this optimization.
Inline and Defer CSS? – TEST & DECIDE
There is something called “above the fold.” This is the segment of the page that loads on the viewport of any device. Anything below that (the portion of the page that you cannot see without scrolling) is called “below the fold.”
Keeping this in mind, enabling this optimization feature will take the portion of the code that is necessary for properly rendering the styled ‘above the fold’ part of the webpage and inline them into the HTML code.
The rest of the code will go into the optimized and aggregated CSS file created by Autoptimize.
The benefit is that only that portion of the CSS will load that is required for properly loading the ‘above the fold’ portion of the page during the initial page load. The rest of the CSS can load later (that is, deferred loading).
For this to happen, you will need to extract the critical CSS (that CSS that is required for rendering the styled ‘above the fold’ segment of the page) and inline it.
It is possible to manually do that only and only if you know CSS coding. If you do not know, you can use certain online tools like this one to generate the critical CSS or CCSS.
Copy the CCSS and paste it into the space provided. The space will show up only when you enable this option.
Once you submit the CCSS, save the settings and check the frontend of your website.
In case you have added the right CCSS code, the page should load normally. If you see what is called Flash of Unstyled Content (FOUC), it will simply mean that certain segments of the CSS codes have not been properly identified as (and included in) CCSS.
You must manually identify those elements and add those styling codes to the CCSS and save.
This can be a technical abomination for those who do not know coding.
Autoptimize has a paid module that allows automatic creation of CCSS. You can purchase the pro version of the plugin to activate the module.
However, remember that automatic regeneration of CCSS is not an ideal thing to do always. There are three reasons:
- Automatic CCSS generation does not ensure that the correct CCSS code is generated. If that would have been the case, the online tool you used earlier should have done that.
- Automatic regeneration of CCSS is dependent on a third-party API. It means an external API call from an external server. If that server fails to respond quickly, your page load speed will take a hit. But anyway, an external DNS call will take some time no matter how fast the server responds. So, there will be a slight drop in page speed no matter how hard you try.
- Incorrectly generated CCSS will cause FOUC. This in turn will lead to CLS or Cumulative Layout Shift – one of the elements of Core Web Vitals. CLS is not good for page experience. Google will take a note of this issue and punish your website accordingly.
There are situations where not regenerating CCSS combined with HTTP/2 protocol is much better than regenerating CCSS.
Inline All CSS? – A BIG FAT NO!
Doing so will exponentially increase the page size. Bigger the page size, the slower the page loads.
On top of that, inlining all CSS will mean that a user’s browser can never cache any CSS. The browser must download everything every single time the user visits your website. It means that page will take longer to load every time!
You do not want that, do you?
Exclude CSS from Autoptimize
Autoptimize will automatically exclude some CSS files. If you want to exclude a few more, you can add them in the space provided. Remember – one file per line.
If you are using this feature, make sure that you know what those CSS files do and how the action will impact your webpages that require the excluded CSS files.
It is highly technical, and if you are a rookie, you better not fiddle around with this option.
HTML Optimization
Your website will have HTML files. It does not matter what kind of website you have. There will be HTML. So, you better optimize them. The options you get with Autoptimize are:
Optimize HTML Code? – YES, PLEASE!
Of course! You should enable this. It will remove whitespaces from your website’s HTML code and reduce the file size. The smaller the file size, the faster the webpage loads.
Note: In exceedingly rare cases, removing whitespaces from HTML can cause problems. So, if you are facing problems, turn this off. Likely, you will not get face the problem because I have never come across a WordPress site behaving berserk due to removal of whitespaces from HTML.
Keep HTML Comments? – NAH! YOU CAN REMOVE
HTML comments, as the name suggests, are just comments. They do not have any real role in the functionality. Keeping them or removing them will make no different as far as functionality of your website is concerned.
However, removing them does certainly reduce the page size. So, remove them. Just do not enable this feature and Autoptimize will remove all comments.
That is all! You have successfully configured the core functions of Autoptimize. Now, it is time to investigate the other features that the plugin has to offer.
CDN Options
If you are using a CDN (which you should), it is necessary that you setup Autoptimize to work with it.
Having said that, you need to understand that if the CDN you are using is a proxy service, you do not need to do anything. A good example will be Cloudflare. It is a proxy CDN.
In such a case, all you need to do is leave that place blank.
However, if you are not using a proxy service with CDN feature, you should provide the CDN URL.
If you are not sure whether your CDN is a proxy service with a CDN or not, you can ask your CDN provider.
Cache Info
There is nothing to do here. It is just some information displayed on your screen. It will show you the destination where Autoptimize stores the optimized files on your server. It will also display whether the plugin has a write permission for that location or not. Finally, it will display the size of the stored cache.
Misc Options
Misc Options are some additional options for further optimization of your website. Here is what you find there:
Save aggregated scripts/CSS as static files? YES, PLEASE!
Enable this option. The aggregated files should always be saved as static files.
However, if your server has improper configuration and cannot handle file compression and expiry, you must disable this option.
How do you know whether the server can handle it or not? Look for errors! If you see errors on the frontend related to compression and expiry, the server does not have proper configuration.
Alternatively, just ask your hosting provider whether the server can handle those things or not.
Minify excluded CSS and JS file? DISABLE ONLY IF YOU HAVE ISSUES
Even when you are excluding CSS and JS files from aggregation, minifying them is a good decision. So, you should enable this option.
However, if you do notice some styling issues or functional errors after enabling this option, come back and disable this feature.
Also optimize for logged in editors/administrators? YES, PLEASE!
If you do not enable this option, you cannot test whether Autoptimize is working or not. Please enable this option.
Setting Up Autoptimize – Image Optimization
An image is always the big bad baboon of a webpage. Usually, it is the heaviest element on your page, and it is mostly responsible for dragging down the webpage loading speed.
So, optimizing your images on page is necessary. If you want to learn how to optimize images, here is a full article you can read.
Okay, back to the show!
Autoptimize does allow image optimization through its integration with ShortPixel. This allows performing three things:
- Compress images on the fly using ShortPixel and then serve them using ShortPixel’s global CDN.
- Lazy loading the images on a webpage.
- Converting images into Webp format and serving that format to supporting browsers.
Sounds great, right?
Hold your horse, sir! Not everything that glitters is gold.
It is great that Autoptimize will allow you to optimize images by compressing them. You can select from diverse types of compressions including Lossy, Lossless, and Glossy.
However, to use this feature, you must signup with ShortPixel to receive some free credits. Beyond that, must purchase additional optimization credits.
ShortPixel is quite popular, and you can rely on it.
If you do not have the budget, it will not work. But that is the story with most image optimization services you will encounter.
One drawback of using Autoptimize (and hence, ShortPixel in this context) is that you cannot optimize images that you uploaded prior to Autoptimize installation.
So, you should be optimizing all those images manually.
Coming to lazy loading, it sounds great, too!
But wait!
While lazy loading is a good practice to increase page speed, it can also lead to CLS issue.
In general, lazy loading will collapse the space where the image is supposed to show up unless someone scrolls up to that position. Once a user reaches that position, the image will show by pushing down (or up) the content.
This causes CLS.
So, while it is “absolutely” necessary to use lazy loading, it is also equally necessary that you declare the image size in the code. Declaring the image dimensions will reserve the spot for that image, thereby preventing the collapse of the whitespace.
When the area is reserved, the users will see a blank space, but you can further configure things to show a low-quality image placeholder so that people know that there is supposed to be something in that place.
There is no uncomplicated way of doing this if your web hosting company does not allow using caching plugins. There are caching plugins like WP Rocket and LiteSpeed Cache that can achieve this feat with absolute ease.
If your web hosting company prevents you from using caching plugins, you need to do it the hard way and declare image dimensions manually.
Another way of achieving this without fiddling with complicated code is to use a theme that allows declaring image dimensions and natively supports lazy loading. But there is a problem. Usually, those themes will allow declaring the size of the featured image (which in general has the same dimension for all posts). For the rest of the in-post images, that is not a solution.
Here is a brilliant tutorial that you can use to manually add image dimensions.
Unfortunately, there is no well-coded plugin available in WordPress plugins repository for adding image dimensions. There is one known plugin that can add width and height attributes to your images, but unfortunately it is known to return PHP errors and notices.
If you want to use it, use it with caution. You can also check its performance in WP Hive tests here.
Whether or not you want to use this feature is up to you. I do not usually recommend it.
I prefer a standalone plugin that will not only compress your images, but also offers lazy loading, WebP conversion, and allow me to bulk compress the images I uploaded previously. I highly recommend using WP Compress, but you can decide to go for other plugins. I have compiled a list of various plugins that will allow you to optimize images and serve WebP versions.
Autoptimize will also give you the option for excluding images that you do not want to lazy load.
Usually, the images you exclude are logo, social media icons, and extremely important image elements.
Specialized image optimization plugins that you can find in the list I gave above will let you do that, as well. So, try not to use this feature.
Setting Up Autoptimize – Extras
You can find a few extra optimization features in Autoptimize. Using them can help you. Let us check them out.
Google Fonts
Google fonts have a heavy payload. They can slow down your website. Unless your website is one that ‘ABSOLUTELY’ needs Google fonts, do not use them.
Use system stack fonts for speed improvement. In fact, using system stack fonts can have a massive positive impact on your website speed.
While Autoptimize give you diverse ways to optimize Google fonts, I will always suggest that you remove them.
Font beautification is less important than speed. Do not compromise your site speed just to get some awesome-looking font.
Remove Emojis
Yes, remove emojis. WordPress core has JS and CSS files for displaying emojis. Removing them will ensure that those files are not slowing down your website.
Most modern browsers natively support emojis. You do not have to provide that support through WordPress.
Also, the operating systems that people use today, come with font stacks with full emoji support. So, disabling emojis from WordPress core is not likely going to hamper the ‘emoji experience’ that you want your readers to enjoy.
Remove Query Strings from Static Resources
What is a query string? Have you seen something like this – ?s=word in the URL? That is a query string. Removing query string has no impact on page speed. It only improves your website’s score in Pingdom tests or GTmetrix test. You may or may not remove them. Your choice.
Preconnect to 3rd Party Domains
You will be invariably using 3rd party domains. For example, if you are using Google Analytics, the code you add to your website makes an external request to the domain https://www.google-analytics.com/.
There can be many such external domains connecting to your website. For instance, when you use third-party ads, ads are served from ad servers different from your server. Those ads come from third-party domains.
The Preconnect directive allows a user’s browser to connect to the domains you specify here to quickly process both DNS lookup and SSL handshake before sending out the full HTTP request.
This allows quicker connections with lower DNS lookup time, and hence, increase the speed of your webpage.
To find the external or third-party domains, right-click on your website’s homepage and click on ‘Inspect.’ (Note: this instruction is for Google Chrome).
You will see a window popping out on the right side of the screen. It will look like this:
What you see is the developers’ tool.
Click on the Sources tab and you can see the list of third-party domains. Copy them and add them to the Autoptimize.
Ideally, you should not be adding more than 6 to 7 domains because that can hit the performance.
If you want to add more Preconnect directives (that is, add more domains to the list), make sure that you repeatedly check the performance of your website. Stop when the performance starts dropping.
Preload Specific Requests
Preload is a directive that that instructs a web browser to download important assets “very” early in the process of page load. This helps to load the webpage quickly.
For instance, if you have special fonts on your server that you are using on your website, this directive will instruct the browser to download those fonts before the request for the CSS of that page is made. This will ensure that when the CSS loads, the fonts are already present.
When properly applied, preload can be immensely helpful in speeding up a webpage.
Unfortunately, using this directive without caution can cause serious performance issues. You should never preload too many assets. So, you need to have a proper knowledge of what needs to be preloaded.
If you do not know, ask your theme developer to point out those assets. If you have purchased a theme, you can ask the company through their support forum.
Async JavaScript Files
Asynchronous loading of JS files can load your website quickly. However, certain JS files are mission critical. Loading them asynchronously will break the functionality of your website.
So, if you are using this feature, make sure that you are testing the frontend of your website thoroughly.
Nothing can be worse than having a non-functional broken site.
Conclusion
Autoptimize can help to improve your site speed significantly. But failing to set things properly can very well mean a broken site. For every setting, test your website properly. If you see errors, revert the setting.
You must understand that optimization is not a plug-and-play. You must experiment with various settings and find out what works best for your site. What works best for me does not necessarily mean that it will work for you, too!
Have patience and use the trial-and-error technique. You will eventually hit the orgasmic spot where everyone including you, Google, and your readers will be left happy and satified.
