Optimize WordPress Speed Easily Using Optimize More Plugin

A ‘Do It Yourself’ WordPress Page Speed Optimization Pack.

Control your CSS & JS Delivery: Load CSS Asynchronously, Delay CSS & JS until User Interaction, Remove Unused CSS & JS Files, Preload Critical CSS & JS, Defer JavaScripts, and more.

Optimizing web pages is really just about controlling how assets are delivered. This plugin gives you the ability to choose different assets to delay / preload / async load / remove on these post/page types: Homepages, Page Except Homepage, and Single Post (and Shop page, Product Category page, and Single Product pages if you use WooCommerce).

Optimize the delivery of each CSS & JS per each post types. You can choose each CSS & JS individually and what type of execution is required.

What this plugin can do:

• Load CSS Asynchronously
• Delay CSS and JS until User Interaction
• Preload Critical CSS, JS, and Font Files
• Remove Unused CSS and JS Files

Not as complete as the full version that I use to optimize clients’ site, but still, it’s powerful enough to optimize any site.

This plugin use HTML Dom Parser to manipulate the page’s HTML, so you can simply use the keyword of the assets to target them. No need to bother looking for the right CSS and JS handlers enqueued by your plugins and theme. Simply put the keyword of the assets to the list, the plugin will process everything for you.

Load CSS Asynchronously

In this section, you can individually choose which CSS files that you want to load asynchronously. Useful to eliminate the ‘eliminate render-blocking resources’ from CSS that are not use in the above the fold area. Usually I use this for CSS files that are used in the first section after the above the fold area, and put the rest of the non critical CSS files on the delay CSS field.

As you can see on the screenshot above, there are 6 fields that the plugin provides (if you are not using WooCommerce on your site, it will only 3 fields available). So you can choose differently, which CSS files that you want to put on the list for each pages or page-types.

Delay CSS and JS until User Interaction

For those who already familiar with Flying Scripts, you should not have any problems to understand how this works. The delay JS feature of this plugin are basically the same. Even the codes inside this plugin are very much the same. The only different is, you can choose different script to delay for each pages or page-types with this plugin.

We can delay CSS files too. This feature can be handy for you. Mostly, page has lots of non-critical CSS files that we don’t need to load them initially. You can put those CSS files on the delay CSS list. For example, you have a contact form that you don’t put on the above the fold area, just delay them. Have an instagram feeds that you put way below the fold, delay them.

Preload Critical CSS, JS, and Font Files

As the name implies, we can preload critical assets in this section. Use this to preload any critical CSS, JS, or even font files.

For example, your page use jQuery for some of the feature, most of the time, we can’t delay jQuery in order to keep the feature works, so our best option is to preload it. Preloading assets make the browser download them immediately, right after it finish rendering the HTML.

For preloading fonts, we can’t use keywords. We need to put the url of the font like https://fonts.gstatic.com/s/barlow/v12/7cHqv4kjgoGqM7E3p-ks6Vostz0rdom9.woff2 to the list.

Remove Unused CSS and JS Files

We can also use this plugin to remove unused CSS and JS files. For example, you use a page builder to built your pages, you can remove the native Gutenberg block library CSS by putting it into the list.

Some plugins also load their assets site wide, even though we only using it in some pages or even in one page only. You can remove them easily using this feature.

The Extra Tab

In the Extra Tab, you can find a field to input custom pages ID. By default, the ‘Custom Pages’ fields are targeting every pages except Homepage. You can put specific page ID in the extra tab if you want it to target specific pages only.

You can also find Remove / Disable Common Unused section in this tab. This applied site wide, globally.

The Keyword

So what keyword that we can put on the list to target the assets? It’s basically everything from the CSS/JS request lines.

You can put the CSS/JS IDs, or as I already mentioned in the plugin’s readme file, you can put some /plugin-folder-name/ if you want to target all assets (CSS/JS) from that plugin. Choose to put the specific CSS/JS ID or a specific asset file name (eg: style.min.css) if you only want to target that specific file only.

Conclusion

Optimizing web pages is really just about controlling how assets are delivered. This plugin gives you the ability to choose different assets to delay, preload, async load, and remove on each pages or page-types. You can optimize your site Core Web Vitals using this plugin.