Tutorial: How to configure Autoptimize step by step

Creating websites with WordPress is considered one of the best ways to integrate into a professional web presence. Many people start their own blogs or online stores using this important tool, making use of plugins like Autoptimize and you are probably wondering how to configure Autoptimize.

With thousands of plugins available, WordPress offers all the tools you need to have a successful website. And among the most prominent is Autoptimize, a plugin that makes life much easier for users.

It is for this reason that this article is focused on the benefits that the Autoptimize plugin brings to WordPress pages. In addition to a clear explanation on how to configure it in order to access a greater number of benefits. Do you want to know how to configure Autoptimize step by step? We tell you.

What exactly is Autoptimize?

You are probably wondering what Autoptimize is and what its function is. You can easily tell that this plugin is a .

Each of them is known as the programming language used for web design. And using the WordPress Autoptimize plugin could make optimization easier and also offer other benefits like:

A free version: In this option it is possible to acquire all the elements that help optimize a WordPress page.
Compatibility with any web host: The Autoptimize plugin only has optimizing handles, so it is fully compatible with any host. Even if your cache is stored on other pages.
Popularity and Updates: With over a million fully active installations, Autoptimize has constant updates to help fix bugs.

Steps to configure Autoptimize: How to configure Autoptimize?

Now that you know what are the main benefits of using Autoptimize on your WordPress page, you should know how to configure Autoptimize step by step. Through this series of tips you will be able to obtain efficient operation and it is quite simple to carry out.

JS, CSS and HTML adjustments

Programming languages are the basis of Autoptimize and a wide variety of configurations can be found. In order not to make it so long and tedious, it is important that you follow the instructions that will help you configure the most basic but necessary options of Autoptimize.

All these configurations go hand in hand with a different type of language. Therefore, below, we offer you the key settings for efficient operation.

JavaScript options

Accelerating the speed of your web page with Autoptimize is quite simple. For that it is necessary to configure the JavaScript options as follows:

JavaScript code optimization: It is best to enable this setting to help minimize JavaScript files.
Add JS files: This option helps to combine all available files into a single JavaScript file. This is essential for better optimization, but you can test it by toggling it on and off to compare.
Also add JS inline: This setting can generate a lot of cache so it is better to have it disabled. However, it is about extracting the inline JavaScript within your HTML to combine it with the JavaScript file that Autoptimize optimized.
Force JavaScript on: This configuration allows you to force the loading of this class of files on a web page. It is best to keep it disabled to optimize the page.
Exclude scripts from Autoptimize: If you want to exclude specific directories you can do so. If you add a script the directory will be excluded, but they will still be mined.
Add Try-Catch Wrapping: Thanks to this option you will be able to eliminate the problems generated by the minification of JavaScript and its aggregation. If a web page only works with this option enabled, it is better to ask a developer for help because its excessive use can slow down the page.

CSS Options

For CSS settings to follow are as follows:

Optimize CSS code: Enabling it allows Autoptimize to mine files of that class.
Add CSS files: It works to combine all available files into a single CSS file and it is best to test its impact on each site.
Also add CSS inline: It uses the CSS inline file to combine it with the one that Autoptimize took care of optimizing. For the most part it is better to leave it disabled.
Generate data – URLs for images: This choice allows the plugin to encode background thumbnails within a CSS file using base64. It is important to measure the impact it has on your speed.
Inline and Defer CSS: It is possible to use critical CSS to considerably improve the speed of a website. However, it is best to use a tool that helps extract the necessary styles for correct alignment of the essential elements of the CSS file.
Insert all CSS: This option is best disabled in most cases because it results in a larger web page size.
Exclude CSS from Autoptimize: The plugin already has a default list of directories that should be excluded. However, you can simply add more and prevent them from being added.

HTML options

With the help of HTML options white space will no longer be a problem. Your configuration works as follows:

HTML code optimization: Thanks to this configuration the spaces that are not necessary and are blank are eliminated. The most recommended is to test on each site to avoid conflicts, although it works in most options when activated.
Keep HTML comments: It can be enabled if you want to enable such comments on optimized pages.

CDN Options

In case of using a CDN, you can easily add your URL to Autoptimize’s CDN options. Nevertheless, This option does not apply to proxy services with the ability to fulfill the function of CDN.

cache information

Taking advantage of this section of the options allows you to know the location of the cache of a web page. In addition, it provides other information that includes permissions of said folder, the size of styles and scripts.

In the option “Can we write?” it should appear configured with the answer “Yes”.
In miscellaneous optimizations, the option to save added files as static files locally is enabled.
It is also important to enable the option to Minify excluded CSS and JS files, so that you are minified.

Image optimization

One of the reasons why many web pages turn out to be very slow is the use of images in large quantities. Even so, it is possible to enjoy an optimization that helps multimedia content to be compressed without losing quality. With the WordPress Autoptimize plugin it is possible to achieve this easily.

Thanks to a built-in ShortPixel option, you can configure the Autoptimize plugin to optimize images on a website. You can also make different adjustments to the quality of each image and this management also creates WEBP versions of any image.

Other functions that can be managed through the plugin is “lazy loading” in the images. The function can be enabled because it helps improve the speed of the web page and more if it has a large number of images. This allows you to exclude a number of eligible images that do not need optimization.

The images that can be most appropriately excluded are logos, social media icons, and other elements.

In addition to offering a host of ways to optimize in any of the programming languages, Autoptimize offers more. It is possible to find some extra options that can easily help improve the speed of a web page.

Remember, a well-optimized web page helps to obtain and is benefited by browsers. Apart from helping users to enjoy a better experience.

Additional auto-optimizations to configure Autoptimize

As if that were not enough, in this Autoptimize tutorial a series of extra optimizations are presented, among which you can find:

Google Fonts. Oddly enough, you can optimize the way a page uses the fonts of this browser. You can leave them that way; delete them, combine them and link them or preload them in the head; in addition to combining and loading fonts with the help of webfont.

If these sources are not important, it is best to remove them. But if your website needs Google fonts, then you can choose the combination that best suits the web.

Disable emoji: Using this feature removes everything related to WordPress emojis and reduces the size of the page significantly.
Remove query strings from static resources. Provides a better score on performance pages.
Pre connection with third party domains. Helps browsers to have a connection to a custom domain for DNS lookup. This happens before the HTTP request is fully sent.

It is possible to use some development tools that allow you to find third-party domains that are good to connect to. And it is best not to add more than the six domains for this option, because it generates an overload on the performance of the web.

Preloading of specific requests. Thanks to this function, the directives allow the browser to download a file in the shortest time. This helps users to quickly download all the files necessary to load a website.

Selecting this option can speed up the font loading processes, helping to make them available. This way, the page will be able to have them at your fingertips when it is completely loaded. And the most recommended is always to have the support of a developer to know which assets are pre-installed in WordPress.

Async JavaScript files. Another Autoptimize feature that helps customize which external JavaScript files to load. This is done asynchronously to improve the speed of a page when loading. And it is recommended to always test to make sure you get good performance.

conclusion

The biggest reason why Autoptimize should be chosen as a tool to optimize a website is its benefits. If you want to configure it, it is quite simple and allows you to manage features that will help you improve your website, just follow this tutorial to learn how to configure Autoptimize step by step.

Also, This WordPress plugin is available for free and helps users optimize their WordPress site. It has basic options that help optimize HTML, CSS, and JavaScript, as well as management that optimizes advanced features.

It can be considered as a fairly complete plugin that does not need many settings to use. And without the…