How to Use Autoptimize Plugin to Increase Your Website Speed
Last Updated: April 28, 2021 in Optimization
On a beautiful day, you suddenly find your website running slowly and your day becomes so overcast. Why and what should you do? Don’t worry, your day can be bright again if you find out a solution. In this article, the solution is using the Autoptimize plugin and I will show you how to use it to optimize your website speed.
Why Is Your Website Slow?
The increasing of your loading time is caused by many reasons, here are some of them:
- Your website has too many databases like media items, plugins or themes, …and they’re too heavy.
- Your server is so poor that it takes much time to wait.
- Your website has a lot of traffic, which causes congestion.
- Your code is too “big” and has a lot of unused characters like JS, CSS files that you need to remove.
And there are many other reasons that make the speed of your website so low. To have better performance, you need to find the way out. Using a plugin is one of the solutions. There are many plugins that help you optimize your website speed and Autoptimize is one of the kind.
Getting Started
Apparently, you have to install and activate the plugin. The free version of Autoptimize is available on WordPress.org. You just need to search for it in the Dashboard and install, activate it normally.
Configure the Autoptimize Plugin to Speed Up Your Website
After Autoptimize is ready to use, you need to configure it. Stay in the Dashboard, go to Plugin and you will see the activated Autoptimize plugin here. Click Settings.
Here is the latest UI of Autoptimize Settings board:
The manipulation is just simple. You just need to put a tick to some of the boxes here. But it’s not just easy like that as you should know which to tick and which not.
JS, CSS and HTML Settings
JavaScript Options Settings
Stay in the JavaScript options, enable the Optimize JavaScript code. After you put a tick on this box, other options in the Java Script Option section will show up like this.
By enabling Optimize JavaScript code, you actually enable the minification of JavaScrip assets to make your website faster. That’s the most important thing to do in this part.
And look at the Aggregate JS-files, it’s also automatically enabled right after you check the Optimize JavaScript code box. This action is highly recommended. This is because when you only minify the JavaScrip assets, they will not be united by default so you will have to select Aggregate JS file for them to be all aggregated and minified.
The Also aggregate inline JS when being enabled will increase your cache size despite giving faster page loading. So, make sure that you frequently clear your cache memory as too much cache is not good for your website. I don’t recommend that option.
Force JavaScript in <head> isn’t recommended, either. It may stop the page from rendering to fix the JS-error, which slows down your loading time.
Exclude scripts from Autoptimize: enter the scripts that you don’t want to aggregate. This will help you normally fix something that wouldn’t work during the optimization.
Add try-catch wrapping: If any files are breaking during the optimization process, you can enable it to troubleshoot. It’s optional for you.
CSS Options Settings
Now scroll down and move to the CSS Options. There are the options you should tick:
The Optimize CSS Code, Aggregate CSS-files, Also aggregate inline CSS and Exclude CSS from Autoptimize are similar to JS options above. You should also enable Also aggregate inline CSS only when you are aware that your cache is growing and delete it.
Inline all CSS shouldn’t be enabled if your website has a lot of traffic because it may slow down the speed. You should only use it to have a better score in PageSpeed Insights when the number of visitors is small. However, as you can’t control the website traffic and it’s obvious that every website owner wants to increase the traffic, I don’t recommend this section.
Inline and Defer CSS: It’s related to code so the author suggests you should check the FAQs page to have further information.
It’s optional to choose Generate data: URIs for images depending on your images’ size. If the images’ sizes are large, Autoptimize will skip them to avoid any problem while rendering.
HTML Options and CDN Options Setting
Enable Optimize HTML Code, the whitespace and some comments of the HTML code of your website will be deleted. This action will compress the line of code to some extent to speed up your website. If you want to keep the comments, put a tick at Keep HTML comments.
It’s optional to enter your CDN (Content Delivery Network) root URL in the CDN Base URL tab. If you have a full CDN set up through any service, you can put the URL they give you here. If you use Cloudflare, you don’t need this action.
Misc Options
Under the CDN Options is the Misc Options here.
Save aggregated script/CSS as static files: You should check this option. For some reason, you only uncheck it if your server has some error about compression and expiry.
Minify excluded CSS and JS files: If you exclude any files from the JS and CSS Options above, uncheck it will mean that you no longer minify the files. It’s optional.
Also optimize for logged-in editors/ administrators: As the author states, you can choose it or not depending on your website. But if you’re using a page builder plugin, leave this unchecked to avoid some of the plugin’s functionalities from stopping working.
After you’ve done with the JS, CSS, and HTML Settings, click Save Changes or Save Changes and Empty Cache. I prefer Save Changes and Empty Cache to remove Cache at the same time.
Image Optimization
If you want to have your image optimized for better performance, move to the Image tab.
Optimize Images: Your image will be compressed by Shortpixel to make your website more lightweight.
Image Optimization Quality: Choose one of the three compressions. This is how they explain each kind so that you can choose one that suits your website.
Load WebP in supported browsers and Lazy-load images are optional to choose. Lazy load images can make your loading time faster, but the image display may be annoying to your visitor.
Finally, click Save Change.
Extra Options
If you want more detailed and extra options, go to the Extra tab and choose some of the boxes here according to your preference. The explanation for each section is quite understandable so you just need to read it carefully. Some of the sections are marked specially for advanced users so if you are a beginner, just ignore them. Don’t forget to click Save Change.
That’s all! After I completed optimizing, my website speed is now much faster than before.
Optimize more
If you want to optimize your website more, the author already suggests some useful plugins in this list.
Critical CSS
Render-blocking CSS files will cause slow performance. To correct this, the author also recommends Autoptimize Critical CSS Power-Up plugin to resolve this problem. Click the button to install it. This is a special technique to display the basic CSS first and then load the other unimportant CSS later, making a sense that your website is loading faster.
Final Words
There are many methods to speed up your website, both using and not using plugins. In the market, Autoptimize, WP Rocket, Jetpack, … are the most popular one. We already have tutorials on using these plugins to do it, you can refer to them to find which plugin is your best choice.
Have fun with a quick website!
- Image Optimization In WordPress: Beginner Guide And Plugins Review
- 7 Best Cleaning Tools for your WordPress Website
- 7 Ways to Speed Up Your WordPress Website
- How to Use Autoptimize Plugin to Increase Your Website Speed
- A Guide to Speed up Your Website Using CDN
- Top Plugins To Increase Your Website Speed