Super detailed and comprehensive Perfmatters setup tutorial, share optimization ideas and exclude JS list

Perfmatters(PM for short) is a WordPress performance, speed optimization must-have plug-in, using it can disable useless CSS, JS, generate critical CSS, delay loading JS and images, preload critical resources, etc., very powerful and useful. 100% focus on improvingGoogle Core Web VitalsScores.

If you want to get a score of 95 or more in Google speed measurement in the tool for mobile and computer, Perfmatters is highly recommended and optimized better thanWp RocketFortunately, PM is a paid plugin without a free version, clickDownload Perfmatters plugin, permanently updated, very installed after source code comparison and antivirus verification.

Here is our website builder's client website inGtmetrix.comandGoogle Speed TestAs a result, byAstra Pro+Elementor ProBuilt, optimized using Perfmatters. The speed is very fast, and there is room for optimization, see the results are good we are too lazy to optimize further only.

Although the plug-in is very powerful, if Perfmatters is not set up properly, the effect is greatly reduced if it is not used properly. Just like painting, in addition to tools, techniques and experience are also very important. Here are some Perfmatters settings tutorials and optimization ideas, if you have any questions, please leave a comment.

Note: Perfmatters plug-in only optimizes assets and image loading, to further improve the overall site speed there is still a lot of optimization work to be done, please see the specificThe Ultimate WordPress Speed Optimization Tutorial.

Perfmatters setup tutorial

Perfmatters settings are important to set up according to your own website to be effective. The following tutorial makes our handwritten dry, I hope it will be helpful to you. If you like to watch videos, you can watch thisYoutube video(requires a wall), the plugin author personally explain the settings.

Note: The same feature can only be enabled in one place (plugin), multiple places will have conflicts if enabled. If you use the function of Perfmatters, you have to disable the same function in other plug-ins.

General settings

Click "Settings" > "Perfmatters" to enter the general settings of Perfmatters.

Press the following setting, which is to disable some unnecessary functions and codes. There is a circle question mark next to each settingYou can see a detailed explanation by clicking on it.Button blue means disabled, button gray means not disabled. The following only explain the more important settings content, there are questions message comments, we see all will reply.

Note: It is recommended that for every 4 items disabled, open the main page to see if the display is normal, and if there are any abnormalities, disable them one by one to check the problem.

Disable emoticons:Emoticons will loadwp-emoji-release.min.js，如果你的网站没有使用表情符号(一般用于插入文章内容中)，建议禁用(99%网站不会用到它)。

Disable panel icons:Wordpress自带有图标库，会在前端加载一个Dashicon资源，不建议禁用。后台登录页面密码旁边的眼睛图标，前台登录状态顶部显示的状态栏图标都需要用到它，Variation Swatches for WooCommerce 之类插件也会用到它。

建议在资源管理器里面设置非登录状态禁用该资源，这样速度快又不影响图标正常使用。

Removal of jQuery migration.A "jQuery migration" is a "jQuery Migrate". The purpose of "jQuery Migrate" is to improve the compatibility of the code in the advanced and low-level versions, so that only themes/plugins with older code will use it.

It is recommended to disable it first and check the page display and functionality for any abnormalities. If everything is fine, continue to disable it and disable it if there are any abnormalities.

注意：目前(2024.7.02)Astra Pro固定页眉功能用到“jQuery Migrate”，如果有启用固定页眉不能禁用“jQuery Migrate”。如果手动添加JS代码实现固定页眉功能，可以禁用。

Disabling the REST API.Suggest saving defaults (on).The REST API is an interface that will be used by block editors, applets, some plugins.If your website does not use REST API, you can set it to "Disable when logging out". The following chart plug-ins and features using REST API, if you do not understand what it means, it is recommended that you select "Default (on)". If you disable it, you can test the website functions and enable it if there is any abnormality.

Password Protect WordPress plugin, Contact Form 7, Gutenberg editor, Elementor form, etc. all use REST API and need to select "Default (on)".

Remove comment.Remove the article comment box, visitors can not comment. If the article does not need the comment feature can be turned off, it is generally not recommended to remove it. Article comments help improve customer experience and SEO results. You should usually try to get visitors to leave as many comments as possible.

URL for removing comments.After removing the article comment box in theURL input boxIt will disappear and visitors cannot enter the URL. It can avoid spamming external links, and it is recommended to remove it.

Remove Global Styles.If you don't use the two-color filter feature of the Gutenberg editor, disable this and you can cut over 300 lines of code. I disable it if I don't use the Gutenberg editor.

Disable Heartbeat.It's the same function as Wp Rocket's "Heartbeat Control". What it does: 1- It provides regular auto-save feature when you create/edit a post from the editor; 2- If someone is editing something, the list page will indicate the following content "xxx is currently editing".

Suggested selection "Only allowed when editing posts/pages","Heartbeat Frequency"Select 60 seconds. This can greatly reduce the CPU usage and the large number of PHP calls, and reduce the burden on the server.

Heartbeat frequency.Select the maximum 60 seconds.

Restrictions on post modifications.Select "Disable post revisions". Post Revision is the process of automatically saving older versions of posts/products etc. so that you can restore them, which slows down the database and takes up a lot of disk space.

In the vast majority of cases we do not bother to revert old versions of posts, so it is recommended to disable this feature to speed up the site. If you need this feature, you can limit the number of post revisions to 2.

Auto save interval.The recommended setting is 5 minutes. By default WordPress automatically saves article and product drafts every 60 seconds. Reopening/loading the page in case of internet disconnection etc. can restore the content from the automatically saved drafts to avoid content loss.

Custom Login URL↑.Modify the background login address, greatly increase the security of the site. WordPress background default login URL unified for xxx.com/wp-admin, it is easy to be attacked. Here you can enter the content to replace the URL suffix "wp-admin".

For example, enterdsdg-3ffa，后台登录地址会变成xxx.com/dsdg-3ffa/。修改后注意保存新登录地址！

Disable Behavior If you choose Message, the default login URL will show the content of Message column when you enter the backend. You can also choose to display 404 error page, automatically jump to the home page, redirect to other URLs.

If you forget the new login URL for the backend, go to the wp-content folder of FTP, find the folder perfmatters and rename it toperfmatters#. This will disable the perfmatters plugin to disable the new login address, and it will be possible to log in using the old login address xxx.com/wp-admin.

After successfully logging in, change the folder name back to perfmatters from perfmatters#. Go to the plugin list page, tap Activate perfmatters to re-enable the plugin, and then view/modify the login URL again.

If it is an e-commerce site with shopping features, do not disable all! If the 2B foreign trade website without online shopping features, it is recommended to disable the red box 3 items above, very safe, click on the option next door circle question mark to view each option to disable which specific features.

Disable script.When disabled, all pages except shopping cart, checkout page, personal account page, product list page, store page, product detail page, product tab page will remove the Woocommerce code below, greatly improving the page loading speed!

Tip: Do not enable this feature on 2C retail sites. Because each page header usually has a shopping cart and a personal avatar icon, if you enable the "Disable Script" function, it will cause the shopping cart and personal avatar function to be abnormal.

Note: Disabling the script will also disable these codes on the front page, making it impossible to insert products on the front page via shortcodes or Elementor product widgets, so please decide if you want to disable them or not. However, there is a workaround.

We build the site with the "Disable Script" feature enabled, using Elementor's "Picture frames"Widget insert product/. For the widget image, use the product image, for the title use the product title, and for the link field just fill in the product link. Or a simpler way is to use the "posts" widget and fetch the product.

For example, in the figure below weHome Articles sectionIn fact, it uses 3 "image frame" widgetsproduction, you can also use the same method to display the product (not show the price).

There is another way to use Perfmatter'sperfmatters_disable_woocommerce_scriptsFilter hooks (hooks) to exclude specific pages from disabling Woocommerce code.

If you do not understand these 2 methods above, and need to insert products on the home pageDo not disableThis feature. Change to manually disable the above code on the article list page, article detail page, contact us page, about us page and other pages that don't use Woocommerce, which is slightly more troublesome.

Assets settings

This page of settings is the most important, complicated and troublesome feature. Speed improvement mainly depends on it, look carefully and carefully.

Open Enable Script Manager to disable useless CSS/JS.

JS asynchronous (defer/async) and delayed loading (delay) difference in detail

First understand the difference between JS asynchronous (defer/async) and delayed loading (delay) to help better understand the use of Perfmatters asynchronous, delayed JS functionality.

By default a page has many kinds of code, generally in order from top to bottom CSS > JS > main html (site content). There are a few CSS and JS that appear inside or below the html, with the 3 interspersed and alternating. Browsers load web code and resources (images/fonts, etc.) in top-to-bottom order.

By default, when loading JS code, it will stop loading html code, and wait for JS code to finish loading and executing (function) before continuing to load html. many JS has no effect on the page content display, but only affects the function, while html is the key to affect the content display. So it's a waste of time to wait for JS to finish loading and executing before rendering the html content.

The following figure shows the progress of html and JS loading by default (from left to right), green represents the html loading time, gray represents the JS downloading+executing time (blue is downloading, red is executing). You can see that html loading is interrupted when encountering JS loading and execution.

Defer is also called Async, which stands for asynchronous loading. Asynchronous loading will take the JSDocumentsThe position is moved to below the main html (waterfall), and the html can continue to load (without interruption) while the JS is being downloaded (blue below), therefore shortening the display content loading time.

However, JS will be loaded immediately after the execution (red below), during the execution of JS will interrupt the html download (gray below), until the JS execution is completed and then continue to load html ↓, or will have a little impact on the html loading. tips: Defer will not be loaded in order, which JS is loaded first after the execution of which first.

Delay is delayed loading, which continues to load html (without interruption) while the JS is downloading (blue below), and waits until the html is fully loaded before starting to execute the JS (red below). In contrast to asynchronous loading, delayed loading does not interrupt html loading during JS execution, as it is faster.

JS is primarily responsible for functionality, with only a few JS affecting the display of page content. The code is often interdependent and entangled, sometimes requiringExecute firstAfter certain JS, the associated content/function will continue to be displayed/executed normally.

Delayed loading JS is the last to execute JS, which disrupts the dependencies between the codes, so it may lead to page display and functionality exceptions. Asynchronous loading JS, on the other hand, is a safer method of JS optimization because it is executed immediately after loading, so it rarely leads to site exceptions.

Delayed loading JS can cause website problems, but it is much better than asynchronous loading JS for speed improvement! It can greatly improve the GoogleSpeed mobile score and must be used. Just exclude some key JS is delayed loading can solve the site display and functional abnormalities.

Which JS to exclude depends on the theme, plugins and page creation method used, so it is not possible to provide a uniform exclusion option here. What JS should be excluded from delayed loading? This is where the difference between a rookie and an expert lies, as well as the difference between caching plugin compatibility and speed improvements. This is a bit complicated, so please move toPerfmatters Tutorial".

Diamo launchesWordPress Website Speed Optimization ServiceIt can help you remove/disable useless JS and CSS codes on your website, delay the loading of non-critical JS, compress images, configure CDN acceleration, etc., which greatly improves the speed of your website. Google speed test computer and cell phone scores can go to 95-100 points, second open page. 

Defer Javascript.Asynchronous loading of JS, enabled. This will move the JavaScript to the bottom of the page to help resolve the "rendering blocking" error prompted by GoogleSpeed. Can be used in conjunction with the delayed loading JS below. enabling both will delay loading the JS first, and then load it asynchronously if it cannot be delayed.

Include jQuery.Don't enable it. This is meant to load jQuery asynchronously at the same time, and there is a high probability that the site will have problems if it is enabled.

Exclude from Deferral.Exclude some content from loading asynchronously. Copy and paste the following 4 lines into the box to exclude asynchronous loading, we found that if the asynchronous loading of these 3 WordPress resources will cause the frontend to report an errorFormat according to the chart, one line at a time!.

jquery.min.js
hooks.min.js
i18n.min.js

Delay JavaScript.Delayed loading of JS, enabled. Will delay the loading and execution of all JavaScript files and inline JS scripts until there is user interaction (e.g., moving the mouse on the page, touching the screen, scrolling, keystrokes, scrolling with the mouse wheel) as a way to improve performance.

It is similar to the image delayed loading feature, but applies to JS files. This optimization will improve the following recommendations in PageSpeed.

1. Deleting unused JavaScript.
2. Minimizing/reducing main thread work.
3. Reduction of JavaScript execution time.
4. Reduction of total blocking time.
5. Reducing interaction time.
6. First contentful paint.
7. Other core network vitality factors.

Delay Behavior.It is recommended to choose "Delay All Scripts" for the best speed improvement and the worst compatibility, but compatibility issues can be solved by excluding delayed loading of some key JS.

Excluded from Delay.Excluding the delayed loading of some JS, the following "Perfmatters Tutorial" will explain in detail.

Delay Timeout.Enable, this can improve compatibility. After the above mentioned delayed loading JS will not load JS until the user interaction, the actual situation is JS interdependent, many times to the time when it should be loaded and not loaded resulting in functional failure, display exceptions.

After opening this feature from the time you enter the page, all JS will be loaded automatically after 10 seconds, without waiting for user interaction. This does not affect the page loading speed, and at the same time improves the efficiency of loading JS code. If you want to adjust the 10 seconds time value, copy and paste the following code intofunctions.phpThe bottom is fine.

OfficialIt is recommended to adjust to 7 seconds (listen to the official), we tested and found that if the setting time is lower than 6 seconds some functions will not be executed, andGtmetrixSpeed measurement time will become 6-7 seconds, inaccurate.

//Change the Perfmatters Time Out time to 7 seconds
add_filter('perfmatters_delay_js_timeout', function($timeout) {
    return '7';
});

These two functions need to be enabled in "Tools" > "Plugin Settings" after "Show Advanced Options" will be displayed, the specific role and whether should be turned on, seePlugin settingsThe chapter is explained.

Remove Unused CSS.Open to remove useless CSS/generate critical CSS. because of the poor quality of plugin theme writing, different settings for each person, etc., resulting in a lot of useless JS, CSS code on each page. This feature can be opened to prioritize the loading of critical CSS that affects the display of page content and delay loading/not loading useless CSS.

Most websites that use "Remove Unused CSS".

• FCP decreased by an average of 15.20%.
• LCP decreased by 19.66% on average.
• TTI decreased by an average of 14.95%.

Used CSS Method.For how to load the key (Used) CSS, we recommend File, which will regenerate the key CSS in a new CSS file, and Inline, which will insert the key CSS directly into the page html as inline CSS.

File is selected because files can be cached, while inline CSS cannot. For example, the first time a visitor enters a product detail page, the key CSS File will be cached in the visitor's browser. When the visitor opens another product detail page, the key CSS is retrieved directly from the browser record and displayed directly on the page, rather than having to go to the server to download it. This is faster and reduces the pressure on the server.

The key CSS of Wp Rocket is inline and cannot be selected from File, so we choose to use Perfmatter to generate key CSS. different plugins generate key CSS with different accuracy, some plugins this function will cause some content on the page to be displayed incorrectly and need to exclude the corresponding CSS. interested in their own comparison study.

Stylesheet Behavior.The "Used CSS Method" option above is for how to load critical CSS, and this option is for how to handle Unused CSS.

It is recommended to choose "Delay", which will delay loading useless CSS until user interaction, fast, but less compatible with delayed loading JS. On the contrary, "Async" is more compatible and slightly less speedy. The official recommendation is to choose Delay first, and then exclude delayed loading or use Async instead.

If you don't know, don't choose this one.

Excluded Stylesheets.If some critical CSS is delayed loading as non-critical CSS causing slow display, pasting the names or paths of those CSS here will re-add them to the critical CSS.Format according to the figure, one line! The following fill in the content of the same, enter the format according to the figure, not to repeat.

You can fill in the CSS name or the path.

Excluded Selectors.This is a good feature to control the key CSS precisely, which is better than Wp Rocket for us This is a good feature to control the key CSS precisely, which is more suitable for us than Wp Rocket.

For example, when loading the header, the navigation icon jumps a bit (the display process changes from large to small), it may be that the css code that controls the size of the icon is treated as useless css delayed loading. At this time, you can fill in the .class or #id of the css that controls the icon.

CDN URL.If you have a CDN (excluding Cloudflare) and are not using Perfmatters' CDN rewrite feature↓, but rather a CDN rewrite feature like Wp Rocket, you need to fill in the CDN acceleration domain name here.

If you use Perfmatters' CDN rewrite feature or don't use Perfmatters' remove useless CSS feature, leave the CDN URL blank and don't fill it in.

Clear Used CSS.Regenerate key CSS means. If you use Elementor or something like that to modify the layout of the page, the appearance of the content, causing the CSS to change, you need to click on this button to regenerate the key CSS. or click on the top toolbar button to clean up ↓.

Minify CSS:Remove extra comments, spaces, and line breaks from CSS to reduce CSS size and load time. Note: The following scenarios may not shrink CSS:

1- The size of the file itself is less than 2KB (estimated);
2- The file itself has too little space to be compressed, e.g. the volume that can be deleted is less than 10% (estimated) of the original file volume;
3- The file name is suffixed with .min.js, which means it has been compressed by other plugins/themes and PM will not compress it again;

Note: If you have used CDN and caching plug-ins, you need to clean the CDN cache first, then clean the third-party (caching) plug-in cache, and finally clean the Perfmatters cache so that you can clean the cache properly.

Add custom CSS, JS, HTML code to header/header, body, footer. For example, you can add Google tracking code, preload code, etc.

Elementor Pro's Custom Code function is the same as this one, but it is more powerful and allows you to choose which pages the added code takes effect on.

Astra Pro theme's Custom Layout feature is even more awesome, not only can you choose on which pages the added code will take effect, but also choose to insert the code/content into the specific hook (hook) location of the page, recommended to use.

Preloading settings

This is preload, prelink, DNS prefetch setting. It is also a very important feature to control the priority loading order of resources to improve loading efficiency and speed.

Enable Instant Page.It is the same function as Wp Rocket's "link prefetching", any link in the page will start loading the link page in advance, and the speed of displaying the link page will be much faster when visitors click that link (because it is preloaded).

This feature can improve the speed of visitors to open the page links, but it will also increase the burden of the site. If your server configuration is high and bandwidth is sufficient, it is recommended to turn it on. Otherwise, keep it closed.

Preload Critical Images.Preload key images. It will prioritize the loading of images on the page in top-to-bottom order (will not preload SVG images and icon icons) to speed up the display of images, it is generally recommended to select 2 or 3, selecting too much instead may reduce the page speed.

Note: The images inside the navigation bar dropdown menu are also preloaded and counted inside the preloaded quantity.

Preload. Preload, after setting, you can preload (prioritize) critical resources to speed up the page display. With the following Preload Critical Images function is the same, the difference is that the preload in addition to supporting images, but also supports CSS, JS and so on.

With the help of Preload, you can adjust the loading order of resources (especially header and first screen content), prioritize the loading of resources that affect rendering, and speed up page rendering. Do not preload more than 4 contents, otherwise it may cause blocking to become card.

If Google speed suggests that there are resources blocking the rendering, try setting those resources as preload and retest to see if you can sometimes solve the problem of blocking the rendering.

If the "Remove Unused CSS" feature mentioned above is enabled, you cannot preload the CSS inside the preload, otherwise there will be a conflict.

Fetch Priority:This is an HTML attribute introduced by Google to set the priority (high or low) of a resource. It has the same effect as the Preload feature mentioned above, but is not as aggressive.

Currently the mainGoogle (Chrome) and Edge browsers support fetchpriority propertyThe other browsers don't support it as well. It is officially recommended to use both Preload and Fetch Priority in most cases.See the difference and usage of the 2.

Pre-connections. Allows browsers to set up early connections before HTTP requests, thus eliminating round-trip delays and saving time for visitors. Typically used to pre-link Google fonts, if you use Google fonts, enter the font URL here.

DNS prefetch: : prompt the browser in the background during idle time to pre-complete DNS resolution of off-site resources (such as Youtube videos, CDN URLs), the point you click on off-site resources will load faster. Generally used to pre-load the URL of external resources.

Google Chrome press F12 to go to Developer Tools and click You can view what external resources are available on the current page. Just enter the external resource URL prefix into the prefetch box.

Delayed loading settings

This is the image delayed loading feature. Delayed loading of images means that only the first screen and images within a certain distance from the first screen are loaded at the beginning. The images outside the range are not loaded at first, until the visitor scrolls down the page to gradually display the rest of the photos according to the distance, thus greatly reducing the loading content and loading time.

Before using delayed loading↓

After using delayed loading↓

So many people say that delayed image loading is necessary to improve speed and must be done, which is true and does help to improve speed. However, some of the top speed cattle say that delayed image loading is not good for customer experience and is not recommended to be enabled. We are all right, but from different perspectives and positions.

Let's start with the disadvantages of delayed loading images. Delayed loading is usually done using the browser's native delayed loading or using JS delayed loading, which in theory should be preloaded when the image is about to enter the visual area, so that when the visitor swipes to the image location, the image is already loaded and displayed in advance. But in many cases, this is not the case.

You should have encountered images appearing very late when browsing the web, and when they appear, they may pop up at once or change from blurry to clear. Visitors need to spend time and mood to wait, so some people say that delayed loading images are not good for user experience.

According to our experience in optimizing multiple sites, excluding the first screen images are delayed loading, delayed loading of images outside the first screen is best, taking into account the user browsing experience, but also to improve the page loading speed.

WordPress 5.5 starts with a native deferred loading feature, which uses the browser's deferred loading. However, we recommend using the deferred loading solution in Perfmatters. Why? Our solution is faster and better than native deferred loading for the following reasons.

1. Native delay means it lets the browser decide what should be delayed to load, unfortunately by default itToo eagerthat there is usually not much delay in loading resources, which means that it is not too fast.
2. images must be uploaded to the WordPress media library with added width and height, which means that native delayed loading may not be available for all images.
3. Native deferred loading does not support CSS-added background images.
4. Native deferred loading is being improved, but still lacks support for certain things and has limited functionality.

Important Notes.When deferred loading in Perfmatters is enabled, the default native deferred loading in WordPress is automatically disabled.

After talking about the optimization ideas, now start setting up the optimization image delay loading.

Images.Open to enable the image delay loading feature.

Exclude Leading Images.Exclude the number of delayed delayed loading images in front, choose 4 or 5.

iFrames and Videos.Delay loading iFrames and Videos, open. As we all know videos are very large and affect the page loading speed. Enabling this feature will automatically replace the YouTube iframe with a preview thumbnail of the Youtube video and a lightweight SVG playback icon.

At the beginning, only the video cover image and the play icon are loaded, not the YouTube video. The video only starts to load when the visitor clicks play, so that the video has minimal impact on the page speed, which is the fastest way to load YouTube videos.

YouTube Preview Thumbnails.It must be opened, which is mentioned above using the preview thumbnail of the video as the video cover.

Exclude from Lazy Loading.Exclude delayed loading. Add the name or .class of the image that you don't want to be delayed. All images on the first screen of a page should not be loaded late, such as logos, flag photos in front of multiple languages, user avatars, first banner images, etc.

The first 4-5 images are set not to be delayed, so in general, if there are not many images on the first screen, they should be excluded from delayed loading. However, there are exceptions to this rule, and the following Perfmatters tutorial will teach you in detail how to check if an image is delayed and how to exclude it.

Note the image name and .lass format, one for each line! Just use a format like xxx.jpg for the image name, and .class must use class="xxxx format and in the order of the html inside. For example, the following image is the html code of an image, if you want to exclude this image from being loaded late you need to add class="attachment-woocommerce_thumbnail to the exclusion box, note that there is no " Symbols!

If you have a pop-up window (for example, the picture below), and there are pictures inside the pop-up window, the pictures of the pop-up window may be displayed slowly after enabling delayed loading, and you need to exclude the corresponding pictures from being delayed loading. If it is still slow after exclusion, you can try preloading.

Threshold.How far away from the visible area to start loading photos, the plugin author recommends setting it to600px. The above analysis of ideas to delay the loading of images behind, and wait for the image is about to enter the visual area to start loading the display image. Here is to set the distance from the visual area is less than how much distance to start loading images.

Plugins like Wp Rocket do not have this setting option for delayed image loading, so we feel that the Perfmatters feature is more in line with our optimization ideas.

DOM Monitoring.DOM Monitor monitors changes to the DOM and dynamically delays loading of newly added elements. This improves compatibility and ensures that infinite scrolling elements work properly.

The most common example of an infinite scrolling element is an infinitely looping auto-playing slideshow (banner and such), if your site does not have an auto-playing + infinitely looping scrolling slideshow and such elements.orIf the images of these elements exclude delayed loading, do not turn this feature on, and vice versa.

If your site has pop-ups and there are photos in the pop-ups, the images in the pop-ups may be displayed slower after enabling delayed loading, enabling "DOM Monitoring" will help the images to be displayed faster.

Add Missing Image Dimensions.It is recommended to enable it. Will add width and height attributes to the image to optimize the page display.

If the image lacks the width and height property attributes, it may cause the layout to be offset, triggering the CLS warning in Core Web Vitals: Image elements do not have explicit width and height.

Fade In.It is recommended to enable it. When the page is about to slide down to the area where the image is delayed to be loaded, the image will be displayed with when fade in effect (smoother transition) instead of popping up immediately, the visitor experience is better.

The Fade In function may be associated with some imagesRotation functionwocommerce image mouse overToggle display of imagesFunctionality, as well as Elementor Call to Action widget (mouse slide over background image animation failure) and other conflicts, if the site has this type of image display problems try to close the Fade In function or exclude the corresponding image (page) delayed loading.

CSS Background Images.The background image is loaded by CSS, so it cannot be delayed under normal circumstances. If you turn on this function, there will be an additional input box, just enter the .class name of the CSS that loads the background image to delay the loading of the corresponding background image. Note the format, there is no. , one in a row.

If the background image of the page is within the first screen area (e.g. poster/banner, background image of the top header), or if there is no background image, then don't turn this feature on. Conversely if there is, turn it on.

Fonts Settings

If you are not using Google fonts, simply disable them and suggest using system fonts or locally hosted fonts.

Local Google Fonts.If the website has Google fonts, it is recommended to disable it and then manually switch to use the system fonts. If you think Google fonts look better or don't know how to switch to use system fonts, then turn on this function.

Note: This feature can only be enabled in one place! If the theme, other plug-ins have the same function just choose one place to enable.

After opening it will automatically download the Google fonts to local, and then locally host the Google fonts. If you have used AWS, Tencent Cloud CDN or other CDN that will change the resource URL, enter the CDN domain name into the CDN URL box above, and note the format:https://cdn.xxx.com . Finally, remember to click "Clear Local Fonts" to refresh the fonts.

CDN Settings

After opening it will rewrite the site's image, JS, CSS URL prefix to CDN URL. If you are using Cloudflare, do not turn on this feature, because the CF CDN URL is the same as the site URL. If you use a plugin like OptimoleIndividuallyChange the image URL to a CDN URL, and don't open this either.

Generally use Tencent Cloud or Amazon AWS and other CDN, CDN URL and the original website URL is not the same, so you need to enable this function to rewrite the website images, JS, CSS URL into CDN URL in order to put the use of CDN function.

Note: It is not possible to add theBackground imageURL rewrite to CDN URL because Perfmatters. if it is the background image inside the Elementor builder, you can use Elementor > "Tools" > "Replace URL" function to put the background image URL manually replace it with the CDN URL.

Successfully replaced the URL↓

Clear all caches (browser, website backend, CDN), go to the frontend and refresh the page to find that the images have been loaded from the CDN.

Update: The above method has a drawback, the image URL will revert to the old URL after using elementor to edit the corresponding page. It is recommended to use handwritten CSS to add background images to the corresponding section instead of using ele editor to add them.

Analytics Settings

This function is to add Google Analytics code, which is very useful and convenient. If you need to install Google Analytics code through this function, it is recommended to set it according to the picture.

Tracking ID.Enter the website ID created inside Google Analytics. After Google Analytics creates the data volume it will show the content below, the one in red box is the measurement ID, just copy and paste it into the input box.

Or click on "Data volume">Click on the website again to go to the screen above.

Tracking code location.Google Analytics official request to select "Head", in order to avoid don't interrupt the loading and other impact data. If your site is not slow, in fact, the location selected "Bottom"It's also perfectly fine, the plug-in is also officially recommended to put"Bottom".

Script Type.What type of Google tracking code is installed, different types of code track different data and have different code sizes. It depends exactly how you use Google Analytics. I choose Minimal, the smallest code size (1.5KB) is the fastest and also tracks the least amount of data, but it's enough. Click to viewDifferences between various types of tracking codes.

IP anonymization.Open and comply with the privacy settings of some countries, we have to abide by the law.

Track logged-in administrators.Close without tracking data about your own page views.

Enable AMP Support.Shut down, AMP has existed in name only, no one is using it now.

Tool settings

Click "Tools" in the upper right corner to enter the tool settings

Plugin settings

Complete uninstallation.Set whether to delete all data and settings of the plugin after uninstalling Perfmatters plugin. If you decide not to use the plugin, turn this on before uninstalling it.

Hide Admin Bar Menu.If you don't turn it on, the Perfmatters shortcut button will appear in the top bar of the backend. You can re-generate the critical CSS (Remove Unused CSS) and enter the plugin settings screen. If the "Remove Unused CSS" feature is enabled, it is recommended to leave it in place by default.

Show Advanced Options.After enabling the delayed loading JS settings at the bottom will add the following figure ↓ 2 features, see the text below to explain the specific role. If your site has encountered the following 2 problems to enable this feature, if not encountered or you can not read the following 2 features recommended to keep disabled.

Turn it on if you encounter a click delay (Disable Click Delay)↓

If you encounter an invalid click in the IOS browser you need to double-click to do so, turn it on (Enable FastClick)↓

Purge Meta Options: ignore, keep default, will not appear in Meta Options box after checking the corresponding function. Edit page, article, product will appear the following ↓Perfmatters Meta Options box, you can disable the current page asynchronous loading JS, delayed loading JS, delayed loading images, mouse slide over the preload link function, very useful.

Other functions are understood at a glance, not much explanation.

Database Settings

This is the automatic database cleanup setting, and the automatic database optimization function of Little Rocket, just choose one of the two. According to the following chart, you can choose Weekly or Monthly to clean up automatically.

Perfmatters Tutorial

Set it up is just the introductory basis for using this plug-in well, using it well is the key to optimizing the site speed to the extreme.

Disable useless resources with Perfmatters

First in "ToolsEnable the "Script Manager" in the "Script Manager" section below and tap Save. You can't close the "Script Manager" after disabling the resource, otherwise the disable will be invalid.

1- When you edit articles, pages or products in the background after enabling it, the text "Script Manager" will appear on the top toolbar as shown below, and you will enter the script management interface of the page you are editing after clicking it.

You can also click on the "Script Manager" ↓ in the article, product, page list page in the following picture content to enter theScript management interface.

2- If you have enabled the feature of displaying the toolbar for front-end access after logging in, the following button will also be displayed on the front-end page, and you can access theScript management interface.

3- or inFront EndPage URL followed by /?perfmatters You can also enter the resource management interface of the corresponding page by pressing the Enter key on the keyboard. For example, the address of the home page of this site is https://diiamo.cn, add the script manager suffix to become https://diiamo.cn/?perfmatters. After visiting, you will enter the script manager interface shown in the figure below.

The search page URL itself contains ?= Add directly to the /?perfmatters does not take effect. First, go to the search page to search for a random keyword, in the search results page URL directly add the &perfmatters. For example, I searched for the number 1 and added the URL https://xxx.com/?s=1&perfmatters. Or use method 2 above to access the resource management interface.

For ease of use, first enter"Settings"The interface is set up a bit.

Click Save after setting as shown below. Then click on the top left corner "Script Manager"Go back to the Resource Management screen.

Note: After the third test mode is opened, only the administrator can see the effect of the page after disabling the resources, visitors still visit the page without disabling the resources. After disabling the resources to test the site display and function normally, remember to come back to close the "test mode", clean up the cache, disable the resources to take effect.

(MU) mode Takes the script manager to a whole new level, providing more control andDisable WordPress plugin queriesand hooksandInline CSS, JSClick to viewMU mode detailed explanation and use of tutorialMU mode disables database queries and hooks in addition to disabling the corresponding code, which can easily lead to problems and should not be used by novices if they are not familiar with it.

For example, use Elementor to build a Woocommerce detail page without using any Woocommerce class widgets, functions or code.If you use MU mode to disable the detail page Woocommerce code, it will cause the page to not openThe page displays correctly. However, manually disabling all Woocommerce codes one by one is no problem and the page is displayed normally.

Tips: List page is not shown here, no matter "Disable" or "Articles" in "Exception", it only refers to detail page, not list page. You need to enter the URL of the list page in the regular expression, or use "current URL" to exclude it.

Here is a tutorial to disable the script, first understand the meaning of the options in "Locations" in the picture below.

1: Article detail page.
2: General pages, also known as backend "pages"  The pages inside the section.
3: Product detail pages.
4: Article listing page.
5: Article tabs.
6: author page (few sites will use this page, can be ignored).
7: Product category/category/aggregation page;
8: Product tabs.
9: product archive page, product list page by date, basically can not be used, ignore;

Here is a tutorial on how to use Perfmatters Script Manager↓.
1- If you want to be inAllTo disable resources on the front-end page, first click the button on the left to disable, and then check "Everywhere" as shown below.

2- If you need to disable the resource only on certain types of pages, just check the type of pages you need to disable the resource under Disabled. For example, the following setting means that the JS "wp-hook" is disabled only on the article details page and the regular type of pages.

3- If you need to load resources only on certain types of pages, first check the "Everywhere" global disable, and then under Exceptions check the pages where you need to load the resource (exclude disabling the resource on the checked pages).

For example, the "elementor-pro" CSS in the image below is only loaded on pages of type "pages" and is disabled on all other types of pages (article/product list/detail pages, search pages, shopping cart pages, etc.).

If the option under Exceptions does not have the option to exclude the page you want to disable, such as the search results page. Or if you feel that the Exceptions option is not precise enough, you can use Regex, which can be used in conjunction with the Exceptions option and both will work.

Tips: The following figure excludes disabled "Locations:", "Users:", "Devices:", "Regular Expressions:" from the list. " are and Relationships.

For example, in the figure below, "Locations:" is checked. PagesRegex input/\/\?s=/ Indicates that there is a simultaneous change in the Page and The search results page loads this resource. Learn aboutHow to use and write Regex.

Note: Search result pages created with elementor require the use of Archive Posts. For the widget, the "elementor-fronted" CSS resource is required as shown below. If you set this resource to load only in Posts and Pages like we did (below), you need to enter it in the Regex as shown below/\/\?s=/Let italsoSearch results page loaded in elementor production.

This is the end of the tutorial on how to use Perfmatters settings, if you have any questions, please feel free to leave comments.

Advanced Advanced Speed Optimization Tutorial (paid)

If you follow the above tutorial to optimize in place, the site speed should improve a lot, there may be some places that have not been optimized in place.Google Speed TestMobile scores have not been going up. The tool is dead, the site as well as is alive, according to theirSite StatusTargeted optimization is the best way to achieve the best results. The depth of understanding of plugin use and optimization will also affect the results.

The following paid content contains high-level optimization ideas, optimization techniques, and advanced use of plug-ins that can take your website speed optimization results to the next level, and also enhance your WordPress speed optimization skills.

Note: Each website situation is different, some website problems at the root of the basic can not be optimized. For example, the server is too poor response latency high, install too many bulky plug-ins front-end loading too much code, etc.. Have to first solve the problem from the root.

After purchase, enjoy the WeChat manual 1-to-1 consulting service ↓, you can enjoy the manual help you analyze website problems and give optimization suggestions / ideas. If you have other speed-related questions, you can also leave a message / consult customer service.

High-order optimization tutorials require a little bit of foundation, rookie novice if you do not understand do not buy tutorials! Do not understand or operate after the effect is not good we are not responsible. We only help to review the site to provide optimization advice, you need to rely on your own operation optimization.

Limited Time Benefits:Buy this Advanced Advanced Optimization Tutorial and get one year free!ShortPixel Image Compression Plugin. Can be unlimited compression of images, unlimited number of sites, support for the generation of WebP and Avif format images, greatly improving the speed of the site.

After purchasing this tutorial, take a screenshot of the purchased resources in your personal center to WeChat customer service (QR code in the footer) to get the plugin API activation code.

How to debug a website and troubleshoot problems

After the setup may appear some problems, need to compare the display effect before and after the optimization to find the reasons and solutions, especially to remove useless CSS effects select "Delete"."Perfmatters has three ways to temporarily disable optimization so that you can compare the display of a page before and after optimization.

Method 1: Enabling the feature shown below will disable Delayed JS, Delayed Loading, Preload, Local Google Fonts, etc. in Perfmatters for logged-in users. You can compare the results by opening the page in browser privacy mode.

Method 2: General Edit Page/Posts/Products, in the Perfmatters board you can disable some of the features of that page.

Method 3: Disable the JS and CSS optimization function of the current page by adding the feature suffix after the page URL, so as to determine which function is causing the error and prescribe the right medicine.

Check the optimization results

Follow the above method to Google after optimizationClick to go to Google speed test pageTest. Under normal circumstances the score on the computer side should be 95-100, with a page load time of 1 second or less. The score on the mobile side should be 90-100 with a page load time of 1.5-2.5 seconds.

If the score does not meet the above criteria, it is likely that the steps are not done properly, go over it againThe Ultimate WordPress Speed Optimization TutorialIt is possible that the speed is affected by the website server, website theme, etc. It is also possible that the speed is affected by the failure of the web server, website theme, etc.

Common Problems and Solutions after Optimization with Perfmatters Settings

The vast majority of problems are caused by improper use or unfamiliarity, the following are a few of the problems and solutions that users often encounter.

Optimized with Perfmatters settings and then slowed down instead?

Some users feedback after using this plug-in optimization speed is not as fast as when using Wp Rocket, Wp fastest cache and other plug-ins. PM is a resource optimization plug-ins, does not have a cache function. PM is a resource optimization plugin, does not have a cache function.The caching features of plugins such as Wp Rocket, Wp fastest cache, etc. can greatly improve the speed of your website.

please includePM works with the cache plugin! Disable all the features in the cache plugin that are the same as PM, and only enable the same features in PM. Any simple caching plugin can work great with PM, we recommend the free WordPress officialWp Super CacheOr a free download from our websiteWp Fastest Cache PremiumCache plugin.

It is also possible that the delayed loading JS function has delayed the loading of some important JS leading to an increase in rendering time, turn off the delayed loading JS function to clean up the cache to see. If this is really the case, just exclude the corresponding JS being delayed loading.

It is also possible that the CDN cache is not yet complete, the browser privacy mode to open the foreground refresh a few times, wait a few minutes and then test the speed to see.

Elementor Media Carousel Display Exception after Optimization with Perfmatters

This is a small Di I encountered the problem of removing useless CSS method Diamo I chose to "delete", exclude the "post-" beginning of the CSS file. In thetemplate pageThe slideshow will sometimes display abnormally (below), refresh the page to resume normal display.

Display anomaly ↓:

Normal display ↓:

Below is the CSS loaded when the exception is displayed, because other pages were visited first, causing some CSS at the beginning of post- to be cached by the browser. So accessing thetemplate pageWhen the CSS that is cached by the browser is loaded too fast, the critical CSS is not loaded at the first time, causing the Media Carousel widget to display abnormally.

Refresh the page or visit directly at the beginningtemplate page, will not have this problem.

There's still a way to fix this:

1- Regularly edit the page to disable the Remove Useless CSS feature of the page in the Perfmatters section.

2- Inside Perfmatters settings, find the following settings, delete the contents of the red box and do not exclude them.CSS files starting with "post-" on the line. This method is faster, but may lead to some front-end content display errors, the need to add some classname in the "Excluded Selectors" to repair.