LatestPerfmattersDownload. WordPress is the world's leading and most popular content management system (CMS). It currently powers over 43% websites on the Internet and continues to gain more market share year after year.
While WordPress is very popular, there are performance costs associated with using it if you don't know what you're doing. Originally WordPress was primarily a blogging platform. But as more features have been added over the years, it has evolved into much more than that. The problem now is that there are so many different configurations and options that WordPress can run slowly if not properly set up or optimized.
Perfmatters (PM for short) is one of the powerful and most effective asset cleanup plugins for WordPress, the other isAsset CleanUp Pro. We have installed and compared these 2 plug-ins, they are similar in function to about 85%, Perfmatters is more powerful and accelerates well, we recommend using it.
Asset CleanUp Pro (ACP) is also highly visible, although not as comprehensive as PM, but more powerful than PM in terms of disabling resources and CSS optimization.
The 2 plugins are not good or bad, they are excellent, it depends on the purpose and method of use. If used with plug-ins like Wp Rocket, which is mainly used to disable unnecessary assets and optimize CSS, we recommend using ACP, which is more powerful. Other cases choose PM plug-in can bring better results to the site.
Perfmatters is a lightweight plugin, the installation package size is only 1/3 of Asset CleanUp, which has a much smaller impact on website performance. We often browse overseas bloggers' websites and find that most bloggers recommend PM plug-in. Because it is more comprehensive (there are many features and Wp Rocket duplication), more powerful, UI design is more beautiful, easier to set up. It can be said that Perfmatters ≈ Asset CleanUp Pro + Wp Rocket, and the following speed test site is optimized with Perfmatters.
Mobile speed test results↓
Computer speed test results↓
PM powerful features.
- Disable Heartbeat and use it only when editing articles, pages, products.
- Disabling unnecessary code.
- Disabling unnecessary WordPress features.
- Modification of the login back office login address.
- Pre-addable + exclude delayed loading of the first N images on the first screen.
- Delayed loadingBackground images(small rockets cannot do that).
- Locally hosted Google Fonts.
- Linking to Google Analytics and the possibility to choose the type/volume of code.
- Generate critical CSS, delay loading JS.
Recommendations andWp Rocket cache plugin (click to download page)PM is responsible for disabling unnecessary CSS/JS and functions, while Wp Rocket is responsible for caching, generating critical CSS, delaying/asynchronous JS loading, etc. Note: When using the 2 together duplicate features can only be enabled in one of the plugins, if enabled at the same time there will be conflicts.
What is GPL plugin
Perfmatters is a GPL licensed product and is safe and legal. Click to learn what isGPL AgreementClick to learnWordPress official website about GPL. Simply put using the GPL license plugin/theme source code open source sharing, can be legally free to change, use, distribution.
Directly from foreign formal channels to buy, do not modify the source code. All plug-ins we use to build their own sites, used in a number of sites, safe, stable and reliable.
- ByVirustotal Antivirus Verification;.
- ByWordfenceSource code review.
- BySucuriSecurity antivirus scan.
General new version out within 24 hours of this site will be updated, then please visit this page directly to download the new version of the installation package upload update, the product title will be written on the latest version number. Can only be updated by uploading the installation package, mind not to shoot, if you want to update online please support the original version to go to the official website of the plug-in to buy.
Perfmatters Download Terms of Purchase
This site plug-in purchased from foreign sites, the purchase price is4.99 USD/pcIt is valid for 2 years. Diamo unified selling price of 19 yuan / piece, valid for life, and spend a lot of energy to create the use of tutorials also provide manual question and answer service, absolutely worth the money. The plug-in is only for learning and exchange research, virtual products are reproducible, once sold no refund, please move to the detailsTerms of Service.
Diamo for the purchase of users to provide after-sales service, plug-in use any questions please leave a message in the comments below, there will be answers to questions.
Installation method 1: Upload and install
Find and click on "Plugins" > "Install Plugins" in the left menu bar of the website background, then click on "Upload Plugin" in the upper left corner, upload the downloaded zip installation package and click on "Install Now", after installation, click"Enable Plugin"Complete the installation.
Installation method 2.FTP installation
Unzip the plug-in package, put the unzippedFoldersUpload it to the plugins directory (xxx.com/wp-content/plugins).
Find and click on "Plugins" > "Installed Plugins" in the left menu bar of the website background, find the plugin in the list of plugins, and click "Enable".
Perfmatters setup tutorial
This setting is very important and a bit complicated, the effect is significantly improved, look carefully.
Go to the General Settings screen.
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.
Note: Every 10 or so disabled to the foreground to refresh each page to see if the display is normal, if the display is abnormal to disable one by one to troubleshoot the problem.
Removal of jQuery migration.The term "jQuery migration" is actually "jQuery Migrate", which is difficult to understand when translated into Chinese. The purpose of "jQuery Migrate" is to improve the compatibility of high-level and low-level versions of code.
For example, if you've been using Astra Pro since '21, upgrading to the latest version will require this "jQuery Migrate" to enable some content migration. Disabling this will cause the headers created by Astra Pro to display incorrectly. If you've only been using Astra Pro since '22, disabling this will be fine.
How do you know if your site is using "jQuery Migrate"? Inside the many plugins/themes we've used, only a few like Astra Pro (Old to New) require this. We recommend disabling it first, then refreshing each page in the frontend to see if any errors appear. If it's right, just disable it if there is an error.
Remove comment.Removing comments from articles will result in visitors being unable to comment and is not recommended to be disabled.
URL for removing comments.The URL input box inside the article comment will disappear after removal, and visitors will not be able to enter their website URLs to bind the avatar and name of the comment. It is recommended to disable 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.
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.Same as Wp Rocket'sHeartbeat control functionAs well, it is recommended to select "Allow use only when editing posts/pages". This will greatly reduce CPU usage and a large number of PHP calls, and reduce the burden on the server.
What Heartbeat does: It provides the ability to automatically save articles periodically when you create/edit them from the editor. If you are editing an article/product, other logins who edit the article/product at the same time will be prompted that xxx is editing it.
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.Set the backstage login address, it is recommended to set to increase the security of the site. WordPress default backstage login address is unified as xxx.com/wp-admin, because it is easy to be robot advanced. Here the input content can replace the URL suffix "wp-admin".
For example, if you enter dsdg-3ffa, the website backend login address will become xxx.com/dsdg-3ffa.Note the new login address after modification! Lest you forget your login address and can't get into the site.
If you do forget the login address, go to the FTP, the Conent folder, find the folder perfmatters and rename it toperfmatters#. This will disable the perfmatters plugin so that the new login address will be disabled and you can log in using the old login address xxx.com/wp-admin. Once logged in, go to the list of plugins and tap Activate perfmatters to re-enable the plugin.
If it is an e-commerce site, do not disable all! If it is a 2B foreign trade website without online shopping function, disable the red box that 3.
Disable script.After disabling it, all pages except those pages like shopping cart, checkout page, personal account page, product list page, store page, product detail page, product tab page will remove several Woocommerce codes in the picture below, greatly improving the page loading speed!
Note: The front page will also disable these codes making it impossible to insert products on the front page, in which case you can use Elementor's "Picture frames"Widget insert product, widget picture with product picture, title with product title, just insert product link at the link.
For example, in the figure below weHome Articles sectionIn fact, it uses 3 "image frame" widgets Do the same, use it to make products.
If you don't understand this method and you must insert products on the front page, thenDo 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.
This is the most important feature, but also the most complex, the most troublesome, speed improvement mainly depends on it. Look carefully and carefully.
Open Enable Script Manager and disable useless CSS/JS.
The problem is that the front JS resources may not be important, and turning on asynchronous loading can save queuing time to load important resources directly.
Include jQuery.Don't enable it. This is meant to load jQuery asynchronously at the same time. If you turn on this feature the site is basically bound to go wrong.
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 these 4 resources are loaded asynchronously it will cause the frontend to report an error.Format according to the chart, one line at a time!
jquery.min.js hooks.min.js i18n.min.js lazyload.min.js
- Minimizing/reducing main thread work.
- Reduction of total blocking time.
- Reducing interaction time.
- First contentful paint.
- Other core network vitality factors.
Defer is to execute JS immediately after loading, Delay is to delay the execution of JS after loading, so Delay has a greater speed improvement (save execution time), but not good enough compatibility, because some functions and styles need to be executed after some JS to take effect. Therefore, enabling Delay will in most cases lead to errors in page functionality and display, and the solution is to exclude the corresponding JS from being delayed in loading.
What JS should be excluded from being loaded late? Here's the difference between a rookie and an expert, and here's the difference between caching plugin compatibility and speed improvement. This is a bit more complicated, please move toPerfmatters Tutorial".
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 7 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 time value of 7 seconds, you can useperfmatters_delay_js_timeoutfilter, we recommend adjusting it to 5 or 6 seconds.
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.
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.
Wp Rocket's key CSS is inline and cannot select File, so we choose to use Perfmatter to generate the key CSS. there is one thing to say, Wp Rocket's key CSS is a bit more precise.
Stylesheet Behavior.The "Used CSS Method" option above is for how to load critical CSS, and this option is for how to load Unused CSS.
It is recommended to choose Delay, which will delay loading useless CSS until the user interacts with it, and is the fastest, but it is less compatible with delayed loading JS. On the contrary, Async is more compatible and slightly less speedy. The official recommendation is to give priority to Delay, and then exclude delayed loading or change to Async if something goes wrong.
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.
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.
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 this button to regenerate the key CSS.
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.
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).
The problem is that this feature will increase the burden on the server, because visitors will start loading when they slide their mouse over, which will cause the server to read frequently and greatly increase the burden on the server. If you have a high server configuration and not many visitors, you can open this feature. Otherwise, it is better not to open, we do not open this function of the site.
Preload. Preload can be set to pre-load critical resources to speed up the page display. The function is the same as Preload Critical Images below, but Preload can not only preload photos, or preload CSS, JS, etc.
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.
Preload Critical Images.Preload key images. Will give priority to loading the top image of the page (will not preload SVG images and icon icons) to speed up the display of images, it is generally recommended to choose 2 or 3, choose too much will be stuck.
Note: The multilingual Jpg and Png format flags inside the navigation bar will also be preloaded and counted inside the preloaded quantity.
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 first. 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 page loading time.
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.
In fact, if the site speed itself is well optimized, while controlling the number and size of images on the page + compressing images + using CDN to load images, even if there is no delay in loading images on the page speed is not much impact. On the contrary, not delayed loading images can be displayed as soon as possible, so we recommend that the page with few images is not delayed loading.
Some people will say that too many images affect the speed, and yes, the prerequisite is too many images. We recommend that if the page does not have many images, set the entire page image exclusion delayed loading. If it is a page with many pictures like article detail page, product detail page, it is recommended to use delayed loading.
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!
Threshold.How much distance from the visual area to start loading the photo, the official recommendation is to enter 600px. above analysis of ideas to delay the loading of the image behind, and so on the picture is about to enter the visual area to start loading the display picture. Here is to set the distance from the visual area is less than how much distance to start loading pictures.
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 autoplay+infinite loop slideshow (banner and such), if your site does not have an autoplay+infinite loop scrolling slideshow and such elements.orDo not turn on this feature if the images of these elements exclude delayed loading. Instead, turn it on.
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 imagesRotationand wocommerce images mouse-overToggle display of imagesThere are conflicting functions, so if the site has problems displaying this type of image, turn off the Fade In function or exclude the delayed loading of the corresponding image (page).
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.
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.
After opening it, it will automatically download Google fonts to local, and then locally host Google fonts. If you have used AWS, Tencent Cloud CDN or other CDNs that will change the URL of the resource, enter the CDN domain name into it, paying attention to the format.https://cdn.xxx.com . Finally, remember to click "Clear Local Fonts" to refresh the fonts.
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.
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.
Click "Tools" in the upper right corner to enter the tool 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.
Other functions are easy to understand at a glance, so no more explanation here.
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.
Using the tutorial is more complicated, we put inThe ultimate WordPress speed optimization tutorial, opening pages in seconds! Optimization ideas + methods + tools.