Profile

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

Search
Perfmatters setup and use tutorial
Article List
Article 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.

Pasted 93

Speed test PC.png

Speed test mobile

Although the plug-in is very powerful, but if the Perfmatters settings are not in place, improper use of the effect is greatly reduced. Just like painting, in addition to tools, techniques and experience is also very important. The following share some settings suggestions and optimization ideas, if you have questions, welcome to leave comments.

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.

Pasted 7

Press the following setting, which is to disable some unnecessary functions and codes. There is a circle question mark next to each settingPasted 9You 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.

Pasted 10

Disable emoticons:Emoticons will loadwp-emoji-release.min.jsIf your site does not use emoticons, it is recommended to disable them (most sites do not use them).

Disable panel icons:Wordpress comes with a library of icons that will load a Dashicon resource on the front end, which is not used in most cases and is recommended to be disabled. There are very few plugins that use it, for exampleVariation Swatches for WooCommerceIn this case, it cannot be disabled.

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.

Note: Currently (2023.01.15) the Astra Pro fixed header feature uses "jQuery Migrate", so if you have fixed header enabled you cannot disable "jQuery Migrate". Or you can disable "jQuery Migrate" by manually adding JS code to implement the fixed header feature.

 

Pasted 11

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.

image 3

Pasted 116

Password Protect WordPress plugin requires the use of REST API in the front-end, you 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.

If you are the same as we mentioned in this article, theBeat Captcha! Best WordPress spam comment blocking method - fast and high blocking rate》, if you need to set URL traps to block bot spam comments, don't disable this feature.

 

Pasted 71

Remove Global Styles.If you don't use the two-color filter feature of the Gutenberg editor, disable this and you can reduce more than 300 lines of code. Most people don't use this and it is recommended to disable it.

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".

Pasted 235

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.

 

Pasted 170

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-3ffaThe website backend login address will become xxx.com/dsdg-3ffa/. Note the new login address after modification!

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.

Pasted 159

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.

 

Pasted 15

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!

Pasted 16

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" widgetsPasted 54production, you can also use the same method to display the product (not show the price).

Pasted 49

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.

Pasted 17

Open Enable Script Manager and 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.

Pasted 103

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.

Pasted 104

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.

Pasted 105

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. 

Pasted 21

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

 

Pasted 22

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.

Pasted 23

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';
});

 

Pasted 20

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.

 

Pasted 43

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.

Pasted 27

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.

Pasted 236

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.

Pasted 42

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 ↓.

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.

Pasted 73

 

Pasted 28

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.

image 2

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.

Pasted 30

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.

image

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 Pasted 32 You can view what external resources are available on the current page. Just enter the external resource URL prefix into the prefetch box.

Pasted 31

 

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↓

Pasted 47

After using delayed loading↓

Pasted 48

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.

Pasted 34

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!

Pasted 33

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.

Pasted 171

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.

Pasted 22

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.

Pasted 35

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.

Pasted 36

 

Pasted 49

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.

Pasted 37

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.

Pasted 44

Successfully replaced the URL↓

Pasted 45

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.

Pasted 46

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.

Pasted 80

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.

Pasted 79

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

Pasted 47

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

Pasted 48

Plugin settings

Pasted 13

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.

Pasted 15

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.

Pasted 16

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

Pasted 17

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

Pasted 18

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.

Pasted 19

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

 

Database Settings

Pasted 21 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.

Pasted 49

 

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, enable the script manager in Assets settings and click Save. You can't close the script manager after disabling the resource, otherwise the disable will be disabled.

Pasted 17

Once enabled, "Script Manager" will appear at the top of the background when editing articles, pages or products, and you will enter the script management interface of the page you are editing after clicking it.Pasted 20

2- You can also click on the "Script Manager" ↓ in the list of articles, products and pages to attract content.Script management interface.

image 1

3- or inFront EndPage URL followed by/?perfmattersYou 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.

If you need to access some pages with ? script manager for pages with a question mark URL suffix, you can add the URL followed by&perfmattersFor example, to access the search results page Script Manager can visit the URLs https://xxx.com/?s=&perfmatters and https://xxx.com改成你们搜索界面网址.

Pasted 81

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

Pasted 82

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

perfmatters 2124

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 and JSThe ability to click to seeMU mode detailed explanation and use of tutorial. This feature is not recommended for newcomers.

Pasted 223

 

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

Pasted 198

1: Article detail page.
2: General pages, also known as backend "pages" Pasted 199 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 pages.
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 inAllDisable resources on the front-end page, and check "Everywhere" directly as shown below.

Pasted 188

 

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.

Pasted 196

 

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.).

Pasted 191

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.

For example, the following Regex input/\/\?s=/indicatesalsoLoad this resource on the search results page. Learn aboutHow to use and write Regex.

Pasted 195

 

Note: Search result pages created with elementor require the use of Archive Posts. Pasted 193 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.

Pasted 194

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 Optimization Tutorial

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.

Pasted 165

Pasted 220

Pasted 222

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.

Do not buy the tutorial before it is finished! If you buy can only see part of the content first, to be perfected before the complete content, do not accept a refund.

This content is viewed at the price of99yuan (20% off for VIP, free for lifetime VIP), please first
All paid content on this page can be viewed/downloaded forever after purchase

 

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.

End

Article out of date? Have a better opinion? Have a question? Please leave your comments below and we will follow up.

Recommended Articles.
Comments :

7 thoughts on “超详细全面Perfmatters设置使用教程, 分享优化思路和排除JS列表”

  1. I have been hovering between caching and plug-in optimization 1. Caching can certainly improve the speed of subsequent visits (but the first load is definitely slower) 2. plug-in optimization code structure (with plug-in enabled) optimized, and then cached, the user access to enhance the not a grade, brought about by other problems, each dynamic query will be slower than not enable the plug-in, do not enable (800ms) Enable (2 + s) because my The understanding is that wp calls the interface once, the plug-in will have to perform the interception filter once. Comprehensive above, the rating and comprehensive speed should not be absolute, the above is my personal understanding, if there is a better solution, welcome to discuss!

    1. Caching and optimizing resource loading is a bit difficult, need to have some experience.1-enable the pre-caching function of the cache plugin on the line, the first time visitors visit is also fast.2-Perfmatters disable and delayed loading of resources, the front-end of each visit will be directly called, do not need to re-dynamic query and so on. Perfmatters on the reduction of the number of dynamic query helps, and the cache plugin is perfect! Perfmatters is helpful in reducing the number of dynamic queries and works perfectly with the caching plugin. The problem you are experiencing is most likely due to the plugin not being set up properly, not a problem with the plugin or the feature itself. Are you using wp rocket?

      1. Currently not using any other caching plugin, using cloudflare's cache. The problem I mentioned exists is that after turning on the perfmatters plugin, and turning on blocking optimize js, and turning on latency, then the speed will be slower than when it is not turned on (in the absence of any caching, including plugins, cloudflare caching, etc...) 800ms , but with optimized js turned on the rating goes up. But actually without cache it takes 2s +, to load my site for the first time.

  2. Both mobile and computer are resolved full stop. But some of the content panels are out of whack, excluding delayed loading instead, don't know how to fix it

    1. The JS code that affects the layout of the exclusion of delayed loading on the line, as for which JS affects the layout need to be your own investigation

  3. tranquility yields transcendence (idiom); quiet life of profound study

    It's exactly what you did here, and it ended up being only 85 on the mobile side

    1. It's good to have 85 points on the mobile side, and it's a master if you can get 90 points. Each step to look again, optimized in place can be on 90

发表评论

The email address will not be disclosed, and the URL needs to be removed from https://前缀 for insertion.

Chat
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Have no account? Forgot password?
Purchase Tips

To purchase, please click on the top right corner of the avatar to register/login first, after logging in, if it shows no login status please.