The latest Wp Rocket setup tutorials, in-depth and comprehensive analysis of the meaning of each setting, sharing optimization ideas, to help you find the most suitable settings for your site. Joking aside: in the network can not find a clear explanation of the dry setup tutorials, are relocated, the picture shows the plug-in version number of the old. Refuse to carry, net net from small Di do.
Why Optimize WordPress Website Speed?
When it comes to user experience, speed is critical. AConsumer Researchsuggests that the stress response to a delay in movement speed is similar to watching a horror movie or solving a math problem, and is more stressful than waiting in line at a retail checkout.
Speed is the key to winning, details:https://web.dev/why-speed-mattersThe
Pinterest reduced perceived wait times by 401 TP3T and increased search engine traffic and registrations by 151 TP3T directly.
COOK reduced average page load time by 850 milliseconds, resulting in a 71 TP3T increase in conversions, a 71 TP3T decrease in bounce rate, and a 101 TP3T increase in page volume visits per visitor.
Also slowness can affect crawlers such as Google crawling data, resulting in slow or even no content inclusion/update/inclusion on the site. It can also lead to failing mobile device suitability tests.
WordPress each plugin in their own way, the quality of the code varies, if you do not carry out additional optimization of the site speed will not be very fast. wp Rocket (hereinafter referred to as thelittle rocket) is the #1 Wordpress caching plugin, with significant speed improvements, ease of use, and great compatibility.
We have installed Little Rocket for all our clients' websites, and it has been working well with stable use. Acceleration effect than its good plug-in settings are too complex, compatibility is not good, easy to problem. Setting than it is simple, good compatibility acceleration effect is not as good as it.
And it is powerful, a plug-in top 3 plug-ins (heartbeat detection, database optimization, CDN integration, video auto-generated cover image, etc.), recommended.
There is no free version of Wp Rocket, it costs $49/year on the official website. Diamo has GPL version of Wp Rocket to download, safe, reliable, unlimited sites, permanent updates, I'm using it myself, for more information, please go to☞ The
Wp Rocket Setup Tutorial
There are many WordPress plugins and many of them have the same functionality. A function can only be enabled in one of the plug-ins, if enabled at the same time in several plug-ins are likely to conflict, out of the question. For example, Wp Rocket's "Delete Unused CSS" function and Perfmatters "Delete Unused CSS" function conflict, you can only use one of them.
Note: The following recommendations do not take into account the duplication of functionality with other plug-ins. At the bottom of this article with other plug-ins compatible settings recommendations, please according to their own situation for the appropriate settings.
Go to the setup tutorial below.
After installing the plugin this box will pop up at the top, click "No thanks".
(computing) cache
Page caching is enabled by default, if you want to disable page caching you need to go to the Little Rocket website separately.Installation of plug-insDisable. Mobile caching is also enabled by default, to disable mobile caching or for more details on mobile caching, check out thethis articleThe
File Optimization
These are the 2 most important features of Wp Rocket, and also the 2 features that will improve the speed of your website the most, look carefully.
Compress CSS files:It is recommended to enable it to remove spaces and comments in CSS files to reduce the file size. If you use Cloudflare or other CDN with CSS/JS/HTML compression function, it is recommended to enable the corresponding function on the CDN and disable the corresponding function of the small rocket, which can reduce the burden on the server.
CSS delivery optimization:This must be turned on and has 2 modes. You can eliminatePageSpeed, Google's speed measurement tool中的“移除阻塞渲染的资源”警告，对减少首次内容绘制 (FCP)、最大内容绘制 (LCP) 和交互时间 (TTI) 产生巨大影响。
Tip: Except for the official version, all other versions (including the GPL version we sell) can not use the function of deleting unused CSS, because this function uses the Wp Rocket online server to complete, and need to validate the License.PerfmattersRemove unused key CSS for better results!
If it's the GPL version (downloaded from this site) you can only select "Loading CSS files asynchronously", it also has the best compatibility for the vast majority of people. If it's an official version of the official wp rocket purchased and you know CSS well, you can choose "Remove unused CSS"Try. If you can't get the site to work, change your choice."Loading CSS files asynchronously".
A page has a lot of CSS code, some CSS is useless CSS and will not affect the content and functionality of the page, some CSS will affect the first screen to display the content is very important, some CSS affects the page to display the content but do not need to load the first time. Many times plugins and themes add extra styles to some pages that may not be needed. This can lead to a lot of unused CSS, which can slow down a WordPress site.
CSS delivery optimizationwhich, when turned on, prioritizes the loading of key CSS that affects the content and page layout of the first screen.delayed loading(or doesn't load) useless CSS, thus greatly saving time and speeding up the page display."Remove unused CSS" It removes useless CSS code, increases and reduces the size of CSS, which has the best acceleration effect but the worst compatibility (robots may delete useful code by mistake).The
"Loading CSS files asynchronously"The acceleration effect is also very good, compatibility is much better, we have used in many sites, basically no error. If you enable the first screen of the page some of the content display process "blinking" or display out slower, click to viewFOUC solutionsThe
JavaScript Delayed Loading
Compress JS files:marry sb. (of woman)Deleting CSS filesIt is recommended to enable it. If you use Cloudflare or other CDNs with CSS/JS/HTML compression, it is recommended that you enable this feature on the CDN and disable Little Rocket, so as to reduce the burden on the server.
Merge JavaScript files:clotureThemarry sb. (of woman)Merging CSS filesThe principle is the same. Now WordPress is basically https 2, merging resources does not help speed up, may also reduce the speed of negative optimization.
JavaScript asynchronous loading:Enable. It can improve loading speed and eliminatePageSpeed, Google's speed measurement toolThe "Remove blocking resources" warning in the "Remove blocking resources" dialog. When turned on, the JS will be moved to the bottom of the header and the HTML will be parsed while the JS is being downloaded, but it will be executed after the JS is downloaded before the HTML is loaded.
If you are using Cloudflare, remember to turn off the "Rocket Loader" in CF's "Speed" > "Optimization" settings, as there is a high probability that it will cause errors on your site.
JavaScript delayed execution:Turn it on to boost loading speeds and likewise eliminate theGoogle Speed Measurement Toolin the "Remove render-blocking resources" warning. When enabled, the JS will be downloaded while the HTML is being parsed, and will not be loaded until the HTML has been parsed, and will not be loaded until the user interacts with it. This is a great way to speed up Google Lighthouse page drawing, and delayed loading is better than asynchronous loading for speed, but less compatible.
The following "One-click exclusions" is a new feature in version 3.13, you can choose to exclude specific features, plug-ins, themes, all the JS code, it is very convenient, very suitable for newcomers to the use of white. Check the exclusions as needed, the more exclusions, the slower the site speed oh.
Copy and paste the suggested code in the red box into the above box, you can exclude some key JS from being misclassified as delayed loading to avoid errors in website functions. The first line of code excludes jQuery files and their filename variants, the second line of code excludes some inline scripts, the third line of code excludes all JS in the /wp-content and /wp-includes folders, for more details, please clickView DetailsThe
After adding these 3 lines of code, most of the JS will not be delayed loading, the acceleration effect is greatly reduced. The best way is to delay loading JS one by one to test which JS can be delayed. However, this is very time-consuming effort, we will get a safe delay list out for your reference.
It is possible to use both delayed execution and asynchronous loading, and will prioritize the use of delayed execution for JS, followed by asynchronous loading.
Detailed JS asynchronous (defer/async) and delayed loading (delay) difference
A page consists of CSS, JS, and HTML code, which is loaded by the browser in top-to-bottom order; HTML is the framework of the page, CSS defines the look-and-feel styles, and JS (many of which are located at the top of the page) is responsible for functionality. In order for the page to display faster, HTML and CSS need to be loaded first, while JS generally doesn't help the appearance of the page and slows down the loading of the page.
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 is a waste of time to wait for JS to finish loading and executing before loading html.
Below is the page loading time progress chart (from left to right), green represents html loading time, gray represents JS download + execution time (blue is download, red is execution). It can be seen that when encountering JS loading and execution, thehtml pause loadingThe
Defer is also called Async, which means asynchronous loading. Asynchronous loading takes the JSfileThe position is moved below the main html (waterfall) in the JSDownloading(blue below) does not pause html loading, theLoad both at the same time, thus improving loading speed.
However, JS will be executed immediately after loading (red below), html download will be interrupted during JS execution (gray below), until JS execution is complete and then continue to load html ↓, the speed still has an impact. Note: Defer will not load in order, which JS is loaded first will be executed first.
Delay is delayed loading, while JS is downloading (blue color below), it continues to load html (without interrupting), and waits until all html is loaded before it starts executing JS (red color below). Unlike asynchronous loading, delayed loading will not interrupt html loading during JS execution because it is faster.
JS mainly represents functionality, only a few JS will affect the page content display. The code tends to be inter-dependent and entangled, sometimes requiringprior executionCertain JS before the associated content/functions continue to display/execute normally. Deferred JS is executed last, which disrupts the dependencies between codes, so it may lead to abnormal page display and functionality. Asynchronous JS has better compatibility because it executes immediately after loading.
Delayed JS is just too much of a speed boost, and can greatly improve the Google speed test mobile score, so it must be used. As long as the exclusion of some key JS is delayed loading can solve the site display and functionality of abnormal problems. Which JS to exclude need to be based on the use of the theme, plug-ins and page production methods to decide, here can not provide a unified exclusion options.
Diarmo launchesWordPress Website Speed Optimization ServicesIt helps you to delete/disable useless JS and CSS codes on your website, delay non-critical JS loading, compress images, configure CDN acceleration, etc., which greatly improves the speed of your website. Google speed test computer terminal and cell phone terminal score can go to 95-100 points, open the page in seconds.
media, esp. news media
It is recommended to set ↓ as shown.
Lazy loading:Also called delayed loading, it is recommended to enable it. It can delay loading images/videos until they enter or are about to enter the visual area, so as to improve the page loading speed. It is recommended to enable "Load for images", "Enable for CSS background images", "Frames & videos", "Replace Youtube frames with preview images" for best results.
By delaying the loading of images and videos, we reduce initial page load time, initial page weight, and system resource usage, all of which have a positive impact on performance. Assuming that there are 10 images on the page, totaling 2MB, if all 2MB of images had to be downloaded at once, this would impact overall load time and perceived performance. This will especially affect mobile devices with more limited processing power and typically slower internet connections. Details. https://web.dev/lazy-loadingThe
Enable for CSS background images:Delayed loading of background images is recommended to be turned on. If it is a top banner background image, you need to exclude delayed loading.
Replace the Youtube frame with a preview image:Little Rocket will automatically generate video cover images for Youtube videos, and only load the cover image when loading the page, and only start loading the video content after the visitor clicks to play the video, which greatly improves the page loading speed.
Images on the first screen of the page (logo, banner, etc.) should be prioritized for immediate loading and should not be delayed. Put the name of the first screen image, or the css where it is located into the box below to exclude delayed loading, pay attention to the format.
Add the missing image frame height attribute:It is recommended to enable it. Will add width and height attributes inside the code to optimize the page display.
When a browser displays a web page, it first loads the HTML and waits for the images to download. If the width and height values are set, the browser can reserve the required space for the images on the page.
When no space is reserved for an image, once the image is downloaded, the browser will move the content to fit the image. This layout shift can lead to a poor user experience. This feature helps address the following suggestions from GTmetrix and PageSpeed:
1- Use clear width and height on image elements;
2- Cumulative layout offset.
preloaded
Suggested settings as shown
Turn on pre-caching:Enable. Pre-caching is to pre-cache the content of the page to the browser, and the speed of the first time users will be very fast. 3.12.0 version onwards the preload function is improved, can preload more pages, so the burden on the CPU is also much heavier, small servers will be jammed. ClickView SolutionsThe
When you turn it on, an exclude box will appear underneath, enter the content that you don't want to be pre-cached, it can save server resources. For example, in the following picture, Diamo excludes pages starting with "profile" from being preloaded.
Little Rocket does not preload pagination by default, if you want to preload it add the following code to. "Appearance" > "Theme File Editor" > "functions.php"Just go to the bottom.The
//让wp-rocket预加载分页，默认情况不预加载function enable_preload_for_pagination( $regexes ){global $wp_rewrite;$pagination_regex = "/$wp_rewrite->pagination_base/\d+";$exluded_urls = [$pagination_regex,];$regexes = array_diff( $regexes, $exluded_urls);return $regexes;}add_filter( 'rocket_preload_exclude_urls', 'enable_preload_for_pagination');Full Selection Codemake a copy of
Link prefetch:Link prefetching means that when the user's mouse passes over a link, the corresponding web page will be pre-downloaded, so when the user clicks on the link, he will feel that the loading speed is very fast. This will speed up the page loading a little bit, but the pre-download will increase the burden of the server and broadband when the mouse passes over the link regardless of whether it is clicked or not. Weighing the pros and cons, we think it's better not to turn it on. If your server performance and bandwidth are good, you can turn it on.
DNS Pre-Read:This function pre-processes theExternal resources(Google fonts, Youtube videos, etc.) DNS resolution can slightly improve load times.
When your site loads any content hosted on a domain other than yours, your visitor's browser must retrieve the file from that other domain. Part of this process is connecting to the domain's browser, which is called DNS resolution.DNS prefetching tells the browser to make this connection before the file is needed, so that it's already complete when the file is requested. This can improve your load time slightly because the DNS resolution is already handled when the external resource is requested.
Putting the website to useExternal resourcesThe URL is entered in the box, note the format // xxx.com, one URL per line.
How to check which external resources are used on my website? Open your website page with Google/edge browser, press F12 to bring up the developer tools, click "Network", press F5 to refresh the page and the following will start to list all the resources loaded on the page.
Click on the name of the resource on the left, the URL of the resource will be displayed on the right, press the down arrow ↓ button on your keyboard to switch to the next URL. Put allExternal resourcesURLs are filled in the box above.Pay attention to the formatFill in // xxx.com only, one line for one URL.
Or click "Source Code" to view all external resource URLs.
Preloaded fonts:Typically fonts are referenced from CSS files, which causes the browser to take some time before loading the fonts. The preload fonts feature will allow the browser to start downloading fonts earlier thus improving load times and perceived performance.
Attention:This feature only works for locally hosted fonts (the font URL is the site URL), does not work for system fonts (no URL) and Google fonts (font URL is Google URL). If you use Google fonts, it is recommended to use locally hosted acceleration, the specific method to check theWordPress Speed OptimizationThe
Fill in the box with the font URL suffix, and note that the URL format starts from "/wp-content". The font URL can be viewed according to the aboveDNS pre-readingFind external resource URLs.
Advanced Rules
Cache validity:It is recommended to set it to 24 hours, if the website has hundreds of pages or the configuration is very low, set it to 48 or 72 hours. If "Pre-cache" is enabled, the cache will be rebuilt automatically after the set time expires. Click "Save Changes" to continue with other settings.
Never Cache (URL):Enter a partial path to exclude URLs from being cached, using wildcards (. *). Custom Login/Logout pages, Wishlist pages, and Personal Center pages definitely do not want to be cached. If you have any of the above pages, enter the partial path to the page URL in the box. If you are using a CDN like Cloudflare, you also need to exclude the corresponding URLs from the CDN.
/wishlist/ 表示不缓存xxx.com/wishlist/ 页面；
/wp-admin/(.*) 表示不缓存所有网址以/wp-admin/开头的页面(所有网站后台页面)；
/wishlist/(.*) 表示不缓存所有网址以/wishlist/开头的页面；
Woocommerce Shopping Cart, My Account, and Checkout pages are automatically recognized by Little Rocket to exclude from caching without adding.
You can also edit the corresponding page, check the "Never cache this page" as shown in the figure below, and the corresponding URL will be added to the exclude box automatically.
Never Cache (Cookies):Exclude caching of certain cookies if the login page is not cached and the site has a member login feature. It is recommended to exclude cachingwordpress_logged_in_ as well as wordpress_sec_The
Never Cache (User Agents):Exclude certain user agents from caching pages.
Always clear the following URL cache: Automatically clean up the cache of the filled-in page whenever new content is published, usually by filling in the article listing page URL, and publishing/new articles will automatically update the content of the listing page.
Caching query strings: price filter mainly for caching search results pages + e-commerce sites.
comprehensive database
The process of using the website will generate a lot of temporary data and useless data, which need to be cleaned up regularly, otherwise it will affect the performance of the website.
Revised version:The old version of the post that was saved when you clicked "Publish".
Automatic drafts:Automatically saves a draft of the article/product content being edited every few minutes.
Recycle Bin Article:Deleted posts and drafts.
Spam comments:Comments marked as spam.
Recycle Bin Comments:Deleted comment.
All temporary data:Expired temporary data.
Optimize the data table:Optimize database tables to run more efficiently.
Automatically clean up scheduled tasks:How often do you want WP Rocket to automatically clean up the database.
CDN
When enabled it will be:
1- Rewrite all URLs of assets (static files such as images, CSS/JS files) present in the HTML of the page.
2- Add preconnect resource hints for your CDN CNAME with adns-prefetch as a fallback.
Enable CDN:If you use CDN, check the box to enable it, if not, don't enable it. After enabling CDN CNAME, fill in the CDN URL, note that the format only need to enter cdn.example.com.apply toSelect all files. If using Cloudflare it doesn't need to be enabled here because it's not really a CDN and doesn't change the file url.
The CDN feature can be enabled only in one of the plugins, do not enable the same feature in several plugins at the same time.
Enabling the CDN feature rewrites the URL prefixes of the resources that have been deposited to the CDN in the page source proxy to the CDN CNAME. e.g., our URL is https://diiamo.cn and one of the image URLs is https://diiamo.cn/xxx/abc.jpg. Our CDN URLs arecdn.diiamo.cn, after enabling this function, the URL of the image in the source code of the page is rewritten as https://cdn.diiamo.cn/xxx/abc.jpg.
This way, when the customer visits the page, the image will be loaded from inside the cdn (instead of from the source server), thus greatly reducing the burden on the server, while improving the speed of resource loading.
Once enabled you need to click on the top toolbar's "pre-cache", to cache the page before you can see the source code inside the file url to replace the CDN url, click theView DetailsThe
Exclude files from the CDN:Enter the file URL (pay attention to the format, as per the image) and the visitor will load the file directly from the source server instead of the CDN. This feature is generally used to solve the problem that some resources do not allow cross-domain display and need to be read from the source server. In most cases, this feature is not necessary and is ignored.
Heartbeat monitoring
It is recommended to set it according to the picture, if the function is enabled in perfmatters and so on, don't enable it here. Setting principle: the same function is enabled only in one plugin.
What does the WordPress Heartbeat API do?
1- Display real-time plugin notifications;
2- The list page shows that other users are editing an article/product at this time;
3- Shows when a user is locked out due to idleness;
4- Create regular auto-saves, drafts and revisions;
5- Display real-time sales data when using the e-commerce plugin.
The Heartbeat API can consume server resources and cause CPU overload, so it is recommended to disable it or at least limit its frequency.
Extended functionality
Client-side caching: Enabling this will enable caching for logged in users. Don't turn it on if it is a 2B or blog type website without member function. If there is a member login function, such as e-commerce sites, you can turn on this feature to greatly improve the access speed of logged-in users. However, enabling this feature will lead to abnormalities in many functions of the website, which need to be adjusted, so it is not recommended to enable this feature for beginners.
Varnish: If your host/server is using Varnish cache turn it on, the automatic cache clearing will clean the Varnish cache synchronously, otherwise disable it. Only a few hosts like Cloudways have Varnish cache enabled, if you don't know if your server has it enabled, it is recommended to disable it.
WebP compatible:Disable. Whether you are generating WebP through a plugin or a CDN, there is no need to enable this feature here. If you use something like ShortPixel to generate Webp format, this feature is disabled by default and cannot be enabled.
Cloudflare: Enable Cloudflare if it is used. Cloudflare can be linked to automatically clear the Cloudflare cache when the site cache is cleared.
Sucuri:Enable the Sucuri CDN if it is used. Clearing WP Rocket's cache automatically clears Sucuri's cache, helping to keep content synchronized.
Cloudflare
If Cloudflare is enabled in Extensions, there will be an extra Cloudflare section for linking to Cloudflare.
Global API key: found in your Cloudflare dashboard.
Account Email: The email address you used to sign up for Cloudflare.
Region ID: found in your Cloudflare dashboard.
Developer model:After opening, Cloudflare cache will be temporarily disabled for 3 hours, and will be automatically closed after 3 hours to continue using Cloudflare cache. If you are modifying the page structure and content, but the foreground is not updated after refreshing, it is likely to be caused by the cache, then you should enable thedeveloper modeThe
Image Optimization
This section is to recommend their own Imagify image compression plugin, Imagify is pretty good, but not the best. We wrote an articleCompare the advantages and disadvantages of major mainstream image compression plug-insIt contains a detailed comparison between Imagify and ShortPixel, Optimole and more. Check it out if you're interested!
artifact
Exporting Configurations:: Export settings to use on multiple sites.
Importing Configurations::Import WP Rocket settings from another site.
reduction (chemistry)::If the update causes problems, you can roll back to a previous version. If something goes wrong try disabling the appropriate feature and clearing your cache to see if it comes back.
So far the Wp Rocket setup tutorial is complete, it is recommended to first clear the cache + regenerate the critical path CSS (below), after a while go to theGoogle Speed Measurement Toolor GTmetrix Take a speed test of the site to see how much it improves.
The following figure is the site in the Google speed tool test results, 0.6 seconds to load the home page, very fast! If you are not satisfied with the results of your website speed test, do not be discouraged, the use of small rockets is only one of the speed optimization, there are still picture compression, CDN use and other work to be done. Suggested to check our thisA Comprehensive Guide to WordPress Speed OptimizationArticle for more optimization.
Optimize key images
At the top of the backend, under the WP Rocket menu, there is a "Clear critical images" option, clicking it will automatically clear critical images. This is a new feature automatically enabled by WP Rocket, it will add fetchpriority="high" attribute to the first screen images, so that they will be loaded first, click on it.View DetailsThe
This helps to solve the maximum content drawing (LCP) image problem and improve page loading speed. Don't worry about it usually, it will work by itself. If other plugins have similar features (e.g. Perfmatters or Elementor Pro), it is recommended to turn them off and just use Wp Rocket's, fully automated user experience is better.
Advanced Advanced Optimization Tutorial (paid)
If you follow the above tutorials to optimize in place, the site speed should increase a lot, there may still be some places that have not been optimized in place, theGoogle speed testThe mobile score never went up. Tools are dead, websites and ideas are alive, depending on your ownStatus of the websiteTargeted optimization gives the best results.
The degree of proficiency in the use of plug-ins and their own optimization ideas also have a great impact on the acceleration effect, the tutorial contains high-level optimization ideas, optimization techniques, as well as plug-ins advanced use of the method, so that your site speed optimization effect to a new level.
daily operation
The cache will be automatically cleared after updating the post/product content normally, no need to clear it manually. If you update or delete the plugin, the top of the background will remind to refresh the cache, tap to clear the cache.
You should manually "clear the cache" in the following cases:
1- A 301 or 410 redirect was created;
2- Changes have been made to the styles in any CSS file and shrinking the CSS file or merging CSS files is active;
3- Activate, deactivate and update any plugin that displays content on the front end of the site;
4- Exclude files from delayed, LazyLoad, asynchronous loading of CSS.
5- Complete changes outside of the WordPress editor, via (s)FTP/SSH, on a server, external proxy or CDN.
Method to clear cache: Click "WP Rocket" > "Clear and pre-cache" at the top of the background of the website, if there is a multi-language, you need to choose the language to clear. If the foreground does not show the modified page content, you also need to clear the cache. If the foreground still doesn't show the updated content after clearing the cache, try clearing the memcached cache (if you have installed it), and turn on Cloudflare developer mode.
You should manually refresh the Pre-Cache in the following cases:
1- When clearing the cache manually, you should click Pre-Cache;
2- You should click Pre-Cache when the critical path generation is complete (as this will clear the cache).
Critical path CSS should be "regenerated" in the following cases:
1- Created custom CSS that affects the critical path;
2- Did some operations that would affect the CSS of the page, such as regenerating the CSS in the Elementor tool, modifying the theme appearance settings, removing/installing some plugins that would affect the CSS of the frontend, modifying the typography/adding or subtracting content in a builder such as elementor, and so on.
Enable memcached/ Redis caching
Memcached and Redis are memory-level caches that reduce the number of database reads by caching data and objects in memory. Memcached is a memory-level cache that improves access speed and reduces the load on the database, and hosts such as SiteGround come with Memcached, so you don't need to install it.
Little Rocket Cache is a disk cache that uses files to store data, and the query and write speeds are limited by the speed of the hard disk. If the number of query requests (the number of visitors) becomes large, it will reach the IO bottleneck of the hard disk, resulting in the website slowing down or even lagging. After installing Memcached, Redis can be able to cache stored in memory (read efficiency is about 40 times the hard disk), greatly improving the site's ability to withstand as well as cache data reading ability, thereby reducing the burden on the server to improve the page loading speed, very necessary!
Just enable either Redis or Memcached caching.Whichever one is enabled, you need to install the appropriate extension in the PHP admin first., it is recommended to install the OPCache extension at the same time to further increase speed. To enable Redis cachingRecommended installationRedis Obiect Cache ProPlug-ins.
SiteGround server comes with Memcached cache, no need to install it. Just use the caching plugin that comes with SG to enable and refresh Memcached cache.
How to enable Memcached caching in WordPress?
Install MemcacheD Is Your Friend plugin (compatible with PHP 7), download link. https://pan.baidu.com/diiamo Extract Code: 3ici. After installing and enabling the plugin, you can see the following message in the WordPress backend under "Tools" > "Memcached":
It is also possible to use theWPJAM BasichPlugin (compatible with PHP 8), after installation into the site file management, plugins / wpjam-basic / template / directory of the object-cache.php file to copy wp-content directory can be. This plugin can manually clean the corresponding cache but the function is too complicated you may not like.
Note: When Little Rocket cleans the cache, it will not clean Memcached and Redis cache together, so you need to clean the cache manually. It is recommended to turn on the website after it is completely built, if you modify the website frontend not to display new content, you need to additionally clean up Memcached, Redis cache. Memcached cache will be automatically cleaned up every once in a while, and restarting the server will also clean it up.
Mobile Speed Optimization
The loading time on the computer can be easily optimized to within 1 second, but the loading time on the mobile Google speed test is generally around 3.0 seconds, why?
Conditions are not always optimal for mobile devices:
1- The mobile device itself has lower performance than the desktop;
2- Slower or less reliable network on mobile;
On mobile devices, everything takes longer and is slower. AndPageSpeedThe mobile speed test is done with a very common device and a 3G network, so it's normal that the score is lower than that of the computer. Don't worry too much about the mobile score, it doesn't represent the actual speed, it's more meaningful to test the real speed with your own phone.
If you're already using a builder like Elementor to build your pages, don't be discouraged, there are still some optimizations you can make to improve the loading speed on mobile:
1- Choose a fast host, for exampleVultr (high performance version) Cloudways.
2- Try to use the theme comes with the function or handwritten CSS to create header, footer, avoid using Elementor and so on to create.
The header created using Elementor involves about 20 JS/CSS files, to quickly display the first screen content can not delay the loading of these JS, generate the keyword CSS also need to add these CSS, which leads to code bloat, loading blockage.
We put a lot of effort into optimizing the load time of the header made by Elementor, and the Google speed test mobile score can go up to about 95, with a load time hovering around 2-2.5 seconds and an interactable time of 3.6 seconds.
RecommendedAstra Pro ThemeComes with templates for article/product list pages, detail pages, which can be easily set up to customize the layout and content, etc., nice to look at and suitable for the little guy. The one that comes withPremium Starter TemplatesThe plugin can also import more than 180 Gutenberg page templates and design sections perfectly.
The header and footer of the speed test results below were created using Astra Pro, and the body of the page was created using elementor. Google speed test mobile score can go up to 99 points, load time hovering in 1.5-1.7 seconds, can interact with the time of 1.6 seconds, very fast! If you use Elementor and so on to build the header and footer is very difficult to optimize to this extent.
3- When setting "File Optimization", we suggest entering the code in the red box to exclude delayed loading of some JS to improve compatibility, but this will also lead to the normal loading of more than 20 JS, which greatly reduces the speed of the cell phone.
If you remove these 3 lines of exclusion code and only exclude the delay of a few key JS, the mobile speed test speed can be easily optimized from 3 seconds to 2 seconds, about 95 points. However, only the plug-in JS and build the site familiar with people know specifically exclude which JS. rookies get their own words is easy to get out of the problem, or pay to find someone else to optimize.
We are inThe Ultimate WordPress Speed Optimization Tutorial.This post has shared which key CSS should be delayed loading for headers and pages built by Elementor, check it out if you are interested.
If you know a little, and are not afraid to toss the suggestion to delay loading JS one by one to find out the safe JS list can be delayed to improve the speed of the site. If you use Google speed test cell phone will be prompted to avoid linking to key resources, there will be a list of several JS files, try to delay the loading will help speed up the cell phone.
4- Use Google Speed Test Toolhttps://pagespeed.web.dev Speed test, optimize according to the speed test result optimization tips on the cell phone. Delay loading some background images, use smaller size images for cell phones, preload some key image resources and so on.
5- Image optimization is a very important factor that many people overlook. Even after installing an image optimization plugin and delaying the loading of images, there is still a lot of room to optimize images.
(1) Optimole such as online compression and optimization of the image plug-ins can not be compressed optimization of the background image (image URL written in the CSS rather than HTML), you need to locally compressed and optimized and then uploaded to the site to use.
(2) Wp Rocket and other plug-ins such as delayed loading can not delay the loading of most of the background image (image URL written in the CSS rather than HTML), you need to use Optimole, Perfmatters and other plug-ins such as the delayed loading function and the background image is in the box of the Class, ID to fill in the delayed loading box in order to delay the loading.
3) Wp Rocket, Perfmatters and other plug-ins have a function to add the actual length and width dimensions to the image, which allows the loading of the image to preview the position first to avoid jitter and other situations that affect the experience. However, they don't automatically adopt the small size of the image on the mobile side, but load the original image.
The volume of a 1920px wide landscape photo on the computer side is usually around 100kb, if it is reduced to a suitable size for the cell phone side (768px wide), the volume can be reduced to less than 50kb, and the speed immediately prompts a lot. If there are 2-3 full-screen photos on the page, it can reduce the page volume by more than 100kb, which helps a lot to improve the speed!
Check out our other article for details on how to do thisThe Ultimate WordPress Speed Optimization Tutorial.The
6- If you are using Cloudflare, add the following to theSecurity > Bot innerBot Fight Mode It is recommended to turn it off. This is because it adds a JavaScript file (invisible.js) and sometimes triggers the "Reduce JavaScript execution time" warning, as well as the "Avoid long main thread tasks". This script increases CPU execution time and lowers PageSpeed Insights scores, which has a huge impact on performance.
Scrape Shield innerEmail Address Obfuscation It is also recommended to turn it off, as it also adds a JS file delaying the page load time.
If using Cloudflare, improper settings can slow things down, click to see theHow to set Cloudflare to be the fastestThe
Frequently Asked Questions and Solutions
Please make sure that the same feature is only enabled in one plugin/theme, as enabling it in more than one place at the same time will lead to conflicts.
Don't panic, calm down. First, disable the Wp Rocket plug-in (do not click into the installation mode), in the foreground, press Ctrl + F5 to force a few times to refresh the page to see if the recovery.If the page doesn't come back up, it proves that the problem isn't with the little rocketContinuedisableOther more suspicious plug-ins press Ctrl+F5 to refresh the foreground page until the problem is solved, find out the culprit plug-ins after disabling the entire plug-in or the corresponding function is good.
If the page returns to normal after disabling Wp Rocket.It's probably due to some feature of the little rocket. Use Google/Edge browser to open the page showing the error, press F12 to enter the developer tools, there should be a display error alert in the upper right corner, click on the red box that the number 13 of the error alert will pop up to indicate the resources of the error. Here you can initially determine the cause of the error.
If you can't read it or it doesn't prompt an error, please find the appropriate solution below according to the type of problem. If you haven't solved the problem after following the tutorial, feel free to leave a comment at the bottom.
1- nodefunctionalityFailures/abnormalities
Functions are basically controlled by JS (JaveScript), and it is very likely that JS is the problem.
1)Try it on the little rocket."Documentation and optimization"Closed inside the section."Delayed loading of JaveScript"function, save and clear the cache and refresh the page to see if it is restored. If restored to normal, it is proved to be an important JS file delayed loading caused by the problem.
Determine which plugin/add-on the disabled feature belongs to first, then check out this Little RocketJS Delayed Loading Exclusion Article, there are commonly used theme/plugin JS exclusion code, copy and paste the code into theDelayed loading of JaveScriptThe "Excluded JavaScript Files" text area is below the function.
If there is no corresponding plugin/theme in the article or the problem still exists after inputting the corresponding plugin/theme, it proves that the JS file causing the problem has not been excluded. In this case, you need to find all the JS files on the page about the function, one by one, enter the exclusion box to try until the page is restored.
How to view all JS files related to this feature? Open the problem page with Google/edge browser, press F12 to bring up the developer tools, click 1 "Network", then 2 "JS", press F5 to refresh the page and the following will start to list all the JS files loaded on the page.
Click 3 "Name" to arrange JS files by URL, press the down arrow ↓ button on the keyboard to switch to the next URL. By viewing the file URL to determine the JS file belongs to which plugin/theme.
If the file URL shows /wp-content/themes/, it means it is a theme file.
2)If you turn off the "Delayed loading of JaveScript"The problem is not solved, continue to close"JaveScript asynchronous loading", if the function returns to normal after closing, you need to fill the corresponding JS path of the function into the exclude box to exclude. Specific methods to viewThis article on Little Rocket. Actually andDelayed loading of JaveScriptThe exclusion idea is the same method, the difference is that the excluded files need to enter the full path (without ?ver and the path after).
If the problem is not solved by disabling the above 2 JS functions, follow the below stepsQuestion 3Proceed to turn off the corresponding CSS function.
2- Some content is shown/not shown for a long time
You may find that the content of some sections to a long time to show up, and even an open does not show the need to refresh the page to show, that is because the content involves some JS calls, the corresponding JS is delayed loading, bad network or server busy may lead to a long time to show or even do not show.
For example, the product thumbnails on the Woocommerce product detail page take a long time to display, and the Table of Contents (TOC) widget on the article page Elementor article directory (TOC) creates a directory navigation that sometimes keeps spinning around without displaying the content.
Solution: Simply add theJavaScript Delayed ExecutionSettings inside theExcluding JavaScript filesThe textboxes enter the JS name of the appropriate content to exclude and that's it. Which specific plugin themes/what code needs to be added? Please see the small rocket thisDelayed JavaScript Execution Compatibility Troubleshooting ArticlesThe
For example, check this article to find the code that affects the display of product thumbnails on the Woocommerce product details page (below). The red box indicates the purpose of the code: to load the thumbnails as soon as the page loads. Simply copy the code in the blue box into the "Excluded JavaScript Files" text area and click Save.
If you can't find the corresponding content code of the corresponding plugin/theme inside the article, you can judge from the JS name. For example, the article details page Elementor produced by the article directory (TOC) has been circling around the problem, there is no corresponding exclusion code inside the article.
We can do this by pressing 12 to go to Google Chrome Developer Tools > Web > Select JS > Search for elementor. the one in the red box is the one that controls the Table of Contents widget, as you can tell from the name table-of-contents.
Add to the Exclude box to exclude.
3- The page is displayed incorrectly
For example, icons, slideshows, sections, etc. are not displayed, or the display is disorganized, and some styles are missing. Layout is determined by the style (CSS), display problems are very likely to be CSS problems.
1)Try it on the little rocket."Documentation and optimization"Closed inside the section."CSS delivery optimization"function, save and clear the cache and refresh the page to see if it is restored. If recovered to normal may be an important CSS file asynchronous loading caused by the problem. Fill in the red box below with the CSS code related to the abnormal content to turn it into a critical CSS and prioritize loading. For details, click "More Information" in the blue box below.
2) If you turn off the "CSS delivery optimization"Function didn't solve the problem, try turning it off"Compressing CSS","Merge CSS" function until the problem is solved. See the official documentation for details on how to exclude the appropriate files.
4- Website appears FOUC without style flickering/jittering
FOUC (flash of unstyled content) is the meaning of unstyled flickering, details and solutions seeLittle Rocket's official website explains. The page starts off by loading unstyled text, images, and other elements (red boxes below) before loading the appropriate key CSS and JS (green boxes below).
This switching process causes elements to flicker, customer experience is not good. If the site uses Google fonts, at the beginning of the first load other fonts later switch to Google process may also cause FOUC. this article only explains the FOUC situation caused by the Wp Rocket solution.
Some sites appear similar to the FOUC phenomenon is because the site itself is slow, optimize the speed of FOUC naturally disappear, do not need to get this key CSS exclusion.
Using Wp Rocket causes FOUC basically because critical CSS is loaded asynchronously/delayed as non-critical CSS.Solution 1:Finding the CSS files that affect the corresponding jitter and then excluding them prevents them from being treated as unimportant CSS delayed/asynchronous loads. This method requires installing a plugin and modifying the corresponding code, check out the little rocket for detailsthis article. This method may not be well suited to the little white man.
Solution 2: Use critical path CSS alternate code.In the critical path CSS alternate code box enter the appropriate FOUC style CSS, will automatically be added to the key CSS inside. Specific methods of the small rocket official website said in detail, click on theGo to the corresponding articleThe translation is done in accordance with "Use of back-up key CSS"Section Content Operation.
It's simply a matter of entering the URL of the FOUC page that appears into that external tool that generates critical path CSS and clicking "Generate Critical Path CSS"Generate key CSS, just copy and paste all the generated CSS into the little rocket's alternate code box and tap save. Only enter the CSS generated in the first box, ignore the JS code in the second box.
5- Error regenerating critical path CSS
If an error is generated, the reason for the error will be indicated on the right.This article on Little RocketAccording to the cause of the error to find the appropriate solution. If you can not solve the problem after operating according to the article, usually network reasons (especially domestic sites) or the server is too busy to cause, change the time period and try again basically OK.
If it says "No valid stylesheets", maybe the redirection is not done properly. Open these 4 URLs (example.com instead of your URL) www.example.com, example.com, https://example.com, https://www.example.com and see if they all redirect to the same URL.
If you are not opening the same URL, you need to redirect all URLs to the same URL. There are many ways to redirect, you can use Cloudflare, Pagoda Panel, Rank Math plugin and so on to realize.
Another reason for the "No valid stylesheets" message could be that an external program to the Little Rocket program is blocked by the firewall. Think about whether you have set up a firewall, such as anti-stealing links? Turn it off, or add the 3 IPs of Little Rocket to the whitelist.This article on Little RocketCDNs and the like set up anti-theft links that will also be blocked, together with turning off or adding a whitelist.
If there is no response after clicking "Re-generate Critical Path CSS", it is because the server is busy, try again after a while.
6- After installing Little Rocket, the frontend and backend of the website become stuck and the CPU usage is too high.
If you install Wp Rocket and find that the background as well as the foreground speed is much slower, and even the page can not be opened, into the Pagoda panel to see that the operation of the clogging found that the CPU is fully loaded, the memory is basically also fully loaded, but the site does not have much access to the site also did not run a complex operation.
If the CPU is temporarily full, after a period of time to recover, may be generating key CSS, preload cache, etc., do not care, usually do not often if not necessary to manually clean the cache on the line. If it's been full for a long time, it's probably a problem with the preload function.
WP Rocket v3.12 version improved the preload function to enhance the speed, but also lead to the problem of high CPU utilization. There is a customer site is the server has been lagging, I ruled out a long time only to find that is a small rocket pre-cache loading function problem, disable after the return to normal.
Updated 2024.07.28:The preload feature caches up to 45 URLs every 60 seconds, and newer versions of WP Rocket now automatically check to see if they are putting too much pressure on the server. If it is, it will automatically slow down page preloads and reduce the number of URLs processed per batch to minimize the risk of high CPU issues.
You can also manually adjust the preloading frequency/number of URLs yourself: add the following code to "Appearance" > "Theme File Editor" > "functions.php The bottom will do."
If the problem does not improve much after adding the following code, you can continue to reduce the number of URLs and increase the other 2 values to try.
//Change the number of URLs preloaded per batch, default is 45, change to 20. function preload_batch_size( $value ) { $value = 20; return $value; }add_filter( 'rocket_preload_cache _pending_jobs_cron_rows_count', 'preload_batch_size' );// Set the desired cron interval in seconds, default 60 seconds, change to 80. function preload_cron_interval( $interval ) { $interval = 80; return $interval; }add_filter( 'rocket_preload_pending_jobs_cron_interval', 'preload_cron_interval' );// Modify the delay between requests to the same URL for the The default delay between requests is 0.5 seconds, change it to 0.6 seconds. function preload_requests_delay( $delay_between ) { $seconds = 0.6; $delay_between = $seconds * 1000000; return $delay_ between; } add_filter( 'rocket_preload_delay_between_requests','preload_requests_delay' );Full Selection Codemake a copy of
The server returns to normal after a while after adding the code, if you click on the 
Clearing the cache or generating critical CSS will temporarily fill up, and return to normal after a while when the preloading/production of critical CSS tasks are complete.
If you still get stuck even after adjusting the preload frequency. Because."Remove unused CSS"The function can also cause CPU overload ("Asynchronous loading of CSS" will not), the frequency needs to be reduced.
Wp Rocket has aOfficial PluginIt can be reduced."Remove unused CSS"Frequency, download and install it. Default is 100 URLs processed per run, adjusted to 50 after installation. required Cron interval is 60 seconds by default, adjusted to 120 seconds after installation.
It is also recommended to disable Wp_Corn in favor of Server Corn, which is helpful in reducing CPU usage by clicking on theView detailed methodThe
Tip: There are many reasons why a server can get stuck, and it's not necessarily a small rocket problem. One of our client's website is using Vultr server (1H2G), using Elementor+Woocommerce+Wp Rocket, with more than 600 products. At first the server also stuck we also thought it was a small rocket thing, and then adjusted the pagoda panel settings, lagging problem solved.
7- Dynamic content is cached
One of the reasons that Wp Rocket is so fast is that it caches the results of PHP calculations, etc. into html and outputs a purely static page. This one-size-fits-all caching method would cache some dynamic content, resulting in non-displayed content or abnormal functionality.
For example, after using Little Rocket on our website, visitors still show up as not logged in after logging in, and need to refresh the page to do so. Several Little Rocket users also told us that the dynamic content in the sidebar was cached and not displayed or could not be changed.
Wp Rocket bypasses dynamic caching in 3 ways:, theDynamic Caching with AJAX/JavaScript. It is also possible toExcluding certain pages from being cachedorAdd Cookies to bypass cachingThe
1- Use AJAX/JavaScript dynamic caching:That is, use AJAX/JavaScript methods to create/display dynamic content so that it will not be cached. For the little guy, just use a plugin that supports AJAX functionality to produce the appropriate content. This is the best method.
2- Exclude some pages from being cached:This is very easy to understand, that is, in Wp Rocket settings, in the "Advanced Settings" > "Never cache url" enter the corresponding need to exclude the cached URL can be. The disadvantage is that the page display speed will be reduced after the exclusion of caching, and it is impossible to exclude the header, footer and other content from being cached individually.
3- Add Cookies to bypass caching:In the "Advanced Settings" > "Never Cache (Cookies)" section, enter the appropriate cookie name. The disadvantage of this method is that once cookies are detected, all pages will bypass the cache, and it is not possible to set which pages will bypass the cache individually.
This website of ours still shows an unlogged in status after logging in with WeChat at first, and needs to be refreshed once to work. In the"Advanced Settings" > "Never Cache (Cookies)" panel enter wordpress_logged_in_ Problem solved after saving. This is a post-login cookie, meaning that logging in provides the uncached page to the visitor.
The best way to get around dynamic caching is to switch to theW3 Total Cache prohuanc caching plugin (W3TC for short), can be used in the template to the corresponding content by using the appropriate code to surround the content can be allowed to bypass the cache. You can also set the expiration header and other information, so the control of the cache is more delicate and in-depth.
If you also encounter the same caching problems, it is recommended to replace the W3TC caching plug-ins (to set up tutorials in accordance with the settings), the effect is not worse than a small rocket and there are database caching, object caching can greatly reduce the burden on the server.
8- Front-end content is displayed properly only after a click or scrolling the page
A user bought our Wp Rocket plugin, the product details page at the beginning of a few positions to display abnormal (some css styles are not loaded), click the screen or scroll the page to display normal. Turn off the generation of key CSS function remains a problem, only off the delayed loading JS function is normal. However, the exclude delayed loading JS box input all plug-in JS file exclusion are useless, the problem remains.
This situation is usually caused by the delayed loading of some inline JS, enter the JS file name in the Exclude Delayed JS box can not exclude the delayed loading of inline JS, you need to enter the following figure \( respond in singing \{ Only then can you exclude inline JS from being delayed loading. However, entering these 2 contents will exclude delayed loading of all inline JS, and the loading speed will be slower. It's better to find the specific inline JS that is affected and enter specific content to exclude delayed loading.
Compatibility Settings
The same feature is only enabled in one plugin/theme, if it is enabled in multiple plugins at the same time it will lead to conflicts. Many plugins have the same functionality as Little Rocket, so which plugin should be used to enable the functionality? Below is a summary of our experience:
Wp Rocket + SG Optimizer
SiteGround Optimizer is a plugin that was copied from Wp Rocket, and the new features were launched before it was stabilized. It is not as compatible, effective and functional as Wp Rocket. if you just use SiteGround Optimizer, the result must not be as good as Little Rocket.
If you only use Little Rocket, you are afraid that the later SiteGround updates and Little Rocket are not compatible, after all, SiteGround Optimizer is the official caching plug-in for SiteGround server, which can perfectly control the 3-level cache of SiteGround server.
The best way is to use Wp Rocket and SiteGround Optimizer at the same time, the official website of Wp Rocket also said that it is better to use them together. Only keep the cache function of SiteGround Optimizer, disable other functions and use Wp Rocket instead, and set SiteGround Optimizer according to the following tutorial.
1- Turn on the 3 caches in Caching, when you clear the Wp Rocket cache it will automatically clear the SG cache.
1- Turn on Automatic Purge in Caching.
3- Turn on HTTPS Enforce in Environment.
All functions in Front and Media are turned off.
No need to change the settings on the little rocket.
Wp Rocket + Perfmatters
Perfmatters(AbbreviationsPM) is a very very good asset cleanup speed optimization plugin, and the small rocket with the use of better results! PM has a lot of features with the small rocket duplication, you need to set up.
In short: Little Rocket retains only the caching and pre-caching capabilities of theclotureAll functions that have nothing to do with caching (Perfmatters all have the same function instead). Then use the functions described in thePerfmatters Setup TutorialJust set it up.
Example:
1- Turn off the heartbeat monitoring feature of small rockets and use PM's, it's more powerful. Set it in PM general settings as shown below.
2-File Optimization Function Setting: Small Rocket File Optimization function and PM's Assets settings inside the CSS, JS optimization function duplicates the use of one of the plug-ins, disable the other plug-in.
I checked all the official documentation of the 2 plugins, and the conclusion is that the CSS optimization and JS optimization compatibility of Little Rocket is the best, and it actively listens to customer feedback compatible with many plugins. Default exclusion incompatible with some plug-ins resources delayed loading, generation of critical CSS, etc.. The entire official website documentation is how to set up to solve compatibility problems. Therefore it is very suitable for the masses of small white users, the first sales.
PM is mainly for technical staff , it is more comprehensive optimization features , in-depth , better results. For example, to clear the useless CSS can choose to generate File files, the small rocket can not. PM delayed loading JS can be set after a certain period of time to automatically load the implementation of the small rocket can not. Than under its compatibility than the small rocket compatibility is much worse, you need to know the technology to manually adjust, do not know if it is easy to break the site.
If you don't know CSS/JS, use Wp Rocket file optimization function directly, save your time and get good results. Disable PMAssets settings inside the CSS and JS optimization function (Script Manager function does not conflict, it is recommended to open the use).
If you know some CSS/JS basics, and are not afraid to toss, want to better optimization results, then use PM optimization CSS, JS. specific optimization method referencePerfmatters Setup + Usage TutorialsThe
3- Disable the "Pre-Cache" section of Little Rocket.Link prefetching,DNS pre-reading,preloaded wordBody Functions. Use Perfmatters plugin Preloading inside the function instead.PM's preloading function is more powerful and comprehensive, you can preload key images, more preloading and pre-connection settings than the small rocket.
Follow the settings in the picture below. For detailed settings click on the gray circle background question mark inside each setting? Check it out, or check out ourUltimate WordPress Speed OptimizationArticle.
Enable Instant Page Mouse over pre-loaded pages that can be opened faster will greatly increase the server load. Hit or not open your own decision.
Preload Critical Images Preload all the pages of the first screen of the key images (will not preload SVG images and icons), look at the average first screen of your page how many photos on the number of options, generally recommended to choose 2, choose too much will be stuck.
Preload feature moves important resources to the top of the waterfall and loads them immediately. Pre-loading of prioritized displays that need to beResources on the site, e.g. fonts, CSS code for header/first screen, images, etc. Don't preload more than 3 pieces of content or it may cause clogging.
pre-connection feature allows browsers to set up early connections before HTTP requests, eliminating round-trip delays and saving time for visitors. Typically used to pre-link Google fonts, CDN URLs, etc.
DNS prefetching The function will be pre-completedoff-site resourceDNS resolution (e.g. Youtube videos), point you click on off-site resources load faster.
4- Disable all the functions in the "Media" settings of Little Rocket, and enable the functions in the "Delayed Loading" settings of PM as shown in the picture below.The delayed loading effect of PM is much more powerful than that of Little Rocket, in particularFade InI like the picture fade out effect.
The software author saysThresholdSetting it to 600px is better, meaning that the photo starts loading/displaying when the distance from the screen display area is ≤ 600px, so that the customer experience is good and the photo display transition naturally won't pop up suddenly.
The Fade In feature may be similar to the picturerotateand wocommerce imagesToggle displayFunctions such as conflict, if the site has a problem with image display turn off the Fade In function or exclude the delayed loading of the corresponding image (page).
5 - If there is a CDN used (except Cloudflare), it is recommended to disable the CDN feature of Little Rocket, PM's are more powerful.
6- Click "Tools" in the upper right corner, enter database settings, enable all features and disable Little Rocket database optimization.
