Much of the code uses!important; tags, which is also not ideal.
Perfmatters believes this may be a bug, so they are adding this option as an easy way to remove all this unnecessary code while it is being resolved.
Hearbeat, reviews and autosave
The WordPress Heartbeat API uses /wp-admin/admin-ajax.php to execute AJAX calls from the web browser
This is great because it saves your drafts and prevents an unexpected shutdown from causing you to lose them, but it can also cause high CPU usage and crazy amounts of PHP calls. For example, if you leave your control panel open, it will keep sending POST requests to this file at a regular interval, every 15 seconds. You can increase the frequency up to 60 seconds to mitigate this.
In the first option you can choose when and where it is triggered.
The third option allows you to limit the number of revisions of your entries to save space, for example if you set it to 10 only the last 10 will be saved and the previous ones will be deleted.
Finally, you can set the auto-save interval for drafts. By default, WordPress automatically saves them every 60 seconds. However, if you increase the interval you will have to manually save more frequently, this prevents the browser from crashing so much while you are in the administration area and also saves less writes to the database.
Woocommerce
About the optimization options for WooCommerce I will only say that they exist, but I will avoid any comment as it is customary in this house not to review anything that I do not have very clear, as is the case. I uninstalled WooCommerce in July 2021 and I hardly remember anything about the response to these optimizations so I refer you to their documentation:
- Disable WooCommerce scripts and styles
- Disable cart snippets
- Disable the WooCommerce status box
- Disable WooCommerce widgets
Login URL
Another interesting feature is the ability to change the default login URL to the admin area that WordPress sets in yourdomain/wp-admin. It does exactly the same as pugins like WPS Hide Login.
You will find three fields:
In the first one you can change the wp-admin login url to whatever you want, such as "yourdomain.com/potato", thus avoiding brute force attacks and others, which usually target the default url. Just write it down and/or try not to make it a weird url with too many characters so you don't forget it (although you can always retrieve it by going to the wp_options / perfmatters_options table)
The second field (Disabled Behavior) sets which url the visitor landing on yourdomain/wp-admin will be sent to with three possibilities:
- Message (default): Displays a message to the visitor. You can customize the message with any text you want by adding it in the field Message.
- 404 Template: The user will be sent to a 404 page.
- Home URL: The user is redirected to the home page.
Assets
This is where it gets really interesting.
Script Manager, the icing on the cake
The Perfmatters Script Manager is without a doubt their most powerful and useful tool. This alone is worth every penny of the little you pay for the plugin and its support.
It allows you to disable the scripts and CSS used by each plugin and prevent them from loading on a post or page, in both places or site-wide, filter by logged in or logged out users, by devices and add exceptions, even for categories and tags
This can drastically increase loading speed (especially of the homepage) by eliminating unnecessary requests where plugins are not used, such as forms or anything else.
Mandatory Usage Mode (MU) takes Script Manager much further. It gives much more control and provides the ability to disable WordPress plugin queries and hooks, as well as inline CSS and JS. Now you can control all aspects of a plugin, from its front-end scripts, inline code and MySQL queries wherever you want.
In its global view you will find all applied settings in case one day you need to rearrange them, modify them, add new ones or remove some.
It has a quite complete documentation. If you are not used to this kind of tools it can be intimidating at first, but as soon as you try it you will discover that it is very easy to use.
JavaScript
Defer and delay JavaScript.
Both of these can help to improve FCP and LCP
Adding the defer attribute to every non-critical JavaScript file speeds up the first content painting (FCP) of the page. This means that the JavaScript is downloaded during HTML parsing and executed after the page has finished loading (when parsing has finished). In other words, the javascript download is pushed to the bottom of the page so that it is done at the end of the process.
With delay , the LCP and TBT results are improved. The JavaScript is delayed according to the user interaction, speeding up the first painting of the page when something is not needed immediately, such as heavy scripts from third parties like Google Adsense, Google Analytics, Facebook conversion pixels or Google Ads and similar.
For both options you can add exceptions and enable Delay Timeout behaviour, this sets a timeout that will automatically load scripts after 10 seconds if no user interaction has been detected. This is optional and is disabled by default.
Delay Timeout
If you enable this option you have the possibility to set the delay timeout to a different value using one of these filters.
The one in the example sets it to 7 seconds.
add_filter('perfmatters_delay_js_timeout', function($timeout) {
return '7';
});They advise not to set the timeout value too short, otherwise the JS delay function will not work correctly. Also, regardless of the timeout, 99% of the time everything will fire on the first user interaction whether it's scroll, click or first mouse movement.
CSS
Perfmatters says the easiest way to resolve the "Reduce unused CSS" warning is to enable this feature, which I reviewed when it was still in beta, that does it all automatically. The developers claim to have tested it on hundreds of URLs (using different templates and settings) and these are some of the results they claim to have obtained:
- Average FCP decrease of 15.20%.
- Average LCP decrease of 19.66%.
- Average TTI decrease of 14.95%.
Before activating the "Remove unused CSS" feature in Perfmatters they recommend removing any existing CSS preloads that have been configured in Perfmatters (excluding Google Fonts local stylesheets).
Do not merge CSS (things that are often done with WP Rocket, Litespeed, Autoptimize and others). CSS merge is an obsolete optimisation technique since HTTP/2. In some cases, combining CSS can hurt performance (in my case it hasn't) and lastly make sure you're not trying to remove unused CSS with another plugin.
There are three methods of removal:
- Delay (default): All original CSS stylesheets (unused CSS) are delayed and loaded on user interaction. This is the recommended option.
- Asynchronous: All original CSS stylesheets (unused CSS) are loaded via async. This method can help to avoid pop-in, as the stylesheets are executed asynchronously while the page loads. This method will result in a slightly higher LCP/FCP than the delay behaviour.
- Remove: All original CSS stylesheets (unused CSS) are removed. This is the most aggressive method but will also probably require exceptions to be added. It is recommended for advanced users only.
There is no secret here other than to experiment in a test environment and measure the results, both in isolation and in interaction with the other functions.
Code
A useful classic that many other plugins include, something that can even be done by hand, but which simplifies and facilitates the operation of adding custom code to the header, body or footer of your blog
The following fields print code directly to the front-end, so it must be valid HTML. This includes inline CSS inside
It does not support server-side languages such as PHP. To add custom PHP code it is recommended to use the Code Snippets plugin.
Preloading
In Preloading, the first option called"Instant Page" uses the instant.page library and loads a small JS file of less than 2 KB(instantpage.js) locally on your site and is used to preload URLs when a user hovers over a link, or image in the desktop version. On mobile, a URL is preloaded after the user starts tapping the link on their screen and before they release it.
After 65 milliseconds, preloading of the URL starts automatically in the background.
This tool is the equivalent of Litespeed's"Instant Click" and WP Rocket's"Preload Links", so if you use this option in either of these two plugins you should deactivate it to try Perfmatters.
In my case it has worked a little better than the equivalent option in Litespeed although it should be noted that in some cases it can increase the server load.
As with the Javascript and CSS options, the use of preloading and preconnection should be used according to your needs based on different tests.
Preloading critical images (those above the fold), is an option still in Beta that can help to reduce the time taken to paint larger content (LCP) in Core Web Vitals.
These are typically images such as a logo, a featured image in a post, a main image on a landing page, etc. When you preload them, they move to the top of the waterfall and essentially tell the browser that they have priority and should be loaded immediately.
You can choose between zero, to preload none (the default option), and five images. Permatters recommends choosing two or three at most as Chrome has a limit of two preloaded images that will appear at the top of the waterfall.
Lazy loading
Another performance-related classic that WordPress has included natively since its 5.4 release in 2020.
In my case I use the Litespeed option because in the tests I found slightly better results, even so, the Perfmatters one works really well and also applies it to the CSS of the background images
Fonts
Another good thing. This option, added to version 1.7.4 of Perfmatterswas released on 7 June 2022. It allows you to host and load Google Fonts locally with a couple of clicks.
The advantages of hosting fonts locally are many, you gain full control over them, you eliminate all those requests and therefore the loading time and you can decide how to serve them.
The function automatically locates any Google Fonts reference that exists on your blog, downloads the corresponding fonts from fonts.google.com and hosts them locally on your server in the directory: /wp-content/cache/perfmatters/your-domain.com/fonts/
This post explains its use in more detail.
CDN
There is nothing special here and there is little to comment. A tool, always useful to add the CDN you use. As I use QUIC.CLOUD, I haven't needed it yet.
Analitycs
Although I don't use it now as I started the transition to Matomo and I relegated the management of the Analytics script to my RGPD/CCPA cookie consent management plugin , which also manages it correctly, but I know it works very well with Perfmatters because I used it back in the day.
From here you can host the Google Analytics script locally. This helps speed up your site by reducing additional DNS lookups and solving the "exploiting browser cache" problem of their script.
According to Perfmatters, ironically, Google's own script throws up a warning about caching, but this is because they have a very short HTTP cache header expiry. If you host it yourself, the HTTP cache headers from your own CDN or server will be automatically applied. In other words, you gain full control over the script's caching.
They also note that this tool is not officially supported by Google, but has been used for years without any problems.
Hosting Google Analytics locally and serving the script from your own CDN or server also allows you to take advantage of a single HTTP/2 connection.
