How to Configure Autoptimize Plugin to fix Core Web Vitals errors

configure Autoptimize Plugin to fix core web vitals errors

Every user needs a great website experience and speed. Google also loves fast websites and that Websites perform well in SERP.

Core Web Vitals also a Google ranking factor. As Google tries to bring something good for its users. It’s very important having a fast website with Good Core Web Vitals scores.

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. And fix your core Web Vitals errors and speed up your WordPress website.

Creating web pages 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 add-ons such as Autoptimize and you are probably wondering how to configure Autoptimize to fix Core Web Vitals.

It is for that 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 Autoptimize to fix Core Web Vitals errors so that it be able to access a greater amount of benefits.

Now, let’s check the website speed and Core Web Vitals errors so that we can calculate the benefits after configuration Of the Autoptimize plugin.

pagespeed before Configuring Autoptimize

Lots of Core Web Vitals errors right now! And website speed is also not good. So let’s configure the Autoptimize plugin and we will see the results.

First now…

What exactly is Autoptimize?

Most likely, you are wondering what Autoptimize is and what it does. You can easily say that this plugin to optimize HTML, JavaScript, and CSS.

Each of them is known as the programming language used to design a website. And using the WordPress Autoptimize plugin could make optimization easier and also offer other benefits such as:

  • A free version: In this option, it is possible to acquire all the elements that help to optimize a WordPress page.
  • Compatibility with any web host: The Autoptimize plugin only has managements to optimize, so it is completely 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 to fix Core Web Vitals errors

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 an efficient operation and it is quite simple to carry out.

JS, CSS and HTML Settings

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

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

JavaScript options

JavaScript options

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

  • Optimize JavaScript code: It is best to enable this setting to help minimize JavaScript files.
  • Aggregate JS files: This option helps to combine all available files into a single JavaScript file. This is essential for better optimization, but you can perform a test by activating and deactivating this option to compare.
  • Also, Aggregate inline JS: This setting can generate a lot of caches so it is better to have it disabled. However, it involves extracting the inline JavaScript into your HTML to combine it with the JavaScript file that Autoptimize optimized.
  • Force JavaScript in head: This setting allows you to force the loading of this kind of file 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. If you add a script the directory will be excluded, but it will continue to 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 the settings to follow are the following:

CSS options - Autoptimize
  • Optimize CSS code: Enabling allows Autoptimize to mine the files of that class.
  • Aggregate CSS files: It works to combine all the available files into a single CSS file and the most recommended is to test each site for its impact.
  • Also, Aggregate inline CSS: Use the inline CSS 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 to extract the styles necessary for a correct alignment of the essential elements of the CSS file.
  • Insert all CSS: This option is best disabled in most cases because it generates a larger size of the web page.
  • Exclude CSS from Autoptimize: The plugin already has a default list of directories that should be excluded. However, you can add more simply and prevent them from being added.

HTML options

HTML options - Autoptimize

With the help of HTML options, whitespace will no longer be a problem. Its configuration works as follows:

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

CDN Options

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

Cache information

Cache info - Autoptimize WordPress Plugin

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 that folder, the size of the styles, and the scripts.

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

Misc Settings

Misc options - Autoptimize

Enter the end of the Main Settings, namely Misc Options, leave it as is as shown below. When finished, please click Save Changes and Empty Cache.

Images

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.

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

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

Extra Settings

Additional Settings to configure Autoptimize:

Extra Settings - Autoptimize

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 to improve the speed of a web page.

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

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 the fonts with the help of Webfont.

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

  • Disable emojis: By means of this function, it eliminates 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. It helps browsers to have a connection to a custom domain for DNS lookup. This happens before the full HTTP request is sent.

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

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

With the selection of this option the processes of loading the fonts can be accelerated, helping to make them available. So the page can have them at your fingertips when fully loaded. And the most recommended is always to have the support of a developer to know what are the assets that are pre-installed in WordPress.

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

Autoptimize Plugin Configuration Result

You just need to use the PageSpeed tool to see the results before and after configuring the Autoptimize WordPress plugin.

Now, let’s have a look at configuration results:

pagespeed after Autoptimize Configuration

As you can see, Website Speed is increased and all 3 Core Web Vitals metrics (FID, CLS, and LCP) Scores also increased. If your website still has errors, then don’t hesitate to ask in the comment section.

Conclusion

Autoptimize is quite simple and allows you to manage features that will help you improve your website speed and fix Core Web Vitals errors, just follow this tutorial to know how to configure Autoptimize to fix Core Web Vitals errors and speed up your WordPress website step by step.

In addition, this WordPress plugin is available for free and helps users to optimize their WordPress site. It has basic options that help optimize HTML, CSS, and JavaScript, as well as features that optimize advanced features.

If you are stuck somewhere in configuration, then feel free to share your question in the comment box.

Leave a Comment

Your email address will not be published. Required fields are marked *