More and more people are choosing to start a website with WordPress. The advantage of WordPress is that little to no program code is required to start a website. Going through an installation process is enough to start a website.
However, what many people do not realize is that the speed of a website and especially the user experience is an important factor for Google to rank high in the search results.
In May 2021, Google released the “Website Vitals” introduced. Web Vitals is an initiative by Google to provide uniform guidelines for quality signals that are essential for delivering an optimal user experience on the web.
Google has provided a number of tools over the years to measure and report on performance. Some developers are experts at using these tools, while others find the abundance of both tools and metrics challenging to keep up with.
Site owners shouldn't have to be presentation gurus to understand the quality of experience they provide to their users. The Web Vitals initiative aims to simplify things and help sites focus on the metrics that matter most, the Core Web Vitals.
Since the arrival of Web Vitals, it has become even more important to optimize your WordPress website for speed and user experiences.
This is what WP-Rocket can help with. WP-Rocket is a WordPress plugin that makes optimizing your WordPress website as easy as possible. The functions in WP-Rocket are designed in such a way that a single click with a brief explanation is sufficient for the novice WordPress website administrator.
What is WP Rocket?
WP-Rocket is the most powerful caching plugin in the world. Use it to improve your WordPress site speed, SEO ranking and conversions. No programming required.
WP-Rocket installs easily and will cache your WordPress posts and pages as static files. These static files are then served to users, reducing the processing load on the server. This can improve performance hundreds of times.
Browser caching can help reduce server load by reducing the number of requests per page. For example, by setting the correct file headers on files that do not change (static files such as images, CSS, JavaScript, etc.), browsers will cache these files on the website visitor's computer.
This technique allows the browser to check whether files have been changed, rather than simply requesting them. The result is that your web server can provide many more 304 responses, which confirm that a file is unchanged, rather than 200 responses, which require the file to be submitted.
Make your website faster with WP Rocket
In these tips I will explain to you step by step how to install WP-Rocket in WordPress and how you can optimally set up the WP-Rocket functions for your WordPress website.
Install WP Rocket
To install WP-Rocket, you must first purchase WP-Rocket via the website wp-rocket.me.
WP-Rocket Single costs 1 euros for 1 website and 44 year of updates and support. The second package, the Plus package, offers 1 year of updates and support for 3 websites and costs 88 euros. Then there is the Infinite package and this costs 222 euros. You will also receive 1 year of updates and support for an unlimited number of WP-Rocket installations.
*Please note prices are constantly changing. This WP-Rocket price information is up to date at the time of writing this article.
If you have purchased WP-Rocket, you can download WP-Rocket immediately. You will receive a ZIP file that you can upload to the Plugins of your WordPress website.
Login to your WordPress website. Click on Plugins in the left menu, then on Installed Plugins and then on the New Plugin button.
Click the Upload Plugin button to upload the WP-Rocket plugin to your WordPress website.
Click Choose File and select the wp-rocket zip file. Then click on the Install Now button.
To complete the WP-Rocket installation, you must activate the WP-Rocket plugin in your WordPress installation. Click on the Activate Plugin button.
If you have activated WP-Rocket, it is time to adjust the WP-Rocket settings.
On the left in the menu, click on Settings and then on WP-Rocket.
Once you have opened the WP-Rocket settings, you will end up in the WP-Rocket Dashboard. At the top you will immediately see a notification whether you want to allow WP-Rocket to collect diagnostic data from your web server and WordPress installation.
This concerns the following data. The type of web server, the PHP version number, the WordPress version number, multisite details, your currently installed WordPress theme, the website language, and the amount of WordPress plugins installed.
The WP-Rocket dashboard provides an immediate overview of all functions on the left. In the middle you will see information about your account and on the right you will see three quick actions.
For example, the quick actions allow you to delete all cached files by clicking the “Clear cache” button. You can also start the Cache preload by clicking the “Preload Cache” button and you can immediately empty the Contents of the OPCache by clicking the “Empty Opcache” button.
On the left we see a number of functions that WP-Rocket offers. Namely Cache, File Optimization, Media, Preloading, Advanced Rules, Database, CDN, Heartbeat, Add-ons, Image Optimization, Tools and Tutorials.
I will explain each of these functions. I will also recommend the best settings for the average WordPress website.
cache
Cache are the files created by WP-Rocket to make your website faster. Caching solutions store a static version of your website pages. This allows WordPress to skip running the heavier PHP scripts and improve the speed of your website.
Mobile cache
In WP-Rocket a distinction is made between “normal” cache files and mobile cache files. For example, you can select the option: Enable caching for mobile devices to load your website faster for visitors with a mobile device, such as a phone or tablet.
If you have installed a mobile theme or are using a plugin that redirects mobile visitors to a mobile version of your website, you should also enable the option: Separate cache files for mobile devices.
User cache
If you protect a certain part of your website from users, you must enable the user cache.
Consider a section on your website that is only available for a fee or for specific website visitors. Usually this is a section where website visitors must log in. Then enable the option: Enable caching for logged in WordPress users.
Cache lifetime
To ensure that your visitors constantly see an updated version of your website, it is important to have the cache automatically cleared every so often. This is certainly important for WordPress blog websites, if there is a new blog post you don't want people to see the new blog post yet because there is still a cache file pointing to the old blog post.
I recommend keeping the default time of 10 hours for clearing the cache files. If you are not posting any new posts and the website is static then you can increase the cache clearing time. Then set the cache empty time to 24 hours even a few days.
It is important to know that the cache is automatically rebuilt after emptying. WP-Rocket then checks the website based on internal links in your WordPress posts and caches every page again. If you have a lot of messages, 1000 or more, caching (preloading) may take a little longer. Please take this into account.
File optimization
The file optimization settings offer a number of functions to optimize specific files for the browser that ensure that your website is displayed correctly. Here's how to minify CSS scripts, minify JavaScript, and defer JavaScript.
Minify CSS files
Cascading Style Sheets (CSS) is a standard for specifying the visual presentation of HTML documents. CSS is intended for use by graphic designers: it allows a designer to control fonts, colors, margins, indents, borders, and even the position of document elements.
It is recommended to minify CSS files. If you enable this feature in WP-Rocket, WP-Rocket will uncomment CSS files and remove white spaces. All this leads to a smaller CSS file, which then immediately loads faster in the website visitor's browser.
Combine CSS files
To combine CSS files you must enable the option: Minify CSS files. This feature combines the CSS files used on your website into 1 file. If your website provides an HTTP connection, this will lead to faster loading of the website. However, if your website has HTTP/2 (and most modern web servers now have this), then combining CSS files into 1 CSS file offers no advantages. To check whether the web server your website is running on has HTTP/2, you can here check.
Javascript deferred loading
The defer attribute tells the browser not to execute the JavaScript file until the HTML document has been completely parsed. Which means that Javascripts are only loaded when the rest of the website has already loaded. This means that the visitor's browser does not have to wait for the Javascripts to load. Javascripts can often take longer to load and this can lead to incorrect representation of the structure and appearance of the website, also known as “render blocking”. It is recommended that you enable this feature, but also test your website thoroughly to see if the website is displayed correctly in the browser.
Delay javascript execution
If you enable this feature, the visitor's browser will wait before executing JavaScript. The JavaScript code that may have been implemented in the theme of your website will only be loaded when the visitor actually sees the element. All this saves time for the browser to wait and also data to load the website. Several external scripts are already pre-programmed in WP-Rocket. I recommend enabling this feature.
Media
In the media settings in WP-Rocket you can set optimizations for media files such as images and built-in video files. It is important to optimize media on your website to reduce page size and make the website load faster for visitors.
LazyLoad
LazyLoad is simply the delayed display of media files such as images and video files. When the user comes to the website, only images and possibly video files are loaded that are immediately visible to the visitor. All other images on this page will not load until the visitor actually sees the element. Enabling LazyLoad for images, iframes and videos reduces the page content that needs to be loaded by the visitor. All this leads to faster display of the page content and therefore a better user experience.
Image dimensions
To offer an optimal user experience to your website visitors, it is important that the website does not shift all kinds of elements after partially loading the website, this is called “layout shifts”. To prevent this, you can still have WP-Rocket add the dimensions for images that have not been given dimensions in the source code of your website. This prevents “layout shifts” and therefore a better user experience for your visitors. I recommend enabling this feature.
Disable WordPress Embeds
WordPress has a feature called auto-embeds that allows your website to automatically get the embed code from popular video hosting services such as YouTube, Vimeo, etc. However, this results in a longer loading time. If you do not offer images or videos from other services or websites in your website, I recommend disabling Embeds by enabling this feature. If you use Embeds, leave this function off.
WebP compatibility
WebP is an image format developed and first released by Google in 2010. It supports encoding images in both lossless and lossy formats, making it a versatile format for any type of media, and a great alternative format to either PNG or JPEG. The visual quality of WebP is often comparable to more well-known formats. WP-Rocket can detect WebP files in your website content and cache those files. However, WP-Rocket cannot create WebP files. For this you need to install another plugin. If you want to use WebP, enable this option.
I recommend Imagify and then enable this option in combination with Imagify. WebP image files significantly reduce the overall size of your website, which in turn makes the website load faster, resulting in a better user experience for the visitor.
Preload
Preloading is the English word for preloading.
Activate preloading
If you enable preloading, WP-Rocket will start caching all pages on your website. Initially, WP-Rocket looks for all internal links and then starts caching.
Enable sitemap-based cache preloading
However, if you enable the sitemap based cache preload option, the links will be retrieved from the sitemap file.
Preload links
Preloading is important to optimize the user experience. It provides the user with a faster website because the content of the next page is preloaded via the browser. If the visitor clicks on a hyperlink, the visitor will immediately see the page to which the hyperlink refers. To enable this, enable the function: Enable links preload. I recommend enabling this feature.
Preload DNS requests
Prefetching, also known as DNS prefetching, is the request of a website's IP address before a user clicks on the link. Preloading a DNS request makes a website load faster, especially on mobile devices. I recommend enabling this feature. However, you must first check which DNS requests your website makes, so some technical knowledge is required.
Preload fonts
If you serve font files yourself via your website, you can load these font files in advance. Preloading a font provides a better user experience because the font file loads faster than via the source code of your website.
Advanced rules
The advanced rules in WP-Rocket help you by excluding certain parts of your website from optimization. Especially for websites that have a lot of dynamic content, excluding optimization for specific parts of the website can help.
Never cache URL(s).
It is very easy to exclude a page or pages from the cache. After all, you don't want everything to be cached, such as a shopping cart on an ecommerce website. WP-Rocket is already compatible with the following plugins: WooCommerce, BigCommerce, Easy Digital Download, iThemes Exchange, Jigoshop and WP-Shop. If you use another ecommerce plugin, I recommend excluding specific components from the cache here.
Never cache cookies
This feature prevents caching and optimization based on the presence of a specified cookie. Cookies are often used to tailor content to website users.
Ideally, the content is dynamically updated using the AJAX method. Although some widgets/plugins use PHP code instead. PHP does not run on cached pages and therefore its content is cached.
As a solution, it is possible to prevent cached pages from being served once a specific cookie is set in the browser.
The “never cache cookies” feature in WP Rocket is often used when the items in the shopping cart are updated with PHP code. To prevent the quantity/price of the items from being incorrectly displayed it is possible to exclude pages from caching when an item is added to a shopping cart (i.e. a cookie is set by an e-commerce plugin/widget). So some technical knowledge is required before you set anything here.
Never cache user agent(s).
The feature is used to prevent cached and optimized pages from being served on certain devices and browsers.
The User-Agent request header is a string that allows servers to identify the operating system, vendor, and/or version of the browser used to open a page. So if you want to exclude certain user-agent strings from cache, you can enter them here. Again, some technical knowledge is required as well depending on the type of website you manage.
Always empty URL(s).
When a post or page is updated, the cache will be partially cleared, i.e. the cache will only be cleared for that post or page and its related content (e.g. taxonomy archives). If you notice that the related content on some other pages is not updated (e.g. a page that displays blog posts), you can use the “Always empty URL(s)” feature.
Cache query string(s).
By default, WP Rocket does not cache pages with query strings, although there are some very specific exceptions.
A query string is a URL that contains a question mark followed by a parameter and a value, like this:
example.nl/pagina/?land=netherlands
In this case, country is the parameter and the Netherlands is the value. If you want the parameter “country” in this example to be cached, enter this here. Some technical knowledge required as well as the type of website you manage.
Database
A WordPress website has an underlying database. All kinds of data and relationships are kept in this database. It is recommended to periodically clean up this data in the database and associated relationships. WP-Rocket can optimize the database for your website.
Clean up messages
Posts (blog posts) in WordPress track revisions and automatic drafts. If you have many revisions and drafts in the WordPress database, the database can become full and therefore slow down the queries in the database. Cleaning revisions, drafts and deleted messages can be permanently deleted by WP-Rocket. It is important to always have a backup before using these database functions!
Cleaning up comments
Spam and old (deleted) comments are unnecessary and fill the database with unnecessary data.
Clean up transients
Transients are nothing but temporary options, which are kept in the database for a certain period of time, meaning that they expire once their purpose is fulfilled. You can therefore have this removed safely by WP-Rocket.
Clean database
Database optimization is the way to reduce the response time of database systems.
Databases provide us with information stored with a hierarchical and related structure, which allows us to easily organize the content. Periodically optimizing database tables can reduce the database response speed (response time), resulting in a faster database and therefore less waiting time for the website visitor.
CDN (RocketCDN)
RocketCDN is WP-Rocket's proprietary content delivery network. It is an optional, paid subscription service. Using a CDN will help improve your website load time for visitors who are far away from where your server is located.
For more information about RocketCDN, please refer to the RocketCDN information page.
Heartbeat
WordPress heartbeat is an API service introduced from WordPress version 3.6. As the name suggests, the heartbeat API sends a continuous pulse (technically called a tick) to perform periodic tasks. This helps the browser to talk to the server using AJAX calls and provide real-time information on the WordPress dashboard.
If the WordPress heartbeat is constantly busy performing tasks because it is prompted to do so by plugins or by WordPress itself, this will slow down your website enormously. In WP-Rocket you have the function to slightly limit or disable the heartbeat in WordPress. You can limit the heartbeat for background processes, processes in the WordPress editor, and processes running in the foreground. Think of Ajax calls, etc. It is advisable to limit these heartbeat processes on all components. Check your website and WordPress theme after limiting the heartbeat (if everything still works properly).
Add-ons
In WP-Rocket you have a number of standard add-ons. These add-ons help to further optimize your website for certain parts if you use them.
Google Tracking
This way you can activate the “Google Tracking” add-on. By activating this feature you can move the scripts that Google Analytics uses on your website from external scripts to internal scripts. The web server then makes one less connection to an external server, which improves the score in Google PageSpeed, among other things. If you use Google Analytics, enable this function.
Facebook Pixel
The Facebook Pixel is also a tracking method. This is another connection to Facebook's servers. If you want to optimize your website, it is better to limit all connections to your own server as much as possible, an external connection means waiting time for the browser and this can slow down the site and lead to a lower score in Google PageSpeed. If you use the Facebook Pixel, enable this feature.
Varnish (Cache)
If your web server uses Varnish cache then enable this option. WP-Rocket will then clear the Varnish cache when you indicate in WP-Rocket that you want to empty the cache.
CloudFlare
You can manage CloudFlare settings directly from your WP-Rocket settings. Provide your account email, global API key, and domain to use options such as clearing the Cloudflare cache and enabling optimal settings for WP Rocket.
Sucuri
Sucuri is a service to protect your WordPress website against attacks. Sucuri also offers a caching method. If you wish to clear the cache directly from your WP-Rocket settings, enter the requested information here.
Tools
WP-Rocket offers you tools, which are tools to manage settings in WP-Rocket itself. This is how you can export WP-Rocket settings. Import the settings and install an older version of WP-Rocket if the latest version is causing problems on your website.
I hope this information about WP-Rocket and the WP-Rocket features have helped you. If you have additional questions about WP-Rocket settings, you can ask them at the bottom of this article in the comment field.