On a beautiful day, you suddenly see that the speed of your website is very slow and your day becomes very dark. Why and what to do? Do not worry, if you find a solution, your day can be bright again and the solution is to use the Autoptimize plugin. We will teach you how to use the Autoptimize WordPress plugin.
Why is your website slow?
There are several reasons for the increase in load time of your site, here are some of them:
- Your website has many databases such as media items, plugins and… they are very heavy.
- Server is weak
- Your website has a lot of traffic that makes it congested.
- Your code is too “large” and has too many unused characters.
- Your images are not standard and optimal
And there are many other reasons why your website slows down so much. In order to perform better, you need to find a solution. Using WordPress plugin is one of the solutions. There are many plugins that can help you optimize your website speed and Autoptimize is one of them.
How to optimize with Autoptimize WordPress plugin
The first thing you need to do, as always, is install and activate the Autoptimize plugin.
After preparing Autoptimize, you need to configure it. To access the plugin settings page, you can refer to the Settings »Autoptimize section. You can then view the plugin settings page.
In the following, we will explain each section to you.
JS, CSS and HTML tabs
Integrate JS inline : Also enabling this option increases the size of your cache despite faster page load. So make sure you clear your cache regularly because cache is not too good for your website. We do not recommend that option.
Disable scripts from Autoptimize : You may encounter scripts that do not work well after the Autoptimize plugin has minimized or compressed it. In this section, you can enter this script and prevent it from becoming mini-WiFi by the plugin.
Add category by try-catch: Enable this option if a JS error prevents your pages from working properly. Enabling this option will prevent any errors before they can stop rendering the page.
CSS options settings
Now scroll down to the CSS options. There are options to check:
Generate data: URIs for images: This option allows you to encode thumbnails into CSS files and embed them. In this case, you will prevent many server requests to download each one.
Inline CSS and defer: This option allows you to insert some CSS into the HTML file if you need to load the page. Loading other CSSs is delayed and then loaded.
Inline all CSS code: This option is suitable for websites with low traffic. Incorporating all CSS will speed up low-traffic sites, but will work the other way around for high-traffic sites.
Disable CSS from Autoptimize: Here you can enter a list of CSS that the Autoptimize plugin is not allowed to access.
HTML settings and CDN settings
HTML Code Optimization: Enabling this option will remove white space and some HTML code from your website comments. This will make the code line compact to speed up your website.
Save HTML comments: Also enable this option if you want to save comments.
CDN Settings: Entering the content delivery network address at the root of the CDN URL is optional. If you have set up a complete CDN through each service, you can enter its address here. If you use Cloudflare, you do not need to do this.
Cache information : This section provides information about the site cache.
Slightly lower than the CDN settings there are miscellaneous settings.
Save integrated script and CSS as static files: You must enable this option. For some reason, disable it only if there is a compression or expiration error.
Minimize deleted CSS and JS files: If you did not delete any files from the JS and CSS options above, enable it, it means you are not shrinking any more files. It is optional.
Optimization for logged in users: By activating this option you can perform optimization for logged in users. As mentioned in the plugin description, you can choose it depending on your website or not. But if you use the page builder plugin, check this option to prevent some plugin functions.
After working with JS, CSS, and HTML settings, click Save Changes or Save Changes and Clear Cache.
If you want to optimize your image for better performance, go to the Images tab.
Image Optimization: Your image is compressed by Shortpixel to make your website lighter.
Image optimization quality: Choose one of three compression levels.
Whether to load WebP in supported browsers: Enabling this option will load your images in WebP format as well as lazily. This can have a huge impact on speeding up your site.
Finally, click the Save Changes button.
If you want to make more detailed and additional options, go to the additional tab and select some boxes here according to your preference. The description of each section is quite understandable, so you just have to read it carefully. After making the settings, do not forget to click on the Save Changes button.
If you want to optimize your website, the author already suggests useful plugins in this list.
Blocking CSS files slows down performance. To resolve this issue, the Autoptimize Critical CSS Power-Up plugin is recommended. Click the button on the page to install it. This is a special technique that first displays the primary and important CSS and then reloads the unimportant CSS later.
Now if you check your website you will notice that its speed has increased significantly. You can also use the site speed test tool for a more detailed review.
We hope you have learned how to optimize WordPress with the Autoptimize plugin. If for any reason you do not want to use this plugin, there are many other plugins to replace, including the WP Rocket plugin, which is one of the most popular and powerful tools to increase the speed of the site.