How to Install WP Rocket On NGINX
In this guide, I will show you how to:
- Download WP Rocket
- Install WP Rocket
- Configure WP Rocket Settings
- Install Rocket NGINX
- Configure Rocket NGINX
- Get the Fastest Response Times On the Internet!
If you did not already know, WP Rocket is the best caching plugin for WordPress. Just look at the results. Mind you these benchmarks do not include the additional effects of Rocket NGINX. Your benchmarks will be much better than those if you follow this guide.
In this guide I’m going to show you how to install and configure WP Rocket on NGINX. On Apache WP Rocket is great; however, on NGINX it’s even better. On NGINX, there’s a configuration available called Rocket NGINX so there will be no need for extremely complex solutions like Varnish.
Downloading and Installing WP Rocket
Firstly, you need to purchase WP Rocket if you have not already. If you are wondering if WP Rocket is worth the money, the answer is an emphatic yes. No other caching plugin works so seamlessly and is easier to setup than WP Rocket. WP Rocket also gets the best results.
Purchase WP Rocket with the link below.
Now you will need to install the plugin. Installing WP Rocket is as simple as other premium plugins. You can choose to either upload the plugin via FTP or upload via the Add Plugin menu. You can see how to install a WordPress plugin here.
Configuring WP Rocket On NGINX
After downloading and installing the plugin, you need to configure the caching options. The great thing about WP Rocket is that you have simplified, granular access to different caching options. You can minify and defer everything on your site to get 100’s on Google Page Speed or you can just activate caching for a better response time.
The settings I recommend activating for most themes is as follows:
- Enable caching for mobile devices
- Cache Lifespan of 10 Hours
- Minify HTML
- Combine Google Fonts files
- Remove query strings from static resources
- Minify CSS files
- Minify JavaScript files
- Disable Emoji
- Disable WordPress Embeds
- Activate sitemap-based cache preloading (If you have a sitemap generated)
- Preload Bot set to Manual and Automatic
These are the basic, quick win settings that I use for a starting point on all sites. The setting “Minify Javascript files” may break a lot of poorly programmed themes and plugins so tread carefully. Just play around with the minification settings until your website functions normally. The newer versions of WP Rocket take care of so many issues with minification that it’s pretty hard to break your site now.
Pro Tip: You can select certain pages or files to exclude in caching or minification, respectively. This allows you to get that one buggy plugin or shortcode working that is only present on certain pages.
I would benchmark before WP Rocket installation and after with Pingdom, GTMetrix, and Google Page Speed to see your benefits. Remember though, the only thing that matters is your load time and score on Google Page Speed. You want a website that converts and ranks well.
If a certain setting is getting a big increase in scores or page load, I would heavily investigate the issue(s) and try to solve them. Feel free to post issues in the comments and I can quickly help solve them for you.
Installing and Setting Up Rocket NGINX
WP Rocket will work out of the box on NGINX servers; however, if you want the best results you should use Rocket NGINX. Usually caching rules and HTTP headers are set with an .htaccess file on Apache; however, on NGINX our virtual host configuration does all of that. Rocket NGINX allows us to serve WP Rocket cached files directly without ever hitting WordPress which means you can achieve extremely fast response times. Website requests now go from NGINX → PHP-FPM → PHP → Static file to simply NGINX → Static file. This reduces RAM and CPU usage. Of course preloading the cache can take a concerted effort by the server, but you can mitigate this by letting the server handle CRON jobs instead of WordPress.
Install Rocket NGINX
You will need SSH access to your server.
To install, you can:
cd /etc/nginx
git clone https://github.com/maximejobin/rocket-nginx.git
These commands bring you to the directory where NGINX is installed. Then we clone the Rocket NGINX repository from GitHub. Now we need to make a configuration which needs to be generated.
cd rocket-nginx
cp rocket-nginx.ini.disabled rocket-nginx.ini
php rocket-parser.php
Now we copy the disabled ini file to a new file that we can use. This new file is used to generate our configuration files. Every time you edit the rocket-nginx.ini file, you will need to generate new configurations by using the last command php rocket-parser
. Remember that command because unless you are just running a personal website, you will find yourself tinkering with these configurations.
For instance, you may have multiple installs on the server. Chances are some installs might be in a sub-directory. In that case, the default configuration will not work because it will tell NGINX your files are at /root/example.com/wp-content/cache even though it is at /root/example.com/sub-directory/wp-content/cache.
Creating Additional Configurations
You can create a new configuration file for these specific installs by creating a new section at the bottom of the rocket-nginx.ini file.
[example.com : default]
wp_content_folder = sub-directory/wp-content
This will generate a new file identical to the default configuration with the exception of the wp-content folder is now pointed at the correct directory.
Pro Tip: If you added special HTTP headers in your virtual host file you have to add those in the rocket-nginx.ini file as well. Here is an example of what my websites uses:
http_header[X-Frame-Options]="SAMEORIGIN"
http_header[X-XSS-Protection]="1; mode=block"
http_header[X-Content-Type-Options]="nosniff"
http_header[X-UA-Compatible]="ie=edge"
gzip_header[X-Frame-Options]="SAMEORIGIN"
gzip_header[X-XSS-Protection]="1; mode=block"
gzip_header[X-Content-Type-Options]="nosniff"
gzip_header[X-UA-Compatible]="ie=edge"
css_header[X-Frame-Options]="SAMEORIGIN"
css_header[X-XSS-Protection]="1; mode=block"
css_header[X-Content-Type-Options]="nosniff"
js_header[X-Frame-Options]="SAMEORIGIN"
js_header[X-XSS-Protection]="1; mode=block"
js_header[X-Content-Type-Options]="nosniff"
media_header[X-Content-Type-Options] = "nosniff"
media_header[X-Frame-Options] = "SAMEORIGIN"
This tells Rocket NGINX to give all files the X-Frame-Options, X-XSS-Protection, and X-Content-Type HTTP headers. This headers are best practice for website security. I left out the Content-Security-Policy header because configuring that header is a much more involved process. Maybe another post is in order for that.
Next regenerate your configuration files with php rocket-nginx.ini
. If you run an ls command you will see the new files. Now all that’s left is to include to the new configuration file in the sites virtual host file.
Include Rocket NGINX Configuration in Virtual Host
This is a snippet of how I implement the configuration file in my virtual host. The first line would change to the name of your configuration file. So if I was using the configuration for the sub-directory install, my include would be include rocket-nginx/example.com.conf
. This is also assuming that your virtual host file is in a directory above the default NGINX directory such as /etc/nginx/sites-enabled.
include rocket-nginx/default.conf;
set $skip_cache 0;
if ($request_method = POST) {
set $skip_cache 1;
}
if ($query_string != "") {
set $skip_cache 1;
}
if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {
set $skip_cache 1;
}
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") {
set $skip_cache 1;
}
if ($request_uri ~* "/cart/*$|/checkout/*$|/my-account/*$") {
set $skip_cache 1;
}
include global/wordpress.conf;
location ~ \.php$ {
try_files $uri =404;
fastcgi_pass unix:/var/run/php-fpm/zachsblogs.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;
}
You will need to reload NGINX, but before you reload you will need to test the configurations. Run nginx -t
and if you have no errors run systemctl reload nginx
. Check your website to make sure it is working properly and now you can benchmark again and see the drastic difference for yourself. I typically see a 50% decrease in response times. Page load is mostly affected by large or external resources.
Rocket NGINX Isn’t Working
If you are not seeing a difference in your results you can turn debugging on in the rocket-nginx.ini file. This will send special debugging headers that you can inspect to get more information as to why it’s not working. For the longest time, one of my sites was trying to use the default.conf instead of the special file I generated for it. So make sure not to copy and paste my configuration if yours is different.
Configuration Complete
And that is how you install and configure WP Rocket on NGINX. If you run into any issues please feel free to comment below. I can respond much quicker than most support systems.
getting this error
nginx: [emerg] “set” directive is not allowed here in /etc/nginx/rocket-nginx/rocket-nginx.conf:17
nginx: configuration file /etc/nginx/nginx.conf test failed
You might be including the rocket nginx file outside of a server block. The include needs to be inside a server directive like: server { …include goes here }
How to fix these
x-rocket-nginx-reason: File not cached
x-rocket-nginx-serving-static: No
I’d need to see the x-rocket-nginx-file header to understand more. A pretty common reason is that if wordpress is in a sub directory it won’t serve the file correctly without changing the directory. Another common reason is that the cache hasn’t preloaded yet!
x-rocket-nginx-file : /home/nginx/domains/domain.com/public/wp-content/cache/wp-rocket/domain.com///index-https.html_gzip
x-rocket-nginx-reason : Specific mobile cache activated
x-rocket-nginx-serving-static :No
Why serving static no ? i follow all step and cached live in /wp-content/cache/wp-rocket/
Hey Jason, sorry for the late reply. It’s because Rocket Nginx does not support mobile caching. You’ll need to make sure that setting is left unchecked.
Hello,
great article! Im using Apache and Nginx as Reverse Proxy on Centos, with Wp Rocket. Can i add the Nginx Config additional when using both Webserver?
Thx
Hey Chris, it’ll work better if Nginx is taking all requests. Nginx is faster for static files plus in conjunction with PHP-FPM and Rocket Nginx, it’s the fastest setup I have been able to find.
You don’t need to specify same gzip_header because http_header will automatically adds to gzip and non-zip.
Thanks Harry!
Hello,
ive got a Problem with rocket-nginx
nginx: [emerg] unknown directive “$rocket_debug” in /etc/nginx/rocket-nginx/default.conf:18
i need help please :)
Directive Set is not allowed
Hello. Which benefits could be archived using this?
Could you please explain one more time where should i put the snippet to implement the configuration file in my virtual host ?
Wow! Really great stuff. Rocket NGINX really is a complete replacement for Varnish. No more crazy configurations.
Thank you Morgan! Varnish has always been quite the hassle. Varnish definitely has its use cases, but if you’re running a server strictly for WordPress it is not needed.
Wow! Great information. Thanks for the insight!