Wordpress

Make your website super fast with WP Rocket (Wp Rocket best settings)

You alredy know that WP Rocket is one of the most popular WordPress caching plugin ever to optimize the speeding performance of your Wordpress website or blog.  WP Rocket improves the loading time of your website right upon activation. But you can make your website more and more faster by properly install and setup WP Rocket plugin in WordPress.

Today, I will show you how to properly setup WP Rocket plugin in your WordPress website. I will show howyou can get maximum performance benefits from WP Rocket plugin. So, Let’s get started.

First of all we have to go to Settings option in wordpress deshbord than click on WP Rocket, and you will be taken to the plugin’s settings page. There are some tabs or sections you’ll need to configure and tweak the settings for:

  • Dashboard
  • Cache settings
  • CSS & JS Files Optimization settings
  • Media settings
  • Preload settings
  • Advanced Rules settings
  • Database settings
  • CDN settings
  • Add-Ons (Cloudflare)
  • Tools

 

Now let’s go through configuring the best settings for WP Rocket plugin

 

WP ROCKET DASHBOARD

The WP Rocket’s Dashboard gives you information about your license and when it expires. You can also opt-in to be a Rocket Tester (beta testing program) and Rocket Analytics (allow WP Rocket to collect data anonymously). Here you also find links to support and frequently asked questions about WP Rocket.

In the Dashboard you can Remove All Cached Files (recommended to do when you’ve done configuring the WP Rocket settings), Start Cache Preloading (generates a cache for your homepage and all internal links on the homepage) and Purge OPcache Content (purges the OPcahce which prevents issues when you update the WP Rocket plugin).

WP ROCKET CACHE SETTINGS

1. Mobile Caching: Enable caching for mobile devices should be activated as it enables caching for mobile devices and makes your website mobile-friendlier.

Also select Separate cache files for mobile devices. Because WP Rocket mobile caching works safest with both options enabled. When in doubt, keep both.

2. User Cache: Enable caching for logged in WordPress users, this is only recommended to have activated when you have a membership site, or similar when users must log in to see the content.

3. Cache Lifespan:  Cache lifespan is automatically set to 10 hours and this means that cached files are automatically removed after 10 hours before being re-created. If you rarely update your site or have a lot of static content, you can increase this.

Save and test, thoroughly! Deactivate settings if you notice anything broken on your website.

WP ROCKET CSS AND JS FILES OPTIMIZATION SETTINGS

Minifying files reduce file sizes and can improve loading time. Minification removes spaces and comments from static files, enables browsers and search engines to faster process HTML, CSS, and JavaScript files.

Combining files will concatenate files into smaller groups in order to ensure theme/plugin compatibility and better performance. However forcing concatenation into just 1 single file is not recommended, because browsers are faster downloading up to 6 smaller files in parallel than 1-2 large files.

Combining CSS and JS into fewer files is considered a best practice under HTTP/1, that’s not necessarily the case with HTTP/2. If your site runs on HTTP/2, here are the things you should consider when configuring WP Rocket for HTTP/2.

1. Minify HTML files will remove whitespace and comments to reduce the size of the web pages on your site.

2. Combine Google Fonts files will reduce the number of HTTP requests (especially if you are using multiple fonts).

3. Remove query strings from static resources can improve the performance grade on GT Metrix. This setting removes the version query string from static files (e.g. style.css?ver=1.0) and encodes it into the file name instead (e.g. style-1-0.css).

4. Minify CSS files will remove whitespace and comments to reduce stylesheet file sizes.

5. Combine CSS files merges all your files into just one file, which will reduce the number of HTTP requests. Not recommended if your site uses HTTP/2.

Important: This could break things! If you notice any errors on your website after having activated this setting, just deactivate it again, and your site will be back to normal.

6. Optimize CSS delivery eliminates render-blocking CSS on your website for faster perceived load time. This means that your page will start to load without CSS styles and this is something Google PageSpeed Insights takes into consideration when ‘scoring’ page speed.

Critical path CSS means that your page will start loading without all its CSS styles. That means it could look a little strange for a few moments while loading.

This is called the FOUC (flash of unstyled content). To avoid this, you must use what is called Critical Path CSS. This means that the CSS for the content at the top of your page must be placed directly in the HTML to avoid the FOUC while the page loads.

To generate the critical path CSS you can use this Critical Path CSS Generator tool.

7. Minify JavaScript files remove whitespace and comments to reduce the size of JS files.

8. Combine JavaScript files combine your site’s JavaScripts info fewer files, reducing HTTP requests. Not recommended if your site uses HTTP/2.

Important: This could break things! If you notice any errors on your website after having activated this setting, just deactivate it again, and your site will be back to normal.

9. Load JavaScript deferred eliminates render-blocking JS on your site and can improve load time. This is something Google PageSpeed Insights takes into consideration when ‘scoring’ page speed.

10. Safe Mode for JQuery ensures support for inline jQuery references from themes and plugins by loading jQuery at the top of the document as a render-blocking script.

Save and test, thoroughly! Deactivate settings if you notice anything broken on your website.

WP ROCKET MEDIA SETTINGS

1. Lazy load images mean that images will be loaded only as they enter (or are about to enter) the viewport, i.e. only gets loaded when the user scrolls down the page. Lazy loading reduces the number of HTTP requests which can improve load times.

(I sometimes disable lazy loading of images, only because when lazy loading is enabled, anchor links pointing to a position below a lazy loaded image scrolls to the wrong position of the webpage)

2. Lazy load iframes and videos mean that iframes and videos will be loaded only as they enter (or are about to enter) the viewport, i.e. only gets loaded when the user scrolls down the page. Lazy loading reduces the number of HTTP requests which can improve load times.

3. Replace YouTube iframe with preview image can significantly improve your loading time if you have a lot of YouTube videos on a page.

Lazyload can be turned off on individual pages/posts (you find this setting in the post/page sidebar)

4. Disable Emoji should be disabled because the default emoji of visitors’ browser should be used instead of loading emoji from WordPress.org. Disabling emoji caching reduces the number of HTTP requests which can improve load times.

6. WordPress embeds should be disabled because it prevents others from embedding content from your site, it also prevents you from embedding content from other sites, and removes JavaScript requests related to WordPress Embeds.

Save and test, thoroughly! Deactivate settings if you notice anything broken on your website.

WP ROCKET PRELOAD SETTINGS

1. Sitemap preloading uses all the URLs in your XML sitemap for preloading when cache lifespan has expired and the entire cache has been cleared.

2. Yoast SEO XML sitemap. WP Rocket will automatically detect XML sitemaps generated by the Yoast SEO plugin. You can check the option to preload it.

3. Preload bot should only be activated and used on well-performing servers. Once activated, it gets triggered automatically after you add or update content on your website. Change to Manual if this is causing high CPU usage or performance issues.

When you write or update a new post or page, WP Rocket automatically clears the cache for that specific content and any other content related to it. The preload bot will crawl these URLs to regenerate the cache immediately.

4. Prefetch DNS requests allows domain name resolution to occur in parallel with (instead of in serial with) the fetching of actual page content.

You can specify external hosts (like //fonts.googleapis.com & //maxcdn.bootstrapcdn.com) to be prefetched as DNS prefetching can make external files load faster, especially on mobile networks.

Most common URLs to prefetch are:

  • //maxcdn.bootstrapcdn.com
  • //platform.twitter.com
  • //s3.amazonaws.com
  • //ajax.googleapis.com
  • //cdnjs.cloudflare.com
  • //netdna.bootstrapcdn.com
  • //fonts.googleapis.com
  • //connect.facebook.net
  • //www.google-analytics.com
  • //www.googletagmanager.com
  • //maps.google.com

Save and test, thoroughly! Deactivate settings if you notice anything broken on your website.

WP ROCKET ADVANCED RULES SETTINGS

These settings are for advanced cache management, usually for excluding cart and checkout pages in ecommerce sites.

1. Never cache URL(s) lets you specify URLs of pages or posts that should never get cached.

2. Never cache cookies lets you specify the IDs of cookies that, when set in the visitor’s browser, should prevent a page from getting cached.

3. Never cache user agents lets you specify user agent strings that should never see cached pages.

4. Always purge URL(s) lets you specify URLs you always want to be purged from the cache whenever you update any post or page.

5. Cache query strings lets you specify query strings for caching.

Save and test, thoroughly! Deactivate settings if you notice anything broken on your website.

WP ROCKET DATABASE SETTINGS

 

This section comes with a range of settings to clean up and optimize WordPress.

1. Post cleanup deletes revisions, auto drafts, and trashed posts and pages. Delete these unless you have old versions of posts (or deleted posts).

2. Comments cleanup deletes spam and trashed comments.

3. Transients cleanup deletes stored data that like social counts but sometimes when transients get expired they stay in the database and can be safely deleted.

4. Database cleanup optimizes tables in your WordPress database.

5. Automatic cleanup. I usually do cleanups on an ad hoc basis but you can also schedule WP Rocket to run automated cleanups of your database.

Ideally, you should backup your database before you run a cleanup, because once the database optimization has been performed, there is no way to undo it.

WP ROCKET CDN SETTINGS

Using a content delivery network (CDN) means that all URLs of static files (CSS, JS, images) will be rewritten to the CNAME(s) you provide.

1. Enable CDN. Enable this if you are using a content delivery network. WP Rocket is compatible with most CDN’s like Amazon Cloudfront, MaxCDN, KeyCDN (which I’m using) and others. Find out more on how to use WP Rocket with a CDN

2. CDN CNAME(s). Copy the CNAME (domain) given to you by your CDN provider and enter it into the CDN CNAME. This will rewrite all URLs for your assets (static files).

3. Exclude files lets you specify URL(s) of files that should not get served via CDN.

Save and test, thoroughly! Deactivate settings if you notice anything broken on your website.

WP ROCKET ADD-ONS (CLOUDFLARE)

WP Rocket lets you integrate your Cloudflare account with its add-on function.

1. Global API Key. You’ll find the API key in the top right in your Cloudflare account. Simply go to your profile and scroll down and you will see your global API key. You just have to copy and paste this into WP Rocket.

2. Account Email. This is the email address you use for your Cloudflare account.

3. Domain. This is your domain name, e.g. websitehostingrating.com.

4. Development Mode. Temporarily activate development mode on your website. This setting will automatically turn off after 3 hours. This is good for when you are making lots of changes to your site.

5. Optimal Settings. Automatically enhances your Cloudflare configuration for speed, performance grade and compatibility. This option activates the optimal Cloudflare settings.

6. Relative Protocol. Should only be used with Cloudflare’s flexible SSL feature. URLs of static files (CSS, JS, images) will be rewritten to use // instead of http:// or https://.

WP ROCKET TOOLS

1. Export settings lets you export your WP Rocket settings to use on another site.

2. Import settings lets you import your pre-configured WP Rocket settings.

3. Rollback lets you revert back to a previous version if a new version of WP Rocket causes any issues for you.

CONFIGURING WP ROCKET FOR HTTP/2

HTTP/2 is an upgrade to the HTTP which has been around since 1999 to manage the communication between web servers and browsers. HTTP/2 paves the way for faster page loads through better data compression, multiplexing of requests, and other speed improvements.

Many servers and browsers have support for HTTP/2, and most web hosts, like SiteGround, now support HTTP/2. This HTTP/2 checker tells you if your site is capable of using HTTP/2.

If your site is capable of using HTTP/2 here’s how you can configure WP Rocket for it.

Concatenating (combining) all CSS and JS files into as few files as possible is not the best practice for HTTP/2 and WP Rocket recommends you to not activate file concatenation in the file optimization tab.

WP Rocket recommends that you leave these two boxes unchecked. For more information see this article on WP Rocket.

HOW TO USE WP ROCKET WITH KEYCDN

Setting up WP Rocket with KeyCDN is pretty straightforward. (FYI KeyCDN is the content delivery network I use and recommend)

First create a pull zone in KeyCDN. Then go to the CDN tab and check the Enable Content Delivery Network option.

Now, update the Replace site’s hostname with:” field with the URL that you get from the KeyCDN dashboard (under Zones > Zone URL for the pull zone that you created. The URL will look similar to something like: lorem-1c6b.kxcdn.com)

Alternatively, and the recommended option, use a CNAME of your URL of choice (for example https://static.websitehostingrating.com)

 

I hope this guide helped you learn how to install and set up WP Rocket plugin in WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button