How To Speed Up Your WordPress Site with WP Rocket
Is your WordPress website slow? Are you looking for a way to speed up your WordPress website’s load time? Then this WP Rocket tutorial is for you.
WP Rocket is a WordPress performance optimization plugin. It helps you boost your site’s performance and resolve the issues suggested by Google PageSpeed Insights.
This can get you better PageSpeed scores and also improve your WordPress site performance. A faster site often means more visitors and more engagements. In this post, we’re going to learn how to speed up a WordPress site with WP Rocket.
Please note, WP Rocket is a premium plugin and has no free version. But it’s really an amazing plugin that thousands of users rely on. In fact, many WordPress experts recommend using WP Rocket to optimize WordPress websites. So, once you get WP Rocket, you can follow this tutorial to make your WordPress website faster and boost the performance of your site.
What is WP Rocket and how it can help
First, let’s understand what WP Rocket is. WP Rocket is a WordPress performance optimization plugin that helps you boost your WordPress performance and speed. When working on a WordPress site, many developers mostly focus on the design and functions. They often forget about the performance of the website, which is one of the most important aspects.
In fact, if your site takes too long to load, your visitors will leave. No matter how beautiful your site is, if it doesn’t load properly, its visitors will leave. This puts a bad impression on your business.
That is why we have to take a performance-first approach when it comes to web development. A great thing about using WordPress is that we don’t have to think much about coding. There are plugins that can help you optimize your website’s performance and make it a lot faster! WP Rocket is one such plugin that requires no coding. You install it, activate+configure it, and it makes your WordPress faster- just like that!
In this tutorial, we’ll take a look at how you can optimize your WordPress site with WP Rocket.
👉 Get WP Rocket Plugin NOW! 🚀
🔥 Unlimited License Plan Available ✅
How to speed up a WordPress site with WP Rocket
The first thing that you need to do is getting WP Rocket. As we mentioned earlier, WP Rocket is a premium plugin and doesn’t have a free version. So, once you get WP Rocket, download the installer zip file on your computer. Before you install WP Rocket, it might be a good idea to check the Google PageSpeed score of your WordPress website. This way, you’ll be able to better compare the performance of your website after using WP Rocket.
When you’re ready, log in to your WordPress dashboard where you want to use WP Rocket. Navigate to Plugins > Add New Plugin from your WordPress dashboard and click on the “Upload plugin” button. Then select the WP Rocket zip file that you downloaded and install the plugin. Once it’s installed click on the “Activate” button to activate the plugin.
As soon as WP Rocket is activated, it starts working on your site. You can also test the PageSpeed score and you’ll see the difference. But we will do a little customization and discuss different features and settings offered by WP Rocket.
WP Rocket dashboard
To access WP Rocket settings and features, go to Settings > WP Rocket from your WordPress dashboard. This will open up the WP Rocket features and settings. The first tab that you’ll be led to is the WP Rocket Dashboard. Here you can take a look at your WP Rocket license info such as license expiration date, license type etc.
In the Quick Actions section, you can see two buttons. One is for clearing all cached files and the other one is to remove used CSS cache.
On the dashboard you can also find tutorials, documentation links, FAQs, etc.
File Optimization
Our main WP Rocket configuration begins fron the file optimization tab. There are several things that you can do here. Its first section is the CSS files. Here you’ll find two options:
- Minify CSS files: Removes white spaces and comments to reduce file size.
- Optimize CSS delivery: Eliminates render-blocking CSS on your website.
You can enable both these features. When you enable Minify CSS files, a notification will pop up saying “This could break things!”
Now if you click on the “ACTIVATE MINIFY CSS” button, the feature will be activated. But if you see any errors on your site after activating this option, simply disable it and your site will be back to normal.
When you enable the optimize CSS delivery option, a new section will be revealed. From there you can click on the “REMOVE UNUSED CSS” button. The label of the button explains the action really well, so you already know what this does.
In the next section, you can optimize the JavaScript files. Here you’ll find the following options:
- Minify JavaScript files: Removes white spaces and comments to reduce the file size.
- Combine JavaScript files: Combines your site’s internal, 3rd party and inline JS reducing HTTP requests. Not recommended if you’re using HTTP/2. This option can only be selected after enabling “Minifying JavaScript files” option.
- Load JavaScript deferred: Eliminates render-blocking JS on your site and can improve load time.
- Delay JavaScript execution: Improves performance by delaying the JavaScript file execution until user interactions (e.g. scrolling, clicking).
Here, you can enable the first option which will minify your JS files. Just like CSS, this will also give you a warning. So, if you want to enable this option, do it, and then check if everything on your site is ok. If you find any errors, come back to this section and disable this option.
For the 2nd option, which combines your site’s JS files, it can only be enabled if you’ve enabled the minify JavaScript option. In many cases, leaving this option disabled are the best choice. But if you think this will improve your site’s performance and won’t cause any issue, you can enable it.
The 3rd option is the load JavaScript deferred. It will eliminate render-blocking JS files and can improve your site’s load time. So, you can enable this option. You’ll also see an input box after you enable this option. Here you can place the URL or keywords of your JavaScript files and those files will be excluded.
The 4th option delays the JavaScript execution when enabled. The JavaScript files will only be executed on user interactions such as clicking or scrolling. When you enable this option, the JavaScript files that are usually executed on page-load, will be delayed till user interaction. Only when the user interacts, these JS files will then be executed. So, this might be a good option for you to enable.
Once you enable this option, you can also see the one-click exclusion list. This list contains the analytics and ads JS options. If there are files such as Google Ads, Google AdSense, Google Maps, etc. that you don’t want to delay, you can choose those from this list.
Another thing to note here, if you enable the 4th option, which is delay JS execution, the 2nd option, which is, combine JS files, will be disabled.
After you’re done working with all the options in the File Optimization settings, click on the “Save Changes” button on the bottom and move onto the next tab.
👉 Get WP Rocket Plugin NOW! 🚀
🔥 Unlimited License Plan Available ✅
Media
When you click on the Media tab, the first option that you’ll see is the Lazyload. Lazyload is a feature where the images, iFrames and videos load only when they are visible in the viewport. That means these media files will only load when the users view them. This improves loading time and reduces the number of HTTP requests. Here you can enable lazy load for the following:
- Images
- CSS background images
- iFrames and videos
Another option you’ll find here is the image dimension. If you enable this, it adds the missing width and height attributes to images. This helps prevent layout shifts and improve the reading experience for your visitors. So you can enable this option too.
After you’re done here, don’t forget to click on the “Save Changes” button to save your progress.
Preload
The next tab has the preload features. The options here can improve your site’s load speed. The first option is the preload cache. If you activate this WP Rocket will automatically detect your sitemaps and save all URLs to the database. This will ensure that your cache is always preloaded. So, it might be a good idea to enable this feature.
After you activate the preload cache option, you’ll also be given an input box where you can add the URLs that you want to exclude from the preload.
The next option is the preload links. When you enable this feature, it downloads a page when a user hovers over the link which improves the perceived load time. In our case, we enabled this feature too.
The next option is the prefetch DNS requests. Here you can include the URLs that you want to prefetch. DNS prefetching can make external files load faster.
The final option here is the font preloading. If you’re hosting fonts on your own domain, you can add the link to the font here. This will improve the performance by helping browsers discover fonts in CSS files.
Advanced Rules
Usually leaving this section with the default settings is a good idea. But you can go ahead and take a look at all the settings available here. Change the settings only when you think it’s a good idea.
The first option here is the cache lifespan. Cache will be generated periodically. You can specify the number of hours after which the cache file will be removed by WP Rocket. You have to enable the preloading feature for the cache so that those will be automatically rebuilt after lifespan expiration.
In the next section, you’ll find the “Never Cache URL(s)” section. Here you can add the URLs of sensitive pages such as custom login/logout which should never be cached.
There’s also a section titled “Never Cache Cookies”. Here you can set the IDs of the cookies that you don’t want to be cached. If you’re not sure about this part, better leave it as it is.
The next section is the “Never Cache User Agent”. Here you can specify which user agent should never see cached pages. User agents such as mobile browsers, bots, etc.
In the next section you should see “Always Purge URLs”. The title is already self-explanatory. Here you can add the URLs of the pages whose caches you want to purge or delete after your update a post or page.
Finally, there’s the “Cache Query String” option. Here you can specify query strings, and those will be force cached for specific GET parameters.
Database
When we use our WordPress site, a lot of information gets saved into our database. If you want to remove such data from the database, you can enable some of these options here. However, do keep in mind that these will remove data such as spam comments, drafts, trashed posts, revisions, etc. If you want to keep these data, better leave these fields unchecked. But if you’re fine with removing such data, you can select the options that you want to remove. This will free up some space in your database and will improve performance.
After you’re done here, scroll down and click on the “SAVE CHANGES AND OPTIMIZE” button to save and apply your changes.
👉 Get WP Rocket Plugin NOW! 🚀
🔥 Unlimited License Plan Available ✅
CDN
If you don’t have any CDN plan, you can use RocketCDN. It is a high performance CDN with unlimited bandwidth. It will cost you $7.99 per month.
If you enable CDN, all your CSS, JS, images will be rewritten to the CNAME you provide. You can simply click on the “ADD CNAME” button and add in your CNAME. If you’re using services like Cloudflare and Sucuri, you don’t need to enable CDN here.
You can also exclude files from CDN. This option is available at the bottom. Here you can specify the link of the file that you wish to exclude from CDN.
Finally, when you’re done, remember to save your changes before you move onto the next option.
Heartbeat
The next tab holds the heartbeat settings. The heartbeat is a feature where your WordPress website tries to communicate with the server (from a browser). When this happens, it takes up some resources. Here you can enable the “Control Heartbeat” feature which will reduce or disable the Heartbeat’s API activities. This will help you save up some resources.
You can reduce the heartbeat activity for backend, post editor, and frontend. Just click on the “Reduce activity” button beside each section to edit the heartbeat activity. But remember, this may affect your website’s functionalities.
Add-ons
You can also add more features through add-ons. From this tab you can enable Rocket add-ons with one click. The addons which are available are as follows:
- User Cache
- Varnish
- WebP Compatibility
- Cloudflare
- Sucuri
If you’re using Cloudflare you’ll find this addon already enabled.
Image Optimization
If you’re not using any image optimization tool, then you might be interested in Imagify. Imagify has been created by WP Rocket to optimize the images on your website and boost performance. You can compress all your images with one click and convert images to WebP and Avif. Imagify has a free plan where it lets you use 20MB per month.
But if you’re using any other image optimization plugin, you can use that too.
Tools
In the tools section you can find export settings, import settings, rollback, update inclusions and exclusion lists.
Tutorials
Finally in the tutorials tab you can find helpful tutorials to get you started with WP Rocket.
That’s all you can find in WP Rocket. Once you’re done with the settings, make sure to save all your changes when you switch from tab to tab.
Once you’re done, go ahead and check your site’s Google PageSpeed score and notice the difference. That’s the benefit of using a premium website optimization plugin like WP Rocket. You don’t have to worry about your WordPress website being slow.
👉 Get WP Rocket Plugin NOW! 🚀
🔥 Unlimited License Plan Available ✅
👉 Video: WP Rocket Tutorial
Conclusion
WP Rocket is an amazing plugin. We used it on one of our production sites and we loved the result. Make sure to check out our video to see the result yourself. Usually, you don’t have to access and change all the settings, but if you know what you’re doing, you can do some customization. In this post, we briefly explained some of the most interesting settings of WP Rocket. You can follow this guide and do your customization. Once you’re done you can see the difference in performance.
So that’s enough for this tutorial, we hope that you managed to speed up your WordPress website by using WP Rocket. Let us know about your experience with WP Rocket in the comment section.
Disclaimer: This post may contain affiliate links and we may receive a small commission if you purchase something by following them. However, we recommend services/products that we believe good to serve your purpose.