Profile

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

 

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, and enabling this feature will create a dedicated set of cache files for each logged-in WordPress user, thus increasing the load on the server.

If your site has many registered members, and there is a lot of content only members can view the case is recommended to enable. Our site is enabled after users have purchased the plugin refresh does not appear after the download button, so turn off this feature.

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. Previously, the site is http/1, only one resource can be loaded at a time, so reducing the number of files will help improve the speed.

Now that websites are http/2 and can load dozens of resources at once much faster, merging CSS doesn't have much impact on speed. Combining CSS directives into as few element references as possible to write efficient CSS. reducing the number of nodes in the DOM tree will also result in 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. When turned on JavaScript (JS for short) is downloaded during HTML parsing and will be executed when the page finishes loading (when the parser finishes).

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 loading scripts and executing them asynchronously (simultaneously), while deferred loading is not loading at first until the user interacts with them, 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 deferred execution and asynchronous loading can be used, and priority will be given to using deferred execution for JS, followed by asynchronous loading.

 

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. Suppose there are 10 images on the page, totaling 2MB.

If all 2MB of images must be downloaded at once, this will affect 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 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

WP Rocket preload setting

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.

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

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

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

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

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 access speed and reduce database load.

If you are using SiteGround, Cloudways or other managed hosting with Memcached enabled, there is no need to install additional Memcached. If you use a plugin like WP Cloudflare Super Page Cache, it will disable the site cache function, so 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.

Installing Memcached, Redis can store the cache in memory (reading efficiency is about 40 times that of the hard drive), which greatly improves the site's ability to withstand and read cached data, thus reducing the burden on the server and improving page load speed, very necessary!

Redis is better, but more suitable for large sites. WordPress sites are better off with Memcached 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.

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

Pasted 84

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. 

Pasted 86

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, but this will also result in the normal loading of more than 20 JS, which greatly reduces the speed of the cell phone.

Pasted 18

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.

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

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

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.

3327e9e49bc96963b43100300e442bb9

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.

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

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

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

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

 

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.

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

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!

1- Turn off the heartbeat monitoring function of Little Rocket and use PM's because PM's is more powerful. Set it in the PM general settings as shown below.

Pasted 43

 

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.

PMPM 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. It is much less compatible than Little Rocket, and 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.

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

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 :

发表评论

Set as private comment

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

Chat
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Have no account? Forgot password?
For a better user experience, the site uses cookies -Privacy Policy
This site uses cookiesPrivacy Policy