WordPress site Optimization plug-in Autoptimize setup tutorial

(5) Exclude Scripts from Autoptimize (JS optimized exception list)

this option sets the exception list for specific directories and JavaScript files (the list contents are not merged). By default, Autoptimize excludes the following scripts or directories.

• wp-includes/js/dist/
• wp-includes/js/tinymce/
• js/jquery/jquery.js

, note that by default, adding scripts to exclude only affects the merge. Excluded JavaScript files will still be shrunk unless minify excluded CSS and JS files- minimized exception list CSS and JS Files under Misc Options- other options are not selected.

(6) Add Try-Catch Wrapping (add Try-Catch wrapper)

enable the “add try-catch wrapping” option to encapsulate your JavaScript code in a try-catch block. This option is useful for debugging problems caused by JS compression and merging. If your site only works with “add try-catch wrapping” enabled, we recommend that developers help you find the JavaScript file that is causing this problem, as excessive use of try-catch blocks can degrade JS performance. The

CSS option sets the CSS optimizer

(1) Optimize CSS Code (optimize CSS code)

for

Autoptimize. We recommend that you enable this option. When “optimize CSS code” is enabled, Autoptimize minimizes the site CSS file.

(2) Aggregate CSS Files (merge CSS files) the “aggregate CSS files” option of

Autoptimize merges all CSS files into one file. As mentioned earlier, this feature may not work for sites that support HTTP/2. It is recommended that you enable or disable this option to test the site for Ahand B to determine whether it is helpful for page loading speed.

(3) Also Aggregate Inline CSS (aggregate inline CSS)

this option merges inline CSS into Autoptimize’s CSS file. Although merging inline CSS into CSS files that support browser caching can reduce page size, it is recommended that you disable this option in most cases.

(4) Generate Data: URIs for Images (generate Image URI data)

when enabled, Autoptimize encodes the small background image with base64 and embeds it into the CSS. We recommend that you test this option to assess the impact on page speed. Although encoding an image to base64 format can reduce the number of HTTP requests, base64 format files are usually 20-30% larger than binary files.

(5) Inline and Defer CSS (inline and delay CSS)

inline key CSS can significantly improve the speed of some sites. In fact, inline CSS usually targets elements such as structural elements, global font and size, and navigation styles. By inlining these key elements,

delays loading a large, complete CSS file without affecting the layout of the page. Although you can extract key styles manually, we recommend using more efficient online tools to generate styles. After

generates the critical CSS

generates the critical CSS, copy and paste it into the Autoptimize settings.

inline and postpone CSS

in Autoptimize the next step is to test the site’s front-end experience. If you notice some strange changes in unstyled content (FOUC), you may need to identify those unstyled elements and add the appropriate styles to the Autoptimize for inlining.

Autoptimize provides a “power-up” feature that automatically generates critical CSS for WordPress pages. In our experience, this feature sometimes slows down the site because it uses external API calls to generate critical CSS. Therefore, the initial critical CSS generation depends on the responsiveness of the external server. In most cases, a method that does not require any external API calls is a cleaner solution.

warm Tip: if you are not familiar with CSS, it is not recommended to enable this option. Moreover, the author believes that this method is limited to improve the loading speed of the website.

(6) Inline all CSS (inline all CSS)

for most sites, we do not recommend inlining all CSS because it will greatly increase the page size. In addition, Web browsers cannot cache CSS after inlining all CSS.

(7) Exclude CSS from Autoptimize (CSS optimized exception list)

by default, Autoptimize excludes the following directories and CSS files from the merge rule. If you don’t want Autoptimize to merge specific CSS files, you can add them to this list. Similar to the JavaScript exclusion list, this feature does not affect CSS file compression by default and only applies to CSS merge rules. The

• wp-content/cache/
• wp-content/uploads/
• admin-bar.min.css
• dashicons.min.css

HTML option sets the HTML optimization for

Autoptimize to reduce the page size by removing spaces.

Autoptimize’s HTML optimizer

(1) Optimize HTML Code (optimize HTML code)

we recommend enabling the “Optimize HTML Code” feature because it reduces the page size by removing unnecessary spaces in the HTML. Although this feature is compatible with most sites, deleting spaces may cause some sites to fail. Therefore, we recommend that you fully test HTML code optimization before using it in a production environment.

(2) Keep HTML Comments (keep HTML comments)

enable this feature if you want to keep HTML code comments. The

CDN option sets

if you are using CDN to accelerate static resources, you need to add CDN URL to Autoptimize. However, if you are using a CDN proxy service similar to Cloudflare, you do not need to make any configuration in the CDN option of Autoptimize. CDN optimization settings for

Autoptimize

Cache information the “cache info” of the

Autoptimize plug-in is used for display, such as the location and permissions of cache folders, as well as cache information such as cache styles and the total size of scripts. If in “Can we write?” If you see “No” next to it, you need to modify the folder permissions on the server.

Cache information for Autoptimize

Miscellaneous Settings the

Autoptimize plug-in also has some other optimization settings. If you encounter problems loading a Web site after optimizing the CSS and JS files, you may need to reconfigure some of the following settings. Miscellaneous settings for

Autoptimize

(1) Save Aggregated Scripts/CSS as Static Files (merge JS/CSS and save as static file)

we recommend that you enable this option to save the merged file as a local static file. If your server does not configure file compression and cache expiration, you may need to disable this feature.

(2) Minify Excluded CSS and JS Files (CSS and JS File Compression exclusion list)

We recommend enabling this option to ensure that all CSS and JS files are compressed. However, if you find problems with some CSS and JS file compression, you can continue to disable this option.

(3) Also Optimize for Logged In Editors/Administrators (optimized for login editor / administrator)

We recommend enabling this feature to ensure that it is optimized for login editor and administrator roles. This is important if you want to test the Autoptimize setting as a logged-in user.

Picture Optimization options set the

Autoptimize plug-in integrates ShortPixel to optimize images. In addition to the image quality settings, the Autoptimize plug-in also supports generating WEBP versions of images.

but if you are looking for more perfect image optimization, we do not recommend that you use the castrated image optimization feature provided by “Autoptimize”. Instead, it is recommended to use full-featured plug-ins from ShortPixel or Imagify directly. With the full plug-in, you will have finer control over the optimization settings, including rewriting the image to use thetag, which is necessary for some server WEBP support.