The Ideal Perfmatters Settings, And How To Set It Up With Popular Cache Plugins (FlyingPress, WP Rocket, LiteSpeed Cache)

Perfmatters settings

In this guide, we’re configuring the Perfmatters settings with popular cache plugins.

This table shows how Perfmatters has many features not found in cache plugins to further improve performance: most general settings, script manager, lazy load background images, preload above the fold images while excluding them from lazy load, preload CSS/JS files, local fonts, and the remove unused CSS feature is also faster than WP Rocket’s. Perfmatters is even more powerful when using SiteGround Optimizer since it can’t delay JavaScript, preload links, lazy load iframes, and lacks many features where Perfmatters pretty much becomes mandatory.

The key is to only use 1 plugin per feature, then leave it disabled in your other optimization plugin. The other goal is to use Perfmatters for the “extra optimizations” which I listed above.

Perfmatters also has great documentation, an updated changelog, and feature requests so you know what’s coming. I’ll try to condense everything, but leave a comment if you have questions.

Always clear cache when retesting your site, and check the Network/Console report in Chrome Dev Tools so you can more accurately measure performance (compared to PSI).

Disclaimer – I use affiliate links to Perfmatters and appreciate your support. Thanks :)

 

1. General

  • Disable Emojis: ON – removes a JS file needed for emojis (use Unicode instead). Some cache plugins disable emojis by default (FlyingPress, WP Rocket) in which case, leave off.
  • Disable Dashicons: ON – prevents admin icons from loading on the frontend. If it breaks your site, leave it off and use the script manager to disable them where they’re not used.
  • Disable Embeds: ON – when you paste a URL into your WordPress editor, this loads a pretty preview (from YouTube, Facebook, Tweets, etc). If you don’t need this, disable it.
  • Disable XML-RPC: ON – bad for speed + security (used to publish content from mobile).
  • Remove jQuery Migrate: ON – if you’re using a page builder, leave off. Perfmatters also has documentation on dealing with jQuery using the script manager, defer, delay, and preload settings. You could also use code snippets to only load jQuery on specific pages.
  • Hide WP Version: ON – improves security by hiding WP version from showing publicly.
  • Remove wlwmanifest Link: ON – you likely don’t use Windows Live Writer, so disable.
  • Remove RSD Link: ON – used to edit your site in a browser instead of blog clients.
  • Remove Shortlink: ON – disable if you’re using the “post name” permalink structure.
  • Disable RSS Feeds: OFF – only enable this if you don’t have a blog on your website.
  • Remove RSS Feed Links: ON – removes unnecessary links in your RSS feed to pages, posts, comments, categories, tags, etc. This removes a small amount of unused code.
  • Disable Self Pingbacks:- ON – disables pingbacks when linking to your own blog.
  • Disable REST API: disable when logged-out – hides usernames to improve security, but disabling it can lead to errors with plugins, so disable when logged out or for non-admins.
  • Remove REST API Links: ON – removes a short line of code created by the REST API.
  • Disable Google Maps: OFF – some themes & plugins have the Google Maps API built-in with no option to disable this, in which case you can disable Maps if you don’t use them.
  • Disable Password Strength Meter: ON – removes a file that can sometimes load on your website when it should usually only load on account, checkout, and password reset pages.
  • Disable Comments: OFF – you probably don’t want to disable your blog comments.
  • Remove Comment URLs: ON – disables comment author links which are often spam.
  • Add Blank Favicon: OFF – only used for speed testing purposes on fresh WP installs.
  • Remove Global Styles: ON – removes 311 lines  of unminified code which seemed to be added by mistake to WordPress core. It was originally added to improve duotone styles.
  • Heartbeat: only allow when editing posts/pagesrecommended by Perfmatters. This disables Heartbeat unless you’re editing content, then set the Heartbeat Frequency to 60s. This reduces Heartbeat and reduces requests/CPU usage by only enabling it when needed.
  • Limit Post Revisions: 5 – gives you a few backups of old posts in case you need to restore a post to an earlier version, but prevents too many revisions from bloating your database.
  • Autosave Interval: 5 minutes – increase frequency to reduce CPU and save resources.
  • Change Login URL: add a custom login URL – blocks unwanted requests from bots & attackers by moving wp-login. If using QUIC, keep the default URL since it has features to protect it. You can also change the redirect/message when the default login URL is viewed.

 

2. Assets

JavaScript

  • Script Manager: ON – remove unused CSS/JS on specific pages/posts (see below).
  • Defer JavaScript: ON – fixes render-blocking JS (but also done by most cache plugins). If you see warnings in the Dev Tools Console report after enabling this, delaying JS can fix it.
  • Delay JavaScript: ON – useful if your cache plugin doesn’t support this (i.e. SiteGround Optimizer). Often used to delay third-party code, plugins, cart fragments, local analytics, instant page, and other JS files. Greatly improves scores, but needs to be setup properly.
  • Delay Behavior: delay all scripts – fastest option but requires testing your website for broken plugins/files and excluding files. Only delay specified scripts is safer but requires manually adding JS files to delay (see list below, and you can also delay instant page with instantpage.js). Delay all is the only setting that can delay jQuery (unlike specified scripts).
  • Excluded from delay: when using the “delay all” setting above, check your site for broken elements like sliders and contact forms. If you see something is broken, open your Chrome Dev Tools Network report and find the problematic file. Copy the folder name (i.e. /smart-slider-3/) and exclude it from being delayed. You may also need to exclude jquery.min.js. Perfmatters has documentation on common JS exclusions and Brian’s video is helpful too. When you’re done, also check your Chrome Dev Tools Console report for JS-related errors.
  • Delayed Scripts: if you’re using “only delay specified scripts,” you’ll need to add JS files manually. Check your “third-party code” and “remove unused JavaScript” reports in PSI. Besides third-party code and even Gravatars, you can also delay smaller analytics script types (i.e. analytics.js), comment plugins, and likely others. Their documentation also explains how to delay inline JavaScript and why you can use defer/delay at the same time.
  • Delay Timeout: 10s – recommended by Brian. When the timeout is too short, it may not improve scores. This makes it so if users don’t interact with JS for 10s, it loads everything.

Check the examples in the documentation, but here are common JS files to delay:

ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
fbevents.js
fbq(
/busting/facebook-tracking/

Using The Script Manager

Once the script manager is enabled, view any page/post and you’ll see it on top.

Perfmatters script manager tab

In your script manager settings, I recommend enabling display dependencies, then test mode which only shows the script manager changes to logged-in admins (since disabling CSS/JS can sometimes break your site). Whenever you’re ready to publish changes, toggle testing mode off.

Perfmatters script manager settings

View the scripts/styles loading on the post (they should be categorized by plugins). You can disable them everywhere, on the current URL, use regex (URL patterns), and make exceptions.

Disable plugins perfmatters

Disable elementor plugins perfmatters

Jquery plugin dependencies 1
Display dependencies shows you all plugins that rely on jQuery (which can slow down your site)

Examples

  • Disable social sharing buttons everywhere but posts.
  • Disable wp-block-library if you’re not using Gutenberg.
  • Disable contact form plugin everywhere but contact page.
  • Disable slider/gallery plugins everywhere but certain URLs.
  • Disable page builder/WooCommerce plugins where they’re not used.

CSS

  • Remove Unused CSS: ON – unless you’re using FlyingPress or LiteSpeed Cache, this should be on. Even if you’re using WP Rocket, Perfmatters does a better job because it loads used CSS in a separate file (faster for visitors, worse for scores) while WP Rocket loads it inline (slower for visitors, better for scores). In this case, enable remove unused CSS in Perfmatters, then disable all CSS optimizations in your cache plugin (I confirmed with Brian). They also suggest disabling CSS preloads and to uncombine CSS beforehand. FlyingPress/LSC already use “separate file” so there would be no need to use Perfmatters for this. And if you’re using a page builder, make sure CSS print method is set to “external.”
  • Used CSS Method: File – “file” is faster for real visitors while “inline” is better for scores.
  • Stylesheet Behavior: Remove – fastest option, but just like delaying all JavaScript, you need to test your site for broken elements and exclude files by stylesheet or CSS selector. This can be time consuming for large/complex sites so if it’s too difficult, use the delay option which gives you a better LCP/FCP than async. Learn about the 3 different options.
  • Clear Unused CSS: use this if you make design or code changes and aren’t seeing them.
Wp rocket used css
Vikas explains why “remove unused CSS” is faster in Perfmatters/FlyingPress compared to WP Rocket

 

3. Preloading

Perfmatters preloads above the fold images and CSS/JS files (like wp-block-library) while most cache plugins can’t or make this difficult. There’s usually no need to add preconnect/prefetch hints because CDN URLs and third-party fonts are often the only domains that should use preconnect, which most cache plugins will add automatically. And since most third-party code is delayed, there’s usually no need to use DNS prefetch. When you’re done, check your Chrome Dev Tools Console report for preloading errors.

  • Enable Instant Page: On (sometimes) – when users hover over a link or touch it on mobile, this starts downloading the page in the background so by the time they click it, the page appears to load instantly. It improves perceived load time, but not scores. It can also increase CPU usage especially if users hover over lots of links, like a WooCommerce store with tons of product links. So depending on how often you think users hover over links and whether your server can handle it, you can choose whether it should be on/off.
  • Preload: mainly used to preload CSS/JS like Gutenberg’s wp-block-library (screenshot below) or other files. Above the fold images are preloaded in the next setting, and most cache plugins preload fonts (including font icons like Elementor’s eicons or font awesome icons). If you use Perfmatters to preload fonts, make sure you use the crossorigin attribute.
  • Preload Critical Images: 2-3 – preloads above the fold images while excluding them from lazy load for better LCP. Set the number of images that usually load above the fold (usually 2-3). This is easier than plugins like WP Rocket which require extra steps to optimize above the fold images. If you don’t use Perfmatters for lazy loading, you can still use this feature.
  • Preconnect – CDN URLs and third-party fonts (i.e. font.gstatic.com) are usually the only URLs you should preconnect. Your cache plugin may already do this, so check their docs.
  • DNS Prefetch – open your third-party code report. Most of these should be hosted locally or delayed. For third-party domains that are left over, consider prefetching to the domain.
Perfmatters preload wp block library 1
If you’re using Gutenberg, try preloading wp-block-library
Disable wp block library perfmatters
If you’re not using Gutenberg, try disabling wp-block-library in the script manager
Third party code
Third-party domains should usually be hosted locally or delayed (if not, look into preconnect/prefetch hints)

 

4. Lazy Loading

Perfmatters usually has more advanced lazy load settings than cache plugins with the option to lazy load background images using their perfmatters-lazy-css-bg helper class.

  • Images: ON – Permatters uses JS-based lazy load while most cache plugins use native. There are arguments for both so I suggest testing both. If enabled in Perfmatters, native lazy loading in WordPress will be disabled. Exclude leading images shouldn’t be needed because “preload critical images” already excludes above the fold images from lazy load.
  • iFrames And Videos: ON – lazy loads iframes and replaces iframes with a preview image so the “fat YouTube player” is only loaded when clicked. I have this enabled in FlyingPress which also hosts the placeholders locally to prevent third-party requests from ytimg.com.
  • Exclude From Lazy Loading – exclude images by URL (abc.png) or class (class=”name”). You can also add no-lazy to CSS classes. Perfmatters gives the example of excluding the GeneratePress logo (is-logo-image) or featured images (class=”attachment-full size-full).
  • Threshold: 0px  – increasing this results in a smoother scrolling experience since images start loading before they’re shown in the viewport, but 0px is the most aggressive option.
  • DOM Monitoring – OFF (only enable if you use infinite scrolling). Perfmatters says this “watches for changes in the DOM and dynamically lazy loads newly added elements. This improves compatibility for third-party plugins and themes that utilize infinite scrolling…”
  • Add Missing Images Dimensions: OFF – most cache plugins do this, turn on otherwise. This adds a width + height to images without dimensions to prevent layout shifts (CLS).
  • Fade In: ON – adds a fade in effect for lazy loaded images so they don’t jump in suddenly.
  • CSS Background Images: ON – page builders load background images from CSS, so they’re not lazy loaded by default. GeneratePress has a setting to move them to inline HTML (so they will be lazy loaded) while Elementor recently added an Experiment to lazy load background images. Otherwise, you can use Perfmatters to add perfmatters-lazy-css-bg to the background image CSS class (screenshot below). Or if background images have unique class names, you can add their ID or class in the Background Selectors field.

Perfmatters lazy css bg

 

5. Fonts

Check your Waterfall chart to see if fonts are hosted locally or use third-party domains like fonts.gstatic.com. Self-hosting fonts also allows them to be preloaded. Perfmatters helps with some optimizations, but you also want to use woff2 and reduce # of requests.

  • Disable Google Fonts: OFF – only use if you’re in the process of using system fonts or custom fonts and need them disabled. Otherwise, it removes Google Fonts from the site.
  • Display Swap: ON – adds font-display: swap to the font CSS which can fix “ensure text remain visible during webfont load” in PSI. While it fixes FOIT (flash of invisible text) by setting a fallback font, it can also cause FOUC (flash of unstyled text) which can look ugly.
  • Local Google Fonts: ON – downloads fonts.google.com fonts and hosts them locally.
  • CDN URL: if you’re using a CDN that uses a CDN URL, add it here to serve fonts from it.
Third party fonts vs self hosted fonts
Fonts should be hosted locally, preloaded, and use woff2 with font-display: swap

 

6. CDN

This section is only for CDNs that use a CDN URL (i.e. BunnyCDN), not for Cloudflare.

  • Enable CDN Rewrite: ON – if you’re using a CDN URL, this rewrites assets to be served from the CDN (i.e. https://cdn.yourwebsite.com/wp-content/uploads/2022/02/logo.png). Sometimes adding your CDN URL to multiple plugins can serve more assets from the CDN.
  • CDN URL: add your CDN URL – if you’re using FlyingPress, I suggest trying FlyingCDN. If you’re using Rocket.net for hosting, you do not need to do anything with their CDN URL.
  • Included Directories: generally nothing to do here  (Perfmatters automatically includes wp-content and wp-includes in the CDN rewriting, which should be all most sites need).
  • CDN Exclusions: .php,.xml is recommended when using SEO plugins with XML sitemaps.

 

7. Analytics

If you’re planning on delaying Google Analytics, there’s no need to optimize your tracking code by hosting it locally, using a smaller script, disabling display features, etc.

  • Enable Local Analytics: ON – host locally to prevent third-party GA requests.
  • Tracking ID: enter your Google Analytics tracking ID so it can be hosted locally.
  • Tracking Code Position: Header (Default) is what’s recommended by Google, but Perfmatters says they always load it in the footer. This shouldn’t make any difference.
  • Script Type: analytics.js or minimal – these have smaller file sizes compared to other types, but disables some data in Google Analytics. Read the Perfmatters documentation and decide whether you want to disable the data in return for a small performance boost.
  • Disable Display Features: ON – if you notice a third-party request to DoubleClick in PSI, this can prevent it by disabling remarketing and advertising options in Google Analytics.
  • Anonymize IP: ON – shortens IP address to comply with GDPR in some countries.
  • Track Logged In Admins: OFF – you don’t want admin visits in your analytics data.
  • Adjusted Bounce Rate: 30  – if visitors stay for longer than 30 seconds, they won’t be considered a bounce. This is recommended by Perfmatters and is on a scale from 1-100.
  • Use MonsterInsights: OFF – only enable if using MonsterInsights to host GA locally.
  • Enable AMP Support: OFF – only enable if you’re using AMP, which I don’t recommend.

 

8. Database

I recommend WP-Optimize to clean your database since unlike Perfmatters and cache plugins, it can take database backups via UpdraftPlus, remove tables left behind by old plugins, and keep a certain number of post revisions (as opposed to deleting them all).

Otherwise, I would remove everything but post revisions + post auto-drafts since you want to keep (at least a few) backups of posts. Sometimes I get automatic Windows updates that close everything down. Thankfully, the auto-drafts have saved me from losing work quite a few times. Check everything else and schedule weekly cleanups. This should be enough for most websites.

 

9. Advanced Options

Perfmatters has a few advanced options under Tools → Show Advanced Options.

Perfmatters advanced options

  • Disable Click Delay: ON – if you use Perfmatters to delay JavaScript, there may be a long click delay when clicking things like a mobile menu. Disabling click delay can speed it up.
  • Enable FastClick: ON – if you use Perfmatters to delay JavaScript and have to click links twice to open them, this should fix it. If using “delay all” you’ll need to exclude “fastclick”.
  • Load Local Google Fonts Asynchronously: ON – fixes render-blocking font issues, but remember to also preload fonts. Between these two, they can improve both LCP and CLS.
  • Unused CSS CDN URL: if you use a CDN URL with a custom domain (cdn.mywebsite.com) with the CDN rewrite setting, there’s no need to add it. But if you use a different rewrite method, add the CDN URL to prevent issues with the load order when compiling used CSS.

 

10. Configure Perfmatters With FlyingPress

Duplicate Features

  • Disable emojis
  • Defer JavaScript
  • Delay JavaScript
  • Remove unused CSS (both load used CSS in a separate file)
  • Instant page (preload links)
  • Lazy load images, iframes, videos
  • Preload critical images
  • CSS background images (FlyingPress has a lazy-bg helper class)
  • Add missing image dimensions
  • Font-display: swap
  • Preconnect CDN URL (when using FlyingCDN)
  • Local Google Fonts
  • Database optimization

New Perfmatters Features

  • General settings (except disable emojis)
  • Script manager
  • Preload CSS, JS, other files
  • Preconnect third-party fonts
  • DNS prefetch
  • Local analytics

 

11. Configure Perfmatters With WP Rocket

Duplicate Features

  • Disable emojis
  • Heartbeat control
  • Defer JavaScript
  • Delay JavaScript
  • Remove unused CSS (WP Rocket loads used CSS inline)
  • Instant page (preload links)
  • Preconnect (WP Rocket automatically preconnects CDN URLs + third-party fonts).
  • DNS prefetch
  • Lazy load images, iframes, videos
  • Add missing image dimensions
  • Font-display: swap
  • Database optimization

New Perfmatters Features

  • General settings (except disable emojis, Heartbeat)
  • Script manager
  • Preload CSS, JS, other files
  • Preload critical images
  • CSS background images (WP Rocket makes you move them to inline HTML)
  • Local Google Fonts
  • Local analytics

 

12. Configure Perfmatters With LiteSpeed Cache

Duplicate Features

  • Disable emojis
  • Defer JavaScript
  • Delay JavaScript
  • Remove unused CSS (both load used CSS in a separate file)
  • Instant page (preload links)
  • Preconnect Google Fonts (when “Load Google Fonts Asynchronously” is on in LSC)
  • DNS prefetch
  • Lazy load images, iframes, videos
  • Exclude above the fold images from lazy load (LSC’s viewport images)
  • Add missing image dimensions
  • Font-display: swap
  • Local Google Fonts + analytics (LSC can localize third-party resources)
  • Database optimization

New Perfmatters Features

  • General settings (except disable emojis, Heartbeat, remove Google Fonts)
  • Script manager
  • Preload critical images
  • Preload CSS, JS, other files
  • CSS background images

 

13. Brian’s Video Tutorial (Long But Detailed)

I watched this a couple times to make sure this guide aligns with Brian’s recommendations. He uses Perfmatters to optimize a GeneratePress site (1st part of the video) then an Elementor site (2nd part). I found it specifically helpful for excluding files, digging through Waterfall charts, etc.

Key Moments:

  • Remove unused CSS: 16:02
  • Preloading fonts: 31:58
  • CSS background images: 45:02
  • Excluding files when using delay all JavaScript: 59:13
  • Lazy load background images in Elementor: 1:29:03
  • Excluding selector from remove unused CSS: 1:46:12

Cheers,
Tom

You Might Also Like: