My Limited Perfmatters Settings for WordPress Websites Using LiteSpeed Cache

The limited Perfmatters settings Tyler Jurelle recommends help his website achieve near-perfect scores on Google Lighthouse PageSpeed Insights.

After spending time building your WordPress website, you find it loads slowly. Despite investing in an optimization plugin, it still doesn’t speed up your website as well as expected. So, what do you do?

Many experts advise against installing more than one optimization plugin because similar functions can conflict and potentially ruin your website. Thankfully, Perfmatters is an affordable plugin that works alongside other caching plugins and helps your website reach its full performance potential.

In this article, I will share my limited Perfmatters settings to help my website reach its full performance potential. I already use LiteSpeed Cache to speed up my website. However, LSCache alone cannot help my website reach its true performance potential because it has many third-party elements. If you have a website with similar circumstances, my guide below can help.

Disclaimer: This post contains affiliate links. It means I will earn a small commission if you buy the services mentioned in this post at no additional cost. Please read my full Disclaimers for more information about my partnerships.

Before You Begin my Guide…

It is essential to understand four things:

  1. These settings show limited use of Perfmatters because…
  2. I have a specific backend set up for my website, which primarily uses a different site optimization plugin: LiteSpeed Cache and its compatible QUIC.cloud CDN.
  3. My hosting provider, ChemiCloud, uses LiteSpeed Web Servers, which includes full compatibility with LiteSpeed Cache and QUIC.cloud CDN.
  4. Visually, my website is built with Kadence, which plays a base role in its performance, regardless of the optimization plugin I use.

These backend aspects of my website play a role in the Perfmatters settings I outline in this guide. Therefore, keep this in mind before potentially implementing them for your website. Not having a similar setup of Kadence with the LiteSpeed Cache plugin and QUIC.cloud CDN could mess up your website. Keep reading so I can briefly explain why I set up my website this way to ultimately suggest my Perfmatters settings.

Read More:
Subscribe for Updates

You will receive email notifications on new posts and all other updates.

About Perfmatters

Perfmatters is a performance optimization plugin for WordPress designed to improve website speed and overall performance. It targets various aspects of site optimization, focusing on areas that other caching plugins may overlook. Some key features of Perfmatters include:

  1. Script Management: Perfmatters allows you to turn off unused scripts and styles on a per-page basis.
  2. Lazy Loading: This feature delays the loading of images and iframes until they are visible in the user’s viewport.
  3. Database Optimization: The plugin offers tools to clean up your database by removing unused data, such as post revisions, spam comments, and transients.
  4. Preloading & Prefetching: Perfmatters includes options for DNS prefetching, preloading resources, and proxying static files from external domains, which can further improve speed.
  5. Disable Unused Features: The plugin allows you to turn off various WordPress features that may not be necessary for your site, such as emojis or embeds. This will make your site lighter and faster to load.

Overall, Perfmatters is geared towards users looking to fine-tune their site’s performance beyond standard caching solutions, making it particularly useful for improving loading speeds and user experience.

Pricing

Compared to other optimizing plugins, Perfmatters is very affordable.

  • A one website – Personal plan costs $24.95 per year
  • A three website – Business plan costs $54.95 per year
  • $124.95 per year for an unlimited number of websites

ChemiCloud Hosting before my Perfmatters Settings

One of the best decisions I made since starting my website in 2019 is switching to ChemiCloud. This high-quality web hosting company uses advanced backend technology to power users’ websites. Gone are the days of subpar performance with companies like BlueHost, SiteGround, GoDaddy, etc. Unlike its competitors, ChemiCloud is an independently owned hosting company that uses cloud infrastructure to power its users’ websites.

While it offers similar perks as most competitors, like unlimited bandwidth and unlimited email accounts, its advanced backend technology sets ChemiCloud apart from its well-known competitors. Websites hosted with them are powered by LiteSpeed Technologies, a gold standard in the web server space.

Before installing Perfmatters and any other caching plugin on your website, you must evaluate the quality of the hosting company that powers it. Otherwise, no matter what plugin you use to improve its performance, your website will never reach its true potential.

If you already have a website or two and are considering switching hosting companies, consider ChemiCloud. Please read my review below to learn why they are the best company for powering my website.

Read More: ChemiCloud Review: The Best Web Hosting for Entrepreneurs >>>

JavaScript Settings

Perfmatters JavaScript Settings
Perfmatters JavaScript Settings

When building your website with Kadence, you will accumulate a lot of JavaScript resources, even if this is not your intention. Therefore, your website must be optimized well enough to handle all JavaScript files and CSS, HTML, etc.

While LiteSpeed Cache’s JavaScript optimizing settings have done a good job overall, I felt like things could be even better. My performance test scores were good, but I knew they could be better because a script or two would always slip through the optimization cracks, load on their own, and cause my web pages to slow down.

As a result, I implemented Perfmatters to catch the JavaScript scripts that LiteSpeed Cache missed. In addition, Perfmatters has a couple more JavaScript optimizing settings that LiteSpeed Cache does not currently offer, but they have helped improve my website’s performance.

Delay

For my JavaScript optimization strategy, I delayed the scripts’ loading until a visitor scrolls to where they are on a web page. This strategy suits websites built with Kadence because it prioritizes critical content and helps reduce initial page load time.

Delay JavaScript = ON

This setting turns on the delay JavaScript optimization setting.

Delay Behavior = DELAY ALL SCRIPTS

In Perfmatters, you can delay individual JavaScript files or all files within your website. I recommend the ‘Delay ALL Scripts’ setting to simplify things and streamline this optimized setting across your website. This way, we can exclude individual files that may only affect one or two pages instead of individually listing files that may affect our entire website.

Quick Exclusions = THEMES > KADENCE MENU

When I switched to Kadence from Elementor to maintain the design of my website, I was grateful to see that Kadence integrates well with Perfmatters compared to Elementor. When delaying all JavaScript files with Perfmatters, you can quickly exclude all of the Kadence Blocks and the Menu within the Kadence Theme. Here, I only excluded the menu in the Kadence Theme.

I excluded the Kadence menu because it is the first thing visitors see when loading my website. A common issue with delaying all JavaScript files is that the files of elements included in a page’s initial loading can be included in the delay function. This can negatively impact your website’s performance, specifically the Interaction to Next Paint (INP) metric for mobile devices in Lighthouse speed tests.

I did not know this right away, so as I write this post, my mobile INP metric in speed tests is slowly improving from initially failing. After researching this issue, I learned from various sources that delaying JavaScript files above the fold could be a culprit. Since the navigation menu is part of the header, which is the first thing that loads when visitors visit my website, it is best to exclude its JavaScript file from being delayed. Thankfully, Perfmatters makes this super easy.

Delay Timeout = DEPENDS

Another setting you can consider is the Delay Timeout setting. This ensures that all scripts are loaded after 10 seconds if a visitor’s interaction with a webpage ultimately did not require that script to load. Perfmatters says this setting is necessary if you run many tracking or third-party scripts on your website that need to collect accurate data or run regardless of user interaction.

Disable Click Delay = ON

Disable Click Delay is a JavaScript setting Perfmatters provides, but LiteSpeed Cache does not, which is very beneficial for websites built with Kadence. I have it turned on, and I recommend you do, too. Since page builders like Kadence use a lot of JavaScript, websites risk experiencing click delay. This prevents visitors from clicking on something until ALL of the JavaScript on the page has loaded. This is not good when it comes to user experience.

If you are like me and are experiencing the “Interaction to Next Paint (INP)” metrics failing in your Core Web Vitals and do not understand why, this setting could potentially help. Since INP is measured using actual user experience, it slowly improves over time as more people, such as yourself, visit my website. While I am unsure if this setting alone plays a role in my INP slowly decreasing in milliseconds, it can help.

Enable FastClick = ON

Regarding the previous setting, I suggest turning on Enable FastClick. Perfmatters says this fixes a known bug in iOS software that can sometimes cause a link not to work unless clicked twice.

Preloading

Perfmatters Preloading Settings 1
Perfmatter’s Preloading Settings

I mostly leave this section of the Perfmatters plugin alone. Preloading the wrong thing could increase a page’s initial load time.

Preload Critical Images = 0 (Default)

Preloading critical images helps reduce the timing of a web page’s largest contextual paint, such as the featured image. This setting pushes the appropriate image file to the top of the waterfall so that browsers know to load this element first.

As you can see, I keep this setting at the “0” default because, for the most part, the Viewport Images and the Low-Quality Image Placeholder (LQIP) settings in the LiteSpeed Cache plugin do a good job of ensuring that the featured image has a high fetch priority. Even though some web page speed tests have a featured image lower in the waterfall, it still has a high fetch priority and is loaded immediately after critical CSS files. Turning on this setting for ALL images above the fold of all web pages could do slightly more harm than good to metrics such as:

  • Interaction to Next Paint (INP)
  • Largest Contextual Paint (LCP)
  • First Contextual Paint (FCP)

Preloading Individual Elements

However, as to the point of this article, LiteSpeed Cache’s image settings have failed to fully optimize the main images of a few posts and pages. That is why, rather than turning on the Preload Critical Images setting for all photos, we can preload individual pictures on a specific post or page and other elements that may need to be preloaded because the Delay JavaScript setting messes it up.

To know which critical images on a web page need additional optimization from Perfmatters, you should test each webpage and evaluate the results. Ideally, you should not use PageSpeed Insights but rather the Lighthouse DevTools in the Google Chrome browser or SpeedVitals if you do not use Chrome.

When evaluating a web page’s waterfall, if you see multiple image files being loaded, you should preload the image file with dimensions in the URL in Perfmatters. This is your optimized image file from LiteSpeed Cache as a result of using their Viewport Image setting.

As you can see from the above screenshot, you may have to individually preload either the desktop and mobile versions of the optimized main image or one or the other. Either way, make sure you:

  1. Indicate if the preloading should be for desktop or mobile, never “All devices.”
  2. In the Location setting, include the individual post ID where the image is located so it does not load on other pages. The post ID is in the URL when you click ‘edit post’ in WordPress.
  3. Indicate the fetch priority as “high.”

Disable Core Fetch = ON

This setting turns off the ‘fetchpriority’ attribute in the WordPress core because it tends to add the ‘fetchpriority=high’ attribute to the wrong image.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

Lazy Loading

Perfmatters Lazy Loading Settings
Perfmatters Lazy Loading Settings

Usually, having more than one plugin perform similar functions is not okay. It could mess up your website, especially for visitors. That is why I keep the main Lazy Loading settings in Perfmatters off: the LiteSpeed Cache plugin does a good job at this.

Since switching to Kadence from Elementor, I have noticed that when using their Gallery widget, I have to turn on Lazy Loading in the widget settings. For some reason, lazy loading in LiteSpeed Cache skips the images in the widget. However, turning on lazy load in the Gallery widget, in addition to the LiteSpeed Cache plugin, has proven to be okay, and it does not warrant any further help from Perfmatters.

DOM Monitoring = ON

Another lazy loading setting I turn on in Perfmatters is DOM Monitoring. According to Perfmatters, it is supposed to monitor changes in the DOM and lazy load newly added elements as visitors scroll down a webpage.

This setting should be turned on if your Kadence-built website is like mine and it has:

  • infinite scrolling
  • image galleries
  • gallery sliders
  • Grid containers
  • Long articles and listing pages
  • The “Avoid an excessive DOM size” error appears on several of its pages’ performance test results.

Unfortunately, this setting does not officially eliminate that diagnostic. However, it does help limit its impact. This setting reduces the time it takes for a page with many DOM elements to load by preventing the elements not visible upon initial page load from loading until the visitor actually navigates to those DOM elements.

Add Missing Image Dimensions = ON

The last setting I have turned on within this group is “Add Missing Image Dimensions.” Yes, I also have this setting on in the LiteSpeed Cache plugin. However, several past PageSpeed Insights test results showed that some image dimensions were still missing despite the setting being on. Turning this setting on in Perfmatters also ensures that I never see that diagnosis again in future webpage performance test results. So far, I have not.

Final Thoughts

The rest of the settings in Perfmatters are either tested for my own website or left off. These settings include:

  • General Core Settings (tested for my own website)
  • CSS settings
  • Fonts settings
  • CDN settings
  • Analytics settings
  • Script manager

I leave these settings alone because the LiteSpeed Cache plugin does an excellent job of optimizing my website on its own. Remember, Perfmatters is designed to complement your primary caching plugin, helping to further optimize your website in areas where that primary caching plugin falls short.

If you are looking for an affordable add-on optimizing plugin to help your website reach its full performance potential, consider implementing Perfmatters on your website. With a careful setup, your website can achieve near-perfect speed test scores and grow more visitors organically as a result.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *