Latest Wp Rocket setup tutorial, with plugin download link + FAQ solution

The latest Wp Rocket setup tutorials, in-depth comprehensive analysis of the meaning of each setting, sharing optimization ideas, to help you find the most appropriate settings for your site. A whine: basically can not find on the Internet can not explain clear 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?

Speed is critical when it comes to user experience. AConsumer Researchshowed that the stress response to movement speed delays was similar to watching a horror movie or solving a math problem, and was more stressful than waiting in line at a retail store checkout.

Speed is the key to victory. Details.https://web.dev/why-speed-matters.
Pinterest reduced perceived wait time by 40% and increased search engine traffic and registrations by 15% directly.
COOK reduced the average page load time by 850 milliseconds, resulting in 7% more conversions, 7% fewer bounces, and 10% more page views per visitor.

Also slow speed can affect Google and other crawlers crawling data, resulting in slow website content inclusion/update, or even not updated/included. It may also cause the mobile device suitability test to fail.

WordPress each plug-in to do their own thing, the code quality varies, if not additional optimization site speed is basically not very fast. wp Rocket (hereinafter referred to asLittle Rocket) is the first ranked Wordpress caching plug-in, speed improvement is obvious, easy to use, compatibility is very good.

We have installed Little Rocket on all our customers' websites and have been using it steadily with good results. The plug-ins with better acceleration effect are too complicated to set up and have bad compatibility, which makes it easy to have problems. The one that is easier to set up and has good compatibility is not as good.

And it is powerful, a plug-in top 3 plug-ins (heartbeat detection, database optimization, CDN integration, video automatic generation of cover image, etc.), recommended to use.

There is no free version of Little Rocket, and it costs $49/year to buy it on the official website. Diamo has a GPL version of Wp Rocket to download, safe, reliable, unrestricted site, permanent updates, they are using, please move to the details☞ Wp Rocket plugin download page .

Wp Rocket setup tutorial

There are many WordPress plugins, and many plugins have the same function. A function can only be enabled in one of the plugins, if it is enabled in several plugins at the same time, it is likely to create conflicts and problems. For example, the "Delete unused CSS" function of Wp Rocket and the "Delete unused CSS" function of Perfmatters conflict, and only one of them can be used.

Note: The following setting suggestions do not take into account the case of repeated conflicts with other plug-in functions. At the bottom of this article, there are suggestions for settings that are compatible with other plug-ins, so please make the appropriate settings for your situation.

Go to the Wp Rocket setup tutorial below.
After installing the plugin, this box will pop up at the top, click "No, thank you".

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

File Optimization

These are the 2 most important features of Wp Rocket, and the 2 most important features that improve the speed of the site the most, look carefully.

Compressing CSS files.It is recommended to enable it to remove spaces and comments from CSS files to reduce the file size. If you use a CDN with CSS/JS/HTML compression like Cloudflare, it is recommended to enable the corresponding function on top of the CDN and disable the corresponding function of Little Rocket, which can reduce the burden on the server.

CSS delivery optimization.This must be turned on and has 2 modes. You can eliminateGoogle speed measurement tool PageSpeed中的“移除阻塞渲染的资源”警告，对减少首次内容绘制 (FCP)、最大内容绘制 (LCP) 和交互时间 (TTI) 产生巨大影响。

Tip: Except for the official version, all other versions (including the GPL version we sell) cannot use the function of deleting unused CSS, because this function uses the Wp Rocket online server to complete, and needs to validate the License.PerfmattersRemove unused critical CSS for better results!

If it's the GPL version (downloaded from this site) you can only select "Asynchronous loading of CSS files", 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."Asynchronous loading of CSS files".

A page has a lot of CSS code, some CSS is useless CSS and does not affect the page content and functionality, some CSS will affect the first screen display content is very important, some CSS affect the page display 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 result in 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)..

"Asynchronous loading of CSS files"The acceleration effect is also good, much better compatibility, we have used in many sites, basically no error. If you enable the first screen of the page after some content display process "flicker" or display out more slowly, click to seeFOUC Solutions.

JavaScript deferred loading

Compression of JS files.withDelete 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.Close.withMerge 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 eliminateGoogle speed measurement tool PageSpeedThe "Remove resources blocking rendering" warning in the "Remove resources blocking rendering" warning. When enabled, JS will be moved to the bottom of the header and HTML will be parsed while JS is downloaded, but it will continue to load HTML only after JS is downloaded and executed.

If you use Cloudflare, remember to turn off "Rocket Loader" in CF's "Speed" > "Optimize" settings, it will most likely cause website errors.

JavaScript delayed execution.Turn it on to improve loading speed and also to eliminateGoogle Speed Check ToolThe "Remove resources blocking rendering" warning in the "Remove resources blocking rendering" warning in the "Remove resources blocking rendering" warning. When enabled, JS is downloaded while HTML is being parsed, and does not start loading until HTML is parsed and until the user interacts with it. This is a good way to speed up Google Lighthouse page drawing, and delayed loading is better for speed than asynchronous loading, but less compatible.

The "One-click exclusions" below is a new feature added in version 3.13, which allows you to exclude all JS code of specific features, plugins, and themes by selecting them, which is very convenient and suitable for newbies. Check the exclusions as needed, the more exclusions the slower the site.

Copy and paste the suggested code in the red box into the box above to exclude some key JS from being misjudged to delay loading and avoid errors in site functionality. The first line of code excludes jQuery files and their filename variants, the second line of code excludes some inline scripts, and the third line of code excludes all JS in the /wp-content and /wp-includes folders, for more details clickView Details.

After adding these 3 lines of code the vast majority of JS will not be delayed and 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, we will have time to get a safe delay list out for your reference.

Both deferred execution and asynchronous loading can be used, and priority will be given to using deferred execution for JS, followed by asynchronous loading.

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

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 will stop loading html code, wait for JS code to be loaded and executed (function) before continuing to load html. a lot of JS has no impact on the page content display, but only affects the function, while html is the key to affect the content display. Therefore, 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 loading.

Defer is also called Async, which stands for asynchronous loading. Asynchronous loading will take the JSDocumentsThe 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 boosting loading speed.

However, JS will be executed immediately after loading (red below), during the JS execution will interrupt the html download (gray below), until the JS execution is completed and then continue to load html ↓, the speed is still affected. Note: Defer will not load in order, which JS is loaded first to execute which.

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

JS mainly represents functionality, with only a few JS affecting the display of page content. The code is often interdependent and entangled, sometimes requiringExecute firstCertain JS before the associated content/functionality can 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 too big of a speed boost and can greatly improve GoogleSpeed mobile scores and must be used. Simply excluding some key JS from being delayed in loading will solve the site display and functionality anomalies. Which JS to exclude depends on the theme, plugins and page creation methods used, so it is not possible to provide uniform exclusion options here.

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

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 the initial page load time, initial page weight, and system resource usage, all of which have a positive impact on performance. Assuming 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 particularly affect mobile devices with more limited processing power and typically slower Internet connections. More: https://web.dev/lazy-loading.

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 Youtube frames with preview images.It is recommended to turn on. Little Rocket will automatically generate video cover images for Youtube videos, and only the cover images will be loaded when the page is loaded, and only the video content will be loaded after visitors click to play the video, which greatly improves the page loading speed.

The images in the first screen of the page content (logo, banner image, etc.) should be loaded immediately and first, and should not be delayed. Enter the name of the first screen image, or the css where it is located, into the box below to exclude delayed loading, and pay attention to the format.

Add the missing image frame height attribute.It is recommended to enable it. Will add width and height properties 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 be downloaded. If the width and height values are set, the browser can reserve the required space for the images on the page.

When space is not reserved for images, 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 recommendations made by GTmetrix and PageSpeed.
1- Use of clear width and height on image elements.
2- Cumulative layout offset.

Pre-loading

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

After opening, an exclusion box will appear below, allowing you to input content that you do not want to be pre-cached, which can save server resources. For example, Diablo excludes pages starting with "profile" from being preloaded in the following picture. After opening, an exclusion box will appear below, allowing you to input content that you do not want to be pre-cached, which can save server resources. For example, Diablo excludes pages starting with "profile" from being preloaded in the following picture.

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

//Enable wp-rocket to preload for pagination, not by default
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' );

Link prefetch.Link prefetching means that when the user's mouse passes over a link, the corresponding page is pre-downloaded, so when the user clicks on the link he will feel that it loads very fast. This will speed up the page loading speed a little bit, but the mouse slide over regardless of click or click are pre-downloaded, will increase the burden on the server and broadband. Weighing the pros and cons, we think it is more appropriate not to turn on. If your server performance and bandwidth is very good, you can turn on.

DNS pre-reading.This function will pre-processExternal 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 a connection to the domain's browser, which is called DNS resolution. DNS prefetching tells the browser to perform this connection before the file is needed so that it is already complete when the file is requested. This can slightly improve your load time because the DNS resolution is already being processed when requesting the external resource.

Put the website usedExternal ResourcesThe URL is filled in the box, note the format // xxx.com, one URL per line.

How can I see what external resources my website is using? Open your website page with Google/edge browser, press F12 to bring up developer tools, click on "Network", press F5 to refresh the page and the following will start listing all the resources loaded on the page.

Click the name of the resource on the left, the URL of the resource will be displayed on the right, press the down arrow ↓ button of the keyboard to switch to the next URL. Put allExternal ResourcesThe URL is entered in the box above.Note the formatFill in // xxx.com only, one line with one URL.

Or click on "Source Code" to view all external resources.

Pre-loaded fonts.Typically fonts are referenced from the CSS file, which causes the browser to take a while to load the font. Preloading fonts allows the browser to start downloading fonts earlier to improve load time and perceived performance.

Caution.This feature is only available 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, we recommend to use local hosting acceleration, check the specific methodWordPress Speed Optimization.

Put the font URL suffix into the box, note that the URL format starts from "/wp-content". Font URL view method according to the aboveDNS Pre-ReadFind external resource URLs.

Advanced Rules

Cache validity.Suggest setting it to 24 hours. If the website page count reaches several hundred or the configuration is low, try setting it to 48 or 72 hours. If the 'pre cache' function is enabled, the cache will be automatically rebuilt after the set time expires. After setting up, click 'Save Changes' to continue with other settings.

Never Cache (URL).Enter the path to the part of the URL that is excluded from being cached, you can use the wildcard character (. *). Custom login/logout pages, wishlist pages, and personal center pages definitely do not want to be cached. If you have the above pages, enter the partial path to the page URL in the box. If you use a CDN like Cloudflare, you also need to exclude the corresponding URLs in the CDN.
/wishlist/ means that the xxx.com/wishlist/ page is not cached.

/wp-admin/(. *) means that all pages with URLs starting with /wp-admin/ are not cached (all website backend pages).
/wishlist/(. *) means that all pages with URLs starting with /wishlist/ are not cached.
Woocommerce shopping cart, my account, checkout page will be automatically recognized by Little Rocket to exclude cache, no need to add.

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).排除缓存某些 Cookies，如果不缓存登录页面，网站带会员登录功能。建议排除缓存wordpress_logged_in_ and wordpress_sec_.

Never Cache (User Agents).Exclude certain user agent cache 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: Mainly used for caching search result pages + price filters for e-commerce sites.

Database

The website use process will generate a lot of temporary data and useless data, which needs to be cleaned up regularly, otherwise it will affect the website performance.

Revised version.The old version of the post that was saved when you clicked "Publish".
Automatic draft.Automatically saves a draft of the article/product content being edited every few minutes.
Recycle Bin Articles.Deleted posts and drafts.
Spam comments.Comments marked as spam comments.
Recycle Bin Comments.Deleted comments.
All provisional data.Expired temporary data.
Optimization of data tables.Optimize database tables to run more efficiently.
Automatic cleaning of scheduled tasks.How often do you want WP Rocket to automatically clean up the database.

CDN

When enabled, it will.
1- Rewrite all URLs of assets (static files such as images, CSS/JS files) present in the HTML of the page.
2- Add a preconnect resource prompt for your CDN CNAME with adns-prefetch as a fallback.

CDN enabled.If you are using CDN, check the box to enable it, but don't enable it if you are not. After enabling the CDN CNAME, fill in the CDN URL, note that the format only needs to enter cdn.example.com.Apply toSelect all files. If you use Cloudflare here is not necessary to enable, because it is not a real CDN, did not change the file url.

CDN function can be enabled in only one of the plugins, do not enable the same function in several plugins at the same time.

Enabling the CDN feature will rewrite the URL prefix of the resources that have been stored to the CDN in the page source agent 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 URL iscdn.diiamo.cn, after enabling this function the image URL in the page source code is rewritten to https://cdn.diiamo.cn/xxx/abc.jpg.

This will load this image from inside the cdn (instead of from the source server) when the client visits the page, thus greatly reducing the burden on the server while increasing the speed of resource loading.

Once enabled, you need to click on the top toolbar "Pre-caching", the page cache before you can see the source code inside the file url replaced with CDN url, clickView Details.

Exclusion of files from CDNs.Enter the file URL (note 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 are not allowed to be displayed across domains and need to be read from the source server. In most cases, this feature is not necessary and is ignored.

Heart Rate 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 of real-time plug-in notifications.
2- A list page showing that other users are editing an article/product at this time.
3- Showing when a user is locked out due to idleness.
4- Creation of regular automatic saves, drafts and revisions.
5- Display real-time sales data when using the eCommerce plugin.

The Heartbeat API consumes server resources and causes CPU overload, so it is recommended to disable it, or at least limit its frequency.

Extended Functions

Client-side caching: Enabling this will enable caching for logged in users. If it is a 2B or blog type website without member function, don't turn it on. 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 the logged-in users. However, enabling this feature will lead to a lot of abnormal functions of the website, which need to be adjusted, so white people should never enable this feature.

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. Enabled if Cloudflare is used. You can link Cloudflare, when clearing the site cache will automatically clear the Cloudflare cache.

Sucuri.Enabled if Sucuri CDN is used. When clearing WP Rocket's cache, Sucuri's cache is automatically cleared to help keep content in sync.

Cloudflare

If you enable Cloudflare in the extensions, there will be an additional Cloudflare section for linking Cloudflare.

Global API key (key): found in your Cloudflare dashboard.
Account Email: The email you use to sign up for Cloudflare.
Region ID: Found in your Cloudflare dashboard.

Developer Model.After opening the Cloudflare cache will be temporarily deactivated for 3 hours, after 3 hours will automatically close to continue to use the Cloudflare cache. If you are modifying the page structure and content, but the front-end refresh is not updated, it is likely that the cache is caused by, at this time should be enabledDeveloper Mode.

Image Optimization

This section is to recommend their own Imagify image compression plugin, Imagify is pretty good, but not the best. We have written an articleCompare the advantages and disadvantages of the major mainstream image compression plug-insIt contains a detailed comparison of Imagify and ShortPixel, Optimole and so on. Interested to take a look

Tools

Export Configuration: The Export settings to be used on multiple sites.

Import Configuration: TheImport WP Rocket settings from other sites.

Reduction: TheIf the update causes problems, you can roll back to the previous version. If something goes wrong please try disabling the corresponding function to clear the cache to see if it is restored.

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 Check Toolor GTmetrix Test the speed of the website to see how much it is improved.

The following chart is the test results of this site in Google speed tool, 0.6 seconds after loading the home page, very fast! If you are not satisfied with the results of your website speed test, don't be discouraged, the use of small rockets is only one of the speed optimization, there are still images compression, CDN use and other work to do. We recommend checking out this articleA comprehensive guide to WordPress speed optimizationArticles 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 Details.

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 tutorial to optimize in place, the site speed should improve a lot, there may be some places that have not been optimized in place.Google Speed TestMobile scores have not been going up. Tools are dead, the site and ideas are alive, according to their ownSite StatusTargeted optimization is the best way to achieve 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, and advanced use of plug-ins, so that your site speed optimization effect to the next level.

 Click to go to the Advanced Advanced Speed Optimization Tutorial 

Daily operation

Normally the cache will be automatically cleared after updating the article/product content, no need to clean it manually. If you update or delete the plugin, the top of the background will remind to refresh the cache, tap to clean the cache.

You should manually "clear the cache" when.
1- 301 or 410 redirects were created.
2- Changes have been made to the styles in any CSS file, and shrinking the CSS file or merging the CSS files is active.
3- Activating, deactivating and updating any plugins that display content on the front end of the site.
4- Exclude files from delayed, LazyLoad, asynchronous loading of CSS.
5- Make 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 website background, if you have 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.

The "pre-cache" should be refreshed manually when.
1- When manually clearing the cache, you should click on "Pre-cache".
2- You should click "Pre-cache" when the critical path generation is complete (as this will clear the cache).

You should "regenerate critical path CSS" when
1- Creation of custom CSS that affects critical paths.
2- Did some operations that would affect the CSS of the page, such as regenerating CSS in Elementor tools, modifying theme appearance settings, removing/installing some plugins that affect the frontend CSS, modifying typography/adding/dropping content in builders like elementor, etc.

Mobile speed optimization

The computer side loading time can be easily optimized to within 1 second, but the mobile Google speed loading time is generally around 3.0 seconds, why?

The conditions for mobile devices are not always optimal: the
1- Lower performance of the mobile device itself than the desktop.
2- Slow or less reliable network on the mobile side.
On mobile devices, everything takes longer and is slower. AndPageSpeedThe mobile speed test is done with a very common device and 3G network, the score is lower than the computer side is normal. Don't pay too much attention to the cell phone score, it does not represent the actual speed, take the phone test yourself to feel the real speed is more meaningful.

If you are already using Elementor and other builders to build the page, don't be discouraged, you can still improve the loading speed of the cell phone through some optimizations.

1- Choose a fast host, for exampleVultr (high performance version) Cloudways;

2- Try to use the theme comes with the function or hand-written CSS to create the header and footer, avoid using Elementor and other production.

The header created using Elementor involves about 20 JS/CSS files, and to display the first screen content quickly you can't delay loading these JS and generating keyword CSS to add these CSS in, which leads to code bloat and loading blockage.

We put a lot of effort into optimizing the header loading time for Elementor productions, and the GoogleSpeed mobile score can go to about 95, with loading times hovering at 2-2.5 seconds and an interactable time of 3.6 seconds.

Recommended UseAstra Pro ThemeComes with article/product list page and detail page templates, you can easily set up custom layouts and content, etc. It looks good and is suitable for white people. The one that comes withPremium Starter TemplatesThe plugin can also import more than 180 sets of Gutenberg page templates and design sections, perfect.

The website header and footer of the speed test results below were made using Astra Pro, and the body of the page (body) was made using elementor. The Google speed test score for cell phones can go up to 99 points, and the loading time hovers around 1.5-1.7 seconds, with an interaction time of 1.6 seconds, which is 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 delaying the 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 delete these 3 lines of exclusion code, only exclude the delay of a few key JS, mobile speed can easily be optimized from 3 seconds to 2 seconds, about 95 points. The newcomer can easily go wrong if he gets it himself, or pay someone else to optimize it.

We atThe Ultimate WordPress Speed Optimization TutorialThis article shares which key CSS should be delayed for Elementor-built headers and pages, so check it out.

If you know a little and are not afraid to toss it is recommended to delay loading JS one by one to find out the list of safe JS that can be delayed to improve the speed of the site. If you use Google speed measurement mobile side will prompt to avoid linking key resources, there will be listed several JS files, try to delay loading will help to speed up the mobile side.

4- Using Google speed toolhttps://pagespeed.web.dev Speed measurement, according to the mobile speed measurement results optimization tips to optimize. Delay the loading of some background images, use smaller size images on the mobile side, preload some key image resources, etc.

5- Image optimization is a factor that many people will ignore but is very important. Even with image optimization plugins installed and delayed image loading, there is still plenty of room for image optimization.

(1) Optimization of online compression plug-ins such as Optimole image can not be compressed and optimized background images (image URLs written in the CSS instead of HTML inside), you need to first optimize the local compression before uploading to the site to use.

(2) Wp Rocket and other plug-ins delayed loading can not delay the loading of most background images (image URL written in the CSS instead of HTML inside), you need to use Optimole, Perfmatters and other plug-ins delayed loading function and the background image where the box Class, ID fill in the delayed loading box to delay loading.

3) Wp Rocket, Perfmatters and other plugins have a function to add a real length and width size to the image, which can make the preview position first when loading the image to avoid jitter and other situations that affect the experience. But they do not automatically adopt the small size of the picture in the cell phone, but load the original picture.

The volume of a 1920px wide landscape photo on the computer side is routinely around 100kb, if reduced to a suitable size for the cell phone (768px wide) the volume can be reduced to less than 50kb, which will immediately prompt a lot of speed. If there are 2-3 full-screen photos on the page, it can reduce the volume of the page by more than 100kb, which helps a lot to improve the speed!

For more details on how to do this, please see our other articleThe Ultimate WordPress Speed Optimization Tutorial.

6- If you use Cloudflare, theSecurity > Bot InsideBot 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 and "Avoid long main threaded tasks". This script has a huge impact on performance by increasing CPU execution time and lowering PageSpeed Insights scores.

Scrape Shield InsideEmail Address Obfuscation It is also recommended to turn it off, as it also adds a JS file to delay page load time.

If you use Cloudflare, improper settings will slow down the speed, click to seeCloudflare how to set the fastest speed.

Frequently Asked Questions, Solutions, Tips and Tricks

Please ensure that the same feature is enabled in only one plugin/theme, as enabling it in multiple places at the same time can lead to conflicts.

Do not panic, calm down. First disable the Wp Rocket plug-in (do not click into installation mode), press Ctrl + F5 in the foreground to force a few times to refresh the page to see the recovery did not.If the page is not restored, it proves that the problem is not with the little rocket, continueDisable one by oneOther more suspicious plug-ins Ctrl + F5 refresh the foreground page until the problem is solved, find 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, theIt may be caused by some function of the rocket. Use Google/Edge browser to open the page that shows the error, press F12 to enter the developer tools, the upper right corner should show the error prompt, click the red box that the number 13 of the error prompt will pop up the resource that suggests the error. Here you can initially determine the cause of the error.

If you can't read or no error is indicated, please find the corresponding solution below according to the type of problem. If you have not solved the problem after following the tutorial, welcome to leave comments at the bottom.

1- WebsiteFunctionFailure/Exception

Functionality is basically controlled by JS (JaveScript), and functional anomalies are most likely to be JS problems.

1)Try it on a small rocket"Documentation and Optimization"Close inside the section"Delayed loading of JaveScript"function, save the clean cache and refresh the page to see if it is restored. If it is back to normal prove that it is a delayed loading of an important JS file that caused the problem.

First determine which plugin/plugin the failed feature belongs to, then check out this Little Rocket articleJS Delayed Loading Exclusion ArticleThere is a JS exclusion code for common themes/plugins, copy and paste the code intoDelayed loading of JaveScriptin the "Excluded JavaScript Files" text area below the function.

If there is no corresponding plugin/theme in the article or if the problem persists after entering 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 and try entering the exclusion box one by one until the page is restored.

How can I view all JS files related to this feature? Open the page in question with Google/edge browser, press F12 to bring up Developer Tools, click 1 "Network", then 2 "JS", press F5 to refresh the page and the following will start listing all the JS files loaded on the page.

Click 3 "Name" to sort JS files by URL, press the down arrow ↓ button to switch to the next URL. By viewing the file URL, you can determine which plugin/theme the JS file belongs to.

If the file URL shows /wp-content/themes/, it means it is a theme file.

2)If you turn off "Delayed loading of JaveScript"Problem not solved, continue to close"JaveScript asynchronous loading", if the function returns to normal after closing, you need to fill in the corresponding JS path of the function into the exclusion box to exclude. Specific methods to viewThis article on Little Rocket. In fact andDelayed loading of JaveScriptThe exclusion idea is the same method, the difference is that the exclusion file needs to enter the full path (without the ? ver and the path after it).

If the problem is not solved by closing the above 2 JS functions, follow theQuestion 3Continue to turn off the corresponding CSS function.

2- Some content is shown/not shown for a long time

You may find that some sections of the content to take a long time to show up, or even once opened 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 thumbnail on the Woocommerce product detail page takes longer to display, and the table of contents navigation made by the Elementor article table of contents (TOC) widget on the article page sometimes keeps spinning in circles without displaying the content.

Solution: Simply add the following to theJavaScript Delayed ExecutionInside the settingsExclude JavaScript filesText box to enter the corresponding content JS name exclude it. Which specific plug-in themes / what code needs to be added? Please see this article in Little RocketDelayed JavaScript Execution Compatibility Exclusion Article.

For example, check the content of this article to find the code that affects the display of product thumbnails on the Woocommerce product detail page (below), the red box states the purpose of the code: to load the thumbnails as soon as the page loads. Just 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 for the corresponding plugin/theme inside the article, you can judge from the JS name. For example, the article detail page Elementor produced article directory (TOC) has been spinning in circles problem, there is no corresponding exclusion code inside the article.

We can access Google Chrome Developer Tools > Web > JS > Search elementor by pressing 12. The one in the red box is known from the name table-of-contents to control the article table of contents widget.

Add to the exclude box to exclude.

3- Wrong page display

For example, icons, slides, sections, etc. are not displayed, or are displayed incorrectly, and some styles are missing. The layout is determined by the style (CSS), and there is a high probability that the problem with the display is a CSS problem.

1)Try it on a small rocket"Documentation and Optimization"Close inside the section"CSS delivery optimization"function, save the clean cache and refresh the page to see if it is restored. If it is back to normal it may be that an important CSS file is loaded asynchronously causing a problem. Fill in the red box below with the CSS code related to the abnormal content to become the key CSS and load it first. For more details, click "More Information" in the blue box below.

2) If you turn off "CSS delivery optimization"The function did not solve the problem, try to close"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 flicker/jitter

FOUC (flash of unstyled content) is the meaning of flicker without style, details and solutions to viewSmall rocket official website explains. At the beginning of the page, elements such as text and images without style are loaded first (red box below), and then the corresponding key CSS and JS are loaded (green box below).

This switching process causes the element flicker and the customer experience is not good. This article only explains the solution to the FOUC situation caused by Wp Rocket.

Some sites appear similar to the FOUC phenomenon is because the site itself is slow, optimize the speed FOUC natural disappearance, 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.Find the CSS files that affect the corresponding jitter and then exclude them, which prevents them from being treated as unimportant CSS delayed/asynchronous loading. This method requires installing a plugin and modifying the corresponding code, see Little Rocket for detailsThis article. This method may not be suitable for white people.

Solution 2: Use the critical path CSS alternate code.Enter the corresponding FOUC style CSS in the key path CSS alternate code box, it will be automatically added to the key CSS inside. The specific method is described in detail on the Little Rocket website, clickGo to the corresponding article, translated into Chinese, according to "Use of back-up key CSS"Section content operation.

Simply enter the URL of the FOUC page that appears into the external tool that generates the critical path CSS and click "Generate Critical Path CSS"Generate the key CSS, copy and paste all the generated CSS into the alternate code box of the little rocket and just click Save. Only enter the CSS generated in the first box, the second box inside is JS code to ignore.

5- Error regenerating critical path CSS

If an error is generated, the right side will indicate the reason for the error, checkThis article on Little RocketAccording to the cause of the error to find the appropriate solution. If the problem is not solved after the operation according to the article, it is generally due to network reasons (especially domestic websites) or the server is too busy, try again for another time period basically OK.

If you are prompted with "No valid stylesheets", you are probably not redirecting properly. Open these 4 URLs (example.com replaced by 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 do not open 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 plug-in, etc. to achieve.

Another reason for the "No valid stylesheets" prompt may be that the external programs of the Little Rocket program are blocked by the firewall. Think about whether you have set up a firewall, anti-theft links or something like that. Turn it off, or add the 3 IPs of Little Rocket to the whitelist, seeThis article on Little RocketCDN and other settings of anti-theft links will also be intercepted, together with the closure or add a whitelist.

If there is no response after clicking "Regenerate Critical Path CSS", the server is busy, try again after a while.

6- After the installation of small rocket website front and background become card, CPU occupation is too high

There's a guy who bought our book.Advanced Advanced Speed Optimization TutorialFeedback from users of theCloudWays' 1H2G host.Site lags after updating Wp Rocket settings or clearing cache. It lasts for ten to several minutes with no visits to the new site.

There is also feedback after the installation of Wp Rocket found 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 view found to be running clogged, 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 the complexity of the operation.

Encountered the above problem of the basic use of low-configuration servers, Wp Rocket preload and delete useless CSS and other functions will take up a lot of server resources, so the server configuration is not enough if sometimes lagging, and so on the completion of the task to return to normal.

WP Rocket v3.12 improved the pre-load feature to improve speed, but also caused the problem of high CPU usage. One client's site was lagging on the server, and I had to troubleshoot for a long time before I found out that it was a problem with the pre-cache loading feature of the little rocket, and after disabling it, it was back 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.

However, some users still have lagging feedback, you can manually adjust the preloading frequency/number of URLs: 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 to be preloaded per batch, default is 45, change to 30. ref:Wp fastest cache plugin preload less than 10 URLs per processing.
function preload_batch_size( $value ) {
     $value = 30;
     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 120.

 function preload_cron_interval( $interval ) {
     $interval = 120;
     return $interval;
 }
add_filter( 'rocket_preload_pending_jobs_cron_interval', 'preload_cron_interval' );

// Change the delay between requests for the same URL, the default is 0.5 seconds, 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' );

After adding the code, the server returns to normal after a while, if you click Clearing the cache or generating critical CSS will temporarily fill up the load and return to normal after a while when the preloading/production of critical CSS tasks are completed.

If you still get stuck even after adjusting the preload frequency. Because."Delete unused CSS" function can also cause CPU overload ("Loading CSS asynchronously" will not), the frequency needs to be reduced.

Wp Rocket has aOfficial PluginIt can reduce"Delete unused CSS"Frequency, just download and install. The default is to process 100 URLs per run, adjusted to 50 after installation. the required Cron interval is 60 seconds by default, adjusted to 120 seconds after installation.

It is also recommended to disable Wp_Corn and use Server Corn instead, which is helpful to reduce CPU usage, clickView detailed method.

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 will cache some dynamic content, resulting in non-displayed content or abnormal functionality. A few small rocket users have also told us that the dynamic content in the sidebar is cached and not displayed.

There are 3 ways for Wp Rocket to bypass dynamic caching: 1- Dynamic Caching with AJAX/JavaScript(b); 2- Excluding certain pages from being cached3- Add Cookies to bypass caching.

1- Use AJAX/JavaScript dynamic caching:That is, using AJAX/JavaScript methods to create/display dynamic content, so that it will not be cached. For white people, use plug-ins that support AJAX functionality to create the appropriate content on the line, and have the skills to write the code by hand.

2- Exclude some pages from being cached:This is easy to understand, just enter the URLs that need to be excluded from caching in Wp Rocket "Advanced Settings" > "Never cache url". The disadvantage is that the loading speed of the corresponding page will be reduced after the exclusion of caching, and it is not possible to exclude the header, footer and other content from being cached separately.

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.

Our site still shows an unlogged in status when you log in at first, and you need to refresh the page to show that you are logged in. In the"高级设置” > “永不缓存（Cookies）”板块输入 wordpress_logged_in_ 保存后问题解决。这个是登录后的cookies，意思是登录后提供未缓存页面给访客。

Tip: Wp Rocket's Html browser cache default cache time is 0, if you are still not logged in, use F12 to check the Html file cache using developer tools. The "Response Header" should be displayed. nocache orcache-control:max-age=0 Only then, otherwise it means that there is a problem with the browser cache.

If the response header does not show the browser cache expiration time or does not cache, install the This official plugin (position below) automatically sets the browser cache time to 0.

The best way to bypass dynamic caching is to switch toW3 Total Cache prohuanc cache plugin (referred to as W3TC), which can be used in theTemplateBy wrapping the corresponding content with a specific code, it is possible to allow the corresponding content to bypass the cache. You can also set expiration headers and other information for more granular and in-depth control of caching.

If you also encounter the same caching problems, it is recommended to replace the W3TC cache plug-ins (to set up tutorials in accordance with the settings), the effect is not worse than a small rocket, there are database caching, object caching features 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 \( and \{ 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.

9- Pre-loading paging content

Wp Rocket does not cache articles/products etc. list page breaks by default, add the following code to the child themefunctions.phpImplementing preloaded paging.

//Enable wp-rocket to preload for pagination, not by default
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' );

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 cause conflicts. Many plugins have the same function as Little Rocket, so which plugin should be used to implement the function? The following is a summary of our experience.

Wp Rocket + SG Optimizer

SiteGround Optimizer, a plugin, is copied from Wp Rocket and the new features are not yet stable. It is not as compatible, effective and functional as Wp Rocket. if you just use SiteGround Optimizer, the effect must be inferior to Little Rocket.

If you only use Little Rocket, and afraid of late SiteGround updates and Little Rocket is not compatible, after all, SiteGround Optimizer is the official SiteGround server cache plug-in, can perfectly control the SiteGround server 3 levels of cache.

The best way is to use Wp Rocket and SiteGround Optimizer at the same time, the official website of Little Rocket also says that the two are better together. Only the caching function of SiteGround Optimizer is retained, and the other functions are disabled and replaced by the one of SiteGround Optimizer, which is set up according to the tutorial below.

1- Caching inside the open 3 cache function, clean Wp Rocket cache will automatically clean SG cache.

1- Open Automatic Purge inside Caching.

3- Open HTTPS Enforce inside Environment

All functions inside Front and Media are turned off.

The settings of the small rocket do not need to be changed.

Wp Rocket + Perfmatters

Perfmatters(AbbreviationPMPM is a very good asset cleanup speed optimization plug-in, and small rocket with the use of better results!

In short: Little Rocket retains only the caching and pre-caching capabilities of theCloseAll 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 function of Little Rocket and use PM's, which is more powerful. Set it in the PM general settings as shown below.

2- File optimization function settings: small rocket file optimization function and PM's Assets settings inside the CSS, JS optimization function duplicate, use one of the plug-in's, disable the other plug-in's.

I checked all the official documentation of the 2 plugins and concluded that Little Rocket's CSS optimization and JS optimization compatibility is the best, and it actively listens to customer feedback to be compatible with many plugins. Default exclude incompatible some plug-in resources delayed loading, generation of critical CSS, etc.. The whole official website documentation is how to set up to solve compatibility problems. Therefore it is very suitable for the masses of white users, the first sales.

PM is mainly for technical staff, its optimization function is more comprehensive, in-depth and better. For example, you can choose to generate a File file to clear useless CSS, but not Small Rocket, and PM Delayed Load JS can be set to load automatically after a certain time, but not Small Rocket. The compatibility of PM is much worse than that of Little Rocket, and it needs to be adjusted manually if you don't know the technology, so it is easy to break the website.

If you don't know CSS/JS, use the Wp Rocket file optimization function directly, it saves time and works well. Disable the CSS and JS optimization function inside PMAssets settings (Script Manager function does not conflict, it is recommended to open and use it).

If you know some CSS/JS basics, and are not afraid of tossing and turning, and want better optimization results, then use PM to optimize CSS, JS.Perfmatters setup + usage tutorial.

3- Disable the "pre-cache" section of Little RocketLink Prefetch, ,DNS Pre-Read, ,Pre-loaded wordsBody function. Use Perfmatters plugin Preloading inside instead. PM's preloading feature is more powerful and comprehensive, can preload key images, more preloading and pre-linking settings than Little Rocket.

Follow the settings in the chart below. Detailed settings click on each setting inside the gray circle background question mark? to see, or check out ourThe Ultimate WordPress Speed OptimizationArticle.

Enable Instant Page The mouse slides over the pre-loaded page, can speed up the opening speed, will greatly increase the burden on the server. Open or not to open your own decision.

Preload Critical Images Preload all pages of the first screen key images (will not be preloaded SVG images and icons), look at your page on average how many first screen photos on how many to choose, generally recommended to choose 2, choose too much will be stuck.

Preload The function moves important resources to the top of the waterfall and loads them immediately. Preloads the ones that need to be displayed firstStation Resources, e.g. fonts, CSS code for header/first screen, images, etc. Do not preload more than 3 contents or it may cause blocking.

Pre-connected Feature allows browsers to set up early connections in advance of HTTP requests, thus eliminating round-trip delays and saving visitors time. Typically used to pre-link Google Fonts, CDN URLs, etc.

DNS Prefetch The function will be pre-completedOff-site resourcesThe DNS resolution (e.g. Youtube videos) will load faster when you click on off-site resources.

4- Disable all the functions in the "Media" setting of the Little Rocket, and enable the functions in the "Delayed Loading" setting of the PM as shown below. the delayed loading effect of the PM is more powerful and comprehensive than that of the Little Rocket, especiallyFade InThe picture fade out effect I like.

Software authors sayThresholdIt is better to set it to 600px, meaning that the photo will start loading/displaying when the distance from the display area is ≤ 600px, so that the transition of the photo display will not pop up suddenly when the customer has a good experience.

Fade In function may be similar to the pictureRotationand wocommerce imagesSwitching displayIf there is a conflict between functions, etc., turn off the Fade In function or exclude the delayed loading of the corresponding image (page) if the site has problems displaying images.

5 - If there is the use of CDN (except Cloudflare), it is recommended to disable the CDN function of the small rocket, PM's more powerful.

6- Click "Tools" in the upper right corner to enter the database settings, enable all functions and disable the Little Rocket database optimization function.