Instructions for using the plugin Autoptimize

24-07-2022
chuong xuan
0 Comments

I am very interested in WordPress acceleration , as site speed has always been the most important topic of admins.

Today I will talk about Auto-Stimulation plugin – one of the best free accelerators.

Mục lục

How does a plugin speed me up?

Autostimulation improves page load times through three key factors:

Compress, merge, and optimize CSS files
Compress, merge, and optimize JavaScript files
HTML Compression

Compression reduces the file size, while pooling reduces the number of requests to the server. Both of these factors help increase site speed. While the "optimal" operation is mainly about removing display-blocking CSS and rendering-blocking JS to give preference to above-the-fold content.

After installing and activating the plugin, go to its settings:

Basic Setup

Its custom interface is as follows, you tick all 3 optimal options:

Instructions for using the plugin Autoptimize

Then you scroll to the bottom and click Save Changes / Save changes.

If you use a CDN service (like MaxCDN, KeyCDN, CDNSun) then in the CDN options you enter the CDN root URL there, otherwise leave it blank (I don't personally use it, so this part will not fill in anything) :

Advanced customization

With the basic option you already have to speed up your website, if you want a deeper optimization then go for the advanced customization.

To enter the advanced customization section, click the button as shown below:

Its advanced interface is as follows:

I will go into detail about each option.

Keep HTML comments? That is keeping the HTML comments in the page. If you want to keep the HTML comment, tick it.
Force JavaScript in <head>?: That is, push JS to the . Checking this will probably fix some JS related bugs, but it can create rendering blocking issues. My personal choice: do not tick.
Also aggregate inline JS?: That includes inline JS. This check helps to extract and aggregate inline JS and it can help improve performance, but it can increase cache size quickly. Personal choice: yes or no, depending on the site, but usually not selected.
Exclude scripts from Autoptimize : That is, do not optimize certain JS files (no packaging and compression). By default Autoptimize will not optimize jQuery files, the reason is that many plugins and themes use jQuery and if Autoptimize does optimization it will break the functionality of those plugins and themes (and will affect webpage). To add a non-optimized file, enter its name in the corresponding area and separate it with a comma, for example: any.js, another.js
Add try-catch wrapping? : If you have an error with JS, you should tick this.
Generate data : URIs for images? This helps the small background image to be included in the CSS file to avoid additional image download requirements. You should tick. (can use image base64 encoding to get the code inline directly into the CSS)
Also aggregate inline CSS? This makes inline CSS merge, similar to inline JS merge, which can be checked or not depending on the page, but usually I don't, why? Since on prestige themes, inline CSS is mostly used to avoid blocking in the first place, so there's no need to include anything.
Inline and Defer CSS? That is, inline and defer CSS loads. Normally Autoptimze would optimize the CSS and place it at the top of the head tag, but that would block rendering of the page (the message you usually see in Google's PageSpeed Insight messages). When you check this option, the CSS file will be deferred (preferring HTML and inline CSS to load first). And so that the page layout doesn't get affected too much, you can add the CSS to Paste Ahead of CSS here – these are important CSS related to page layout for above-the-fold content. To get this CSS go to: https://www.sitelocity.com/critical-path-css-generator and paste the URL of the post, it will extract you the required CSS. Personal choice: It depends, some sites will be fine, while others won't, but overall it should.
Inline all CSS? It's inline all CSS. This has the effect of reducing requests compared to putting the CSS offline. However, it is only effective if the CSS file is not large and the number of pageviews per user is not much. Inlining all CSS will completely prevent browser caching. Personal choice: do not tick in most cases.
Exclude CSS from Autoptimize : Has the same meaning as exclude JS. But here is excluding CSS files. There are CSS files that if you optimize with Autoptimize will destroy the functionality or layout of the site, you need to exclude it here. By default, some CSS files are excluded like: wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
Cache info : This section shows cache-related information, including directory, Autoptimize overwrite status and available cache file size.
Misc Options : These are additional advanced options. Save composite script/css as static file? related to static caching of JS and CSS files. Also optimize for logged in users? related to Auto-optimization will be enabled for both logged in users. Personal choice: ticked.

Custom Extra / Incremental Optimization

These options continue to help you further improve your website speed.

Remove emojis : Involves removing inline CSS and inline JS emojis (except for non-optimized JS files). Personal choice: ticked.
Remove query strings from static resources : Involves removing query strings (or version/version-specific parameters). It does not increase site speed but can help improve performance scores. Personal choice: no tick.
Google Fonts : If your theme uses Google Fonts, this option helps you to remove Google Fonts (Remove Google Fonts). Combine and link in the head, which means that Google Fonts will be merged and then forced to put on the head tag. Combining and loading fonts asynchronously with webfont.js means merging files and loading asynchronously with webfont.js. Leave it as is, in other words if the site has Google Fonts it will download. Personal choice: ticked.
Preconnect to 3rd party domains (advanced users): This option involves pre-connecting to a third-party domain. It performs DNS lookups and secure connections in parallel between many third-party resources, thus reducing latency. You can learn more similar mechanisms like prefetch and preload.
Async Javascript-files (advanced users) : This option handles loading of JS files asynchronously. If you have any files that need to be downloaded asynchronously, please include them here, including local and third-party.
Optimize YouTube videos : This requires you to install additional plugins. It helps YouTube videos to delay loading thereby increasing page load speed. However, only suitable if your Video is not at the top of the page (recommended only if it is in the middle or bottom of the page). Read more about another way to delay video downloads here. You can refer to how to use the WP YouTube Lyte plugin here.

Further optimization / no final limit

This is the area where the author of Autoptimize "makes money" by providing "affiliate" products that further optimize the site, these include:

Autoptimize Pro Support: Autoptimize's premium support package to speed up your website. Prices start at 99 euros.
WP Rocket This is a paid plugin to create caching that helps speed up the website, which is highly appreciated by many people. Personal blogs may find it expensive, I recommend if you want to save money, replace it with WP Super Cache plugin or Cache Enabler. Combining it with Autoptimize works fine.
ShortPixel is a plugin that helps compress images.
Criticalcss.com is a premium solution for above-the-fold CSS (aka Critical CSS– to avoid rendering-blocking CSS).
Siteground is a hosting solution optimized for WordPress. I suggest adding Closte, Linode, UpCloud, DigitalOcean, Vultr and KnownHost.
Astra is a performance-optimized theme solution. I really like this accelerator theme, its free version also has a lot of users. In general, however, GeneratePress has the upper hand over Astra.
Ultimately KeyCDN is a solution that uses a CDN to improve page load speeds through a globally distributed server. However, currently KeyCDN (2020) does not have a server in Vietnam, so we can replace it with CDNSun, the price is similar, and there are 2 PoPs in Hanoi and Saigon (see the CDNSun manual in this). Besides, you can use Cloudflare if you want to speed up the web with a host located outside of Vietnam, this is an affordable solution, good quality and especially the setup is much simpler than other websites. other services. traditional CDN services. Actually, I have used CloudFlare paid version (20USD/month plan) and quite satisfied (See Cloudflare user guide here), but it's fair to say if you are skilled enough to optimize CDN according Traditional style would be better. PS: Although Cloudflare has PoP in Vietnam, in fact users still cannot download resources from here, you can refer to this article for more details.

Conclusion

Autoptimze is a very good tool to help you improve page loading speed. Its options are very in-depth. And if you are skillful in customizing, the results will be impressive.

Autoptimize is also a great kBlood plugin for free caching plugins, such as Cache Enabler. You won't have to spend extra money to use paid static page builder plugins.

Now for the final test. Auto-triggering results in how quickly the page loads. I will use A/B testing, one side is not using Autoptimize, the other is using in equivalent condition (same server, same interface, same content etc, same environment i.e same same condition. environment)).

I will use GTmetrix tool to test website speed. In the video below, the left pane is the web without Autoptimize installed. The right pane has Autoptimize installed. Speed test was performed 5 times in a row, the results showed that in all cases the website with Autoptimize installed won all 3 factors: page loading speed, page size and number of connections. The lower these stats, the better