Latest Wp Rocket setup tutorial, with plug-in download + FAQ solution

Wp Rocket setup tutorial
Article List
Article List

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.

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 #1 Wordpress caching plugin, with a significant speed increase, ease of use, and great compatibility. We have installed small rockets to all our customers' websites and have been using it steadily with good results. The acceleration effect than it is too complicated plug-in settings, compatibility is not good, easy to get problems. It is easier to set up than it, and the compatibility of good acceleration effect is not as good. And it is powerful, a plug-in top 3 plug-ins (heartbeat detection, database optimization, CDN integration, automatic generation of video 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 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 setup tutorial below.
After installing the plugin, this box will pop up at the top, click "No, thank you".

Pasted 31

 

Cache

Suggested settings as shown

Pasted 10

Mobile cache.Enable. Greatly improve the page loading speed on mobile.

Separate cache for mobile.It is not recommended to enable it. Enabling it will create a separate set of cache for each page on the mobile side, which will greatly increase the database size and server load. Nowadays, most websites are responsive in design, and the content (images, CSS, JS, fonts, HTML, etc.) on the computer side and the mobile side are basically the same, so the mobile side can directly use the cache on the computer side.

If the mobile side uses a different plugin, theme or content (image, video, code) than the computer side, you can enable it, it will help the mobile side speed. Little Rocket officially says there is no harm in enabling it no matter what the situation is, and it will be more or less good for mobile speed.

User-side cache.This is not recommended in most cases. By default, Little Rocket does not cache content that requires a login to view it, but enabling this feature will create a dedicated set of cache files for each logged in WordPress user. If your site has a lot of registered members and there is a lot of content that can only be viewed by members, enabling this feature can be very useful, otherwise it is not recommended.

When not enabled, logged-in users (admins, authors, etc.) viewing the site will bypass some of the cache and be able to view the latest content/modifications to the site, making it easier to edit written articles and such. When enabled, logged-in users will see the same pages as non-logged-in users, which may be old cached pages.

Cache validity.The recommended setting is 24 hours. If the "pre-cache" feature is enabled, the cache will be automatically rebuilt after the set time expires. Most websites are not frequently modified/updated, so it is recommended to set it to 24 hours to reduce the burden on the server.

Click "Save Changes" after setting and continue with other settings.

 

File Optimization

Suggested settings as shown

Pasted 11 

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.

Merge CSS files.Not recommended for newbies to enable, veterans can enable to try. In the past, the site was http/1, and only one resource could be loaded at a time, so reducing the number of files helped improve the speed. Nowadays websites are http/2 and can load dozens of resources at the same time, so merging CSS doesn't have much impact on speed. CSS directives are merged into as few element references as possible to write efficient CSS. reducing the number of nodes in the DOM tree will also produce faster rendering.

You may see many foreign bloggers recommend merging CSS for small sites because it does help a little bit with speed. Merging CSS results in higher file compression with fewer bytes, and also reduces the number of nodes in the DOM tree resulting in faster rendering, so veterans choose to merge CSS. This is why veterans choose to merge CSS, which can lead to errors and speed improvements, so it is not recommended for newbies.

CSS delivery optimization.This must be turned on, very critical, to enhance the speed of the site is very helpful, it is recommended to choose "Asynchronous loading of CSS files". Can eliminateGoogle speed measurement tool PageSpeed中的“移除阻塞渲染的资源”警告,对减少首次内容绘制 (FCP)、最大内容绘制 (LCP) 和交互时间 (TTI) 产生巨大影响。

When code is loaded by a plugin or a theme that is not needed or used on the page. Developers usually queue stylesheets only when they are used. However, many times, additional styles are added that may not be needed. This can result in a lot of unused CSS, which can slow down your WordPress site. It can also trigger rendering block warnings.

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.

If the site loads all CSS directly without prioritizing and prioritizing, it will result in long loading times and poor user experience.CSS delivery optimizationTurning it on will prioritize the loading of critical CSS that affects the first screen content and page layout, and delay the loading (or not) of useless CSS, thus greatly saving time and speeding up the page display.

"REMOVE UNUSED CSS (BETA)/ Remove unused CSS" It has the biggest speed boost and reduces CSS size significantly when enabled. Little Rocket officially recommends enabling it as a priority, and only select it if it causes problems on your site"Load CSS files asynchronously".

Reduce elementor css size

ButREMOVE UNUSED CSS (BETA) In the test phase, compatibility is not very good, I have enabled in many sites led to display errors and function failure. We recommend you to chooseAsynchronous loading of CSS filesIt loads useless CSS asynchronously (instead of deleting it) so it's much more compatible.

OpenAsynchronous loading of CSS filesIf some content on the first screen of the page is "flickering" or slow to be displayed, it may be because some key CSS is judged as useless by the rocket to delay loading. You can put the CSS code of those contents into the red box in the figure below to turn them into critical CSS and load them first. For details, click "More Information" in the blue box below.

Pasted 14

JavaScript file, set up as per the figure.

Pasted 13

Compression of JS files.withDelete CSS filesThe same function is recommended to be enabled. 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.

Merge JavaScript files.withMerge CSS filesThe principle is the same. If you turn onDelayed execution JavascriptThe option will be disabled automatically. Pasted 16

JavaScript asynchronous loading.It is recommended to enable. It can improve loading speed and eliminateGoogle speed measurement tool PageSpeedThe "Remove resources that block rendering" warning in the "Remove resources that block rendering" section of the page. JavaScript (JS for short) is downloaded during HTML parsing and will be executed after the page finishes loading (when the parser finishes). Think of it as pushing all the JavaScript to the bottom of the waterfall.

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

Pasted 17

JavaScript delayed execution.Turn it on to improve loading speed and also to eliminateGoogle Speed Check ToolThe "Remove resources that block rendering" warning in Google Lighthouse. Asynchronous loading is pushing the script to the bottom of the page load, and deferred loading is delaying the script based on user interaction, which is a good way to speed up Google Lighthouse page drawing. Delayed loading is better for speed than asynchronous loading, but less compatible.

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 website functionality errors. The first line of code is meant to exclude all scripts in the /wp-content and /wp-includes folders, the second line of code excludes jQuery files and their filename variants, and the second line of code excludes inline scripts, for 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.

Pasted 18

Both delayed execution and asynchronous loading can be used, and priority will be given to using delayed execution for JS and asynchronous loading for JS without delay.

 

Media

Suggested settings as shown

Pasted 19

Lazy loading.Also called delayed loading, recommended to be enabled. You can postpone loading images/videos and wait until they enter or are about to enter the visible area, thus improving the page loading speed.

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.

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.

Pasted 21

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.

Pasted 22

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 image on the page. When no space is reserved for the 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 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

Pasted 23

Turn on pre-caching.It is recommended to enable it. Pre-caching is to pre-cache the content of the page to the browser, visitors open other pages of the site directly from the browser to read the data (rather than from the server), much faster.

Enable Sitemap pre-caching.It is recommended to enable.

Rank Math XML Site Map.It is recommended to enable it. If you have other SEO plugins installed, this may show "XXX XML Sitemap", just check the box to enable it. If there is no option to display the sitemap, manually enter the sitemap URL into the box below.

Pasted 24

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.

Pasted 25

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 "Network", press F5 to refresh the page and then the following will start listing all the resources loaded on the page. Click on the resource name 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 ResourcesThe URL is entered in the box above.Note the formatFill in // xxx.com only, one line with one URL.

Pasted 26

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

Pasted 31

Pre-loaded fonts.Typically fonts are referenced from the CSS file, which causes the browser to take a while to load the font. The preload fonts feature 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.

Pasted 27

 

Advanced Rules

In addition toNever Cache (URL)It is recommended to leave the other blank without filling.

Pasted 28

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.
/wishlist/ means that the xxx.com/wishlist/ page is not cached.

/wishlist/(. *) means that all pages with URLs containing /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.

Never Cache (Cookies).Exclude caching of certain cookies.

Never Cache (User Agents).Exclude certain user agent cache pages.

Always clear the following URL cache. Automatically clear the cache that fills the page whenever new content is posted.

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.

Pasted 29

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.

Pasted 30

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 way, when a client visits the page, this image will be loaded from inside the cdn (instead of from the source server), thus greatly reducing the burden on the server and improving the speed of resource loading at the same time.

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 

Suggested settings as shown

Pasted 33

What does the WordPress Heartbeat API do?
1- Display of real-time plug-in notifications.
2- A list page showing the users who 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

Pasted 35

Varnish. If your host uses Varnish, otherwise please disable it. Enabling this feature will automatically clear the host's Varnish cache. Only a few hosts such as Cloudways have Varnish caching enabled, so if you don't know if your server has it enabled, it is recommended to disable it.

WebP compatible.Disable. This feature does not need to be enabled here, whether you are generating WebP through a plugin or a CDN.

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.

Pasted 36

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

Pasted 37

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.

 

This completes the tutorial on setting up Wp Rocket, performing 3 actions.Clear cache > Regenerate critical path CSS/Remove unused CSS > Pre-cachingThe site is only fast at this point. Go toGoogle Speed Check Toolor GTmetrix Test the speed of the site to see how much to improve the speed. 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 also image compression, CDN use and other work to do. We recommend checking out this articleA comprehensive guide to WordPress speed optimizationArticles for more optimization.

Pasted 50

 

Daily operation

The cache will be automatically cleared after updating article/product content on a regular basis, no need to clean it manually. If the plugin is updated or deleted, the top of the background will remind to refresh the cache.

Pasted 20

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.

To clear the cache: click "WP Rocket" > "Clear Cache" at the top of the backend of the website, and then press Ctrl+F5 to refresh the page in the foreground (it can bypass the browser cache). If the content of the page is not displayed in the foreground after modification, you also need to clear the cache. After clearing the cache, the foreground still does not show the updated content, try to clean up the memcached cache (if installed), open 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.

 

Enable memcached caching

Memcached and Redis are both in-memory caches that reduce the number of database reads by caching data and objects in memory. It can improve the speed of access and reduce the load on the database. If you are using SiteGround, Cloudways or other managed hosting, Memcached is already enabled, no additional installation is required. If you use WP Cloudflare Super Page Cache and other plug-ins will disable the site cache function, there is no need to install Memcached.

Small Rocket Cache is a disk cache that uses files to store data, and the query and write speed is limited by the speed of the hard disk. If the number of query requests (number of visitors) becomes high, it will reach the IO bottleneck of the hard disk, causing the site to slow down or even lag.

Redis is even better, but it is more suitable for large sites. Memcached is more appropriate because it handles small amounts of data faster.

How to enable Memcached caching in WordPress?

SiteGround server comes with Memcached cache, no additional installation is required. Just use the caching plugin that comes with SG to enable and refresh Memcached cache.

1- PHP needs to install the Memcached extension first, if you use VPS hosting you need to enter the PHP extension in a panel like Pagoda to install Memcached (do not install Memcach), it is recommended to install the OPCache extension at the same time to enable OPCache caching. If it is shared or managed hosting generally has been installed, no need to install additional.

2- Install MemcacheD Is Your Friend plugin (compatible with PHP 7), download link: https://pan.baidu.com/diiamo Extraction code: 3ici. After installing and enabling the plugin, you can see the following information in the WordPress backend "Tools" > "Memcached".

Pasted 51

You can also useWPJAM BasichPlugin (compatible with PHP 8), after installation into the site file management, will plugins/ wpjam-basic/ template/ directory object-cache.php file 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 up the cache, it will not clean up the Memcached and Redis cache together, so you need to manually clean up the cache additionally. It is recommended that you turn on the site after it is completely built. If you modify the frontend of the site to not display new content, you need to clean up the Memcached and Redis cache additionally. 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 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.

The best way to improve the loading speed on mobile is to minimize the page's asset-heavy content (video, slideshow, large images, etc.), use the theme's own product/article list page and detail page templates, and use WordPress's own Gutenberg builder or manually hard-coded production for other pages. Especially the header is highly recommended to use the theme, it is the first screen content to show the content, which directly affects the perceived time of page loading. Recommended to 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.

Also minimize media content on mobile pages, reduce some tracking traffic, ranking plugins and code installation, use as few plugins as possible to keep the code light, use lightweight and fast plugins and themes (Astra Pro is recommended).

If you use Elementor or something to build a page, you can't avoid loading a bunch of JS. and JS interdependence alone disable/delay loading one of them will lead to other JS loading exceptions page problems, only all JS normal loading, which leads to mobile loading time goes to about 2.5 ~ 3 seconds.

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- In Wp Rocket > " Cache " > turn on " separate cache for mobile " (although it will increase the burden on the server).

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

3- Choose fast themes and plugins, use as few plugins as possible to increase the page CSS/JS and tracking code.

4- When setting "File Optimization" we recommend entering the code in the red box to exclude delaying the loading of some JS to improve compatibility. However, this will also lead to several JS blocking rendering, greatly reducing the speed of the mobile side. We have tested in a customer's website, if you remove these 3 lines of exclusion code Google speed tool mobile speed from 3 seconds to 2 seconds, computer speed from 0.8 seconds to 0.6 seconds.

However, if you delete the 3 lines of delayed loading code will lead to some functional errors, such as Woocommerce details page thumbnails do not show, menu bar icons do not show, etc., you need to exclude the corresponding problems section of the JS, which is a bit complicated not for newcomers. If you're a beginner, don't do this, you'll accidentally mess up your website, try to put the JS and CSS resources that block the Google speed test tipsPre-loadingYou can also improve the loading time. Resource preloading can be achieved using plugins such as Perfmatters (available in the compatibility settings below) or by adding code manually.

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.

Pasted 18

5- Using Google speed toolhttps://pagespeed.web.dev Speed measurement, according to the cell phone speed measurement results optimization tips to optimize.

Pasted 58

6- Image optimization is a factor that many people will ignore but is very important. Even if you install image optimization plugins and delay image loading, there is still plenty of room to optimize images.

(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. However, they do not 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 routinely around 100kb, if reduced to a suitable size on the mobile side (768px wide) the volume can be reduced to less than 50kb, the speed immediately prompts a lot. If the page has 2-3 full-screen photos, that can reduce the page volume of 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.

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

Pasted 74

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.

Pasted 75

Click to see more impact on the speed ofCloudflare Settings

 

Common problems and solutions

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.

Pasted 54

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 field below the function. If there is no corresponding plugin/theme in the article or if the problem persists after entering the corresponding plugin/theme, the JS file that is causing the problem has not been excluded. In this case, you need to find all the JS files on the page for that function and try entering them one by one in the exclude box until the page is restored.

How can I view all JS files related to this feature? Use Google/edge browser to open the page in question, 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 JS files loaded on that page. Click 3 "Name" to sort the JS files by URL, and press the down arrow ↓ button on the keyboard to switch to the next URL. By viewing the file URL, you can determine which plugin/theme the JS file belongs to.

Pasted 38

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 contents are displayed/not displayed for a long time

You may find that the content of some sections take a long time to show up, or even once opened does not show 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 not show. For example, Woocommerce product details page product thumbnails take a long time to display, the article page Elementor article directory (TOC) widget to create the directory navigation sometimes has been spinning in a circle does not show 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 Woocommerce product detail pages (below), the red box states the purpose of the code: to load 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.

Pasted 52

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 production article directory (TOC) has been spinning circle problem, there is no corresponding exclusion code inside the article, we can press 12 into Google Chrome Developer Tools > Network > select JS > search elementor. red box that from the name table-of-contents will know is to control the article directory widget.

Pasted 55

Add to the exclude box to exclude.

Pasted 56

 

3- PagesShowMisfits

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.

Pasted 14

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 in the figure below), and then the corresponding key CSS and JS are loaded (green box in the figure below). This switching process causes the elements to flicker and the customer experience is not good. If the website uses Google fonts, the process of switching to Google at the beginning of the page may also cause FOUC.

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.

Comparison of display effect with and without css

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.

Pasted 57

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

 

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. Most of the plugins have the same function, which plugin should be enabled and disabled in which plugin? We share our usage experience for your reference.

Wp Rocket + SG Optimizer

SiteGround Optimizer is a plugin that was copied from Wp Rocket and was launched before the new features were stable. It is recommended that Wp Rocket and SiteGround Optimizer be used simultaneously, with SiteGround Optimizer opening the following functions and disabling the remaining ones.

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

Pasted 39

1- Open Automatic Purge inside Caching.

Pasted 40

3- Open HTTPS Enforce inside Environment

Pasted 41

All functions inside Front and Media are turned off.

Pasted 42

 

Wp Rocket + Perfmatters

Perfmatters(AbbreviationPM) is a great asset cleanup speed optimization plugin, recommended by many famous bloggers. Some features are even better than Wp Rocket!

1- Turn off the heartbeat monitoring function of Little Rocket, set it in the Perfmatters General Settings as shown below.

Pasted 43

 

2- Compress the files in "File Optimization" of Little RocketCSS files, ,Merge CSS files, ,CSS delivery optimization Close, openCompressing JS files, ,JavaScript asynchronous loading, ,JavaScript deferred loading. Little Rocket's JS delayed loading compatibility is better, and there is a very detailed exclusion document that makes it handle JS better. PM has more powerful CSS optimization features and better speedup, so use it to optimize CSS.

Go to PM Settings > Assets and openRemove Unused CSS.

Pasted 59

Used CSS Method It is recommended to choose File, which will output the key CSS separately as a separate CSS file, which can reduce the HTML size, and the generated CSS file can be cached, greatly improving the speed of opening other pages. The key CSS of the small rocket is inline and printed inside the HTML, which greatly reduces the speedup effect.

Stylesheet Behavior Recommend to choose firstDelayIf there is a problem with the page display, then useAsyncThe Delay option is better. Choose Delay to speed up the effect is better, will wait for the key CSS loaded and then load the non-key CSS, but compatibility is not good, if there is an important CSS is misjudged as non-key CSS delayed loading may lead to FOUC and extended loading time.DeleteOptions not suitable for novice users.

If you choose Async, the non-critical CSS will be loaded asynchronously, which is very compatible, but the acceleration effect is a little bit inferior. SelectDeleteWill remove all unused CSS, the best and least compatible, recommended for experts only.

Excluded Selectors You can add the entire section's CSS to the key CSS. If you feel that some sections/elements on the first screen of the page are loading slowly, which may be caused by being misjudged as non-key CSS, you can add the section's class and id here.

If you use PM's CSS optimization feature, you can't preload the CSS inside the preload, and you have to click the "Clear Used CSS" button after each page code change.

 

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

Pasted 45

Enable Instant Page The mouse slides over the pre-loaded page, can speed up the opening speed, will increase a little bit of server load. Do not 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- 禁用小火箭“媒体”设置里的所有功能,在PM“延迟加载”设置里按下图启用功能。PM的延迟加载效果比小火箭的更强大,全面,尤其是Fade In图片淡出效果我很喜欢。Threshold设置为300px比较好,意思距离相片显示300px时开始先加载相片,这样就不会相片显示就比较自然浏览体验好。

Fade In功能可能跟其它插件/主题的图片轮播、切换显示功能有冲突,如果网站出现图片显示问题试下关闭这个功能

Pasted 46

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

Pasted 47

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

Pasted 48

Pasted 49

End

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

Recommended Articles.
Comments :

Leave a Comment

邮箱不会被公开, 评论框内禁止插入网址、邮箱

Chat
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Don't have an account? Forgot your password?
For a better user experience, the site uses cookies -Privacy Policy
This site uses cookiesPrivacy Policy