It is essential for businesses to optimize their website and increase website load speed to bring in more visitors and increase sales and revenue. But heavy server load, unmanageable website traffic, and low website speed are among the common issues businesses face down the line while pursuing business goals. But one way proven to improve the website speed by holding the server in heavy traffic is by using Varnish. So let’s get started how to Improve WordPress Performance Using Varnish in Plesk Onyx

In this blog, we explain how Varnish helped us to decrease load time and how you can install Varnish to improve your WordPress performance.

What is Varnish and How it helps to improve website Performance?

Varnish is an HTTP accelerator designed for content-heavy dynamic web sites like WordPress as well as for APIs and is also known as a caching HTTP reverse proxy.

It helps to improve the website loading speed by caching the output of already visited pages into the virtual memory and deliver the output from the virtual memory if a duplicate Request is received without passing the request to Apache (backend web server).

Here, we are going configure Varnish in between Nginx and Apache so that all the web request received by the Nginx will be forwarded to Varnish.

Varnish will return the requested page to Nginx if it already exists on the virtual memory and redirects the request to Apache if any cache-miss occurred and get the contents from Apache and save it in the virtual memory for future use.

You can see a significant change in the site loading speed after installing Varnish on the server since Varnish deliver the cached output for the duplicate requests from the virtual memory.

Additionally, it reduces the load on the CPU since the web server can be able to handle the uncached request only without being overloaded.
Since Varnish helps to reduce load times, it is used by websites including Wikipedia, online newspaper sites such as The New York Times, The Guardian, The Hindu, Corriere Della Sera, social media and content sites such as Facebook, Twitter, Reddit, Vimeo, and Tumblr.

Varnish typically speeds up delivery with a factor of 300 – 1000x, depending on your architecture.

How a Plesk Server Handles Website Requests?

Before installing Varnish in Plesk, we should have a little knowledge regarding how a Plesk server handles website requests.

In a Plesk server, Nginx is used as a reverse proxy web server since it has low memory footprint and it can handle a large number of concurrent static connections. So Nginx is used as the front end web server in a Plesk server so that it stands between the internet and Apache. Nginx is listening on ports 80 (Non-SSL) and 443 (SSL) and accepts all the website requests.

Once a web request is received, Nginx will forward it to Apache, either port 7080 (apache Non-SSL port) or 7081, depending on the web request (HTTP or https). Apache, in turn, distinguishes the request type as for whether it is a static request or a dynamic request. If the request is for a static file (such as jpg, CSS, HTML, and so on), Apache will forward the request to Nginx along with the location of the file from the file system and Nginx locates the file and passes it to the client. If the request is for a dynamic file (such as a PHP script), Apache executes the file and sends the response to Nginx, which delivers it to the client.

Here, we will demonstrate how to push Varnish in between Nginx and Apache on a Plesk Server to increase the website loading speed. But, Varnish is not officially supported by Plesk.

So we need to know how to install and configure Varnish on a Plesk Server. We will use the newly integrated docker support in Plesk Onyx to run a Varnish instance in a separate docker container.

After installing Varnish, we will configure Varnish in an external port (in this example I am using port 32780) and forward all the request came to port Nginx (Port 80) to Varnish (Port 32780). Varnish may need to forward the request to Apache in case any cache-miss occurred. Installation of Docker, creating a container with Varnish and configuring Varnish on port 32780 (redirect request coming to Nginx to Varnish); all these can be done from Plesk itself. We need Shell access to configure Apache within Varnish (to forward the requests from Varnish to apache if the requested page is not present in the virtual memory or cache).

Step by step procedure to increase website speed by installing Varnish as a one-click docker container. The main advantage of running Varnish independently in a separate docker container is that we can remove the container and rebuild and configure a new container with Varnish within seconds.

What is Docker and How we can Install Docker in a Plesk Onyx Server?

Docker is a platform to test and run applications, that might not be supported by the operating system, in a separate container. We can install Docker as an extension in Plesk Onyx using Plesk Installer. For that navigate to “Plesk Home > Tools and settings (left menu) > Plesk > Updates and Upgrades”. The updates and Upgrades page will open in a new tab and you need to click on the option “Add/Remove Components”.

From the list, we need to select the option “Install” corresponding to the component “Docker” and proceed by clicking the option “Continue” at the bottom of the page to install the Docker extension. If the installation is successful, you can see the message “All operations with products and components have been successfully completed” on the screen.

Now you can see the Docker extension from the Plesk Main menu. Please click on the extension “Docker” from the left side menu to go to the extension and from there you can search and install varnish Docker image file.

You have to search for the Varnish image by searching “million12/varnish” from the “Docker Image Catalog”. You can click on option “Run” corresponding to the image “million12/varnish” to download the latest Varnish docker image file to the server. Else you can download the images for the previous versions of Varnish from the drop-down menu corresponding to the image.

You may need to go to the docker extension again and need to click on the option “(Run local)” to install and create the Varnish docker container if the automatic installation failed.

When you click on the option “Run (local)”, it will create a new Docker container with Varnish installed in it and pop up a screen to configure varnish. The only thing we need to do is the Port Mapping. For that, disable the “Automatic port mapping” and manually map the ports. Here, we are using the port 32780 for Varnish and mapping the port 80 to port 32780 in the option “Manual Mapping” so that the requests received by Nginx will forward to Varnish. We will configure Apache within Varnish from the terminal later to handle the requests that are not present in the cache so that Varnish will forward the requests to the backend web server; Apache, in case any “cache-miss” occurred.

First, we need to test it on a static page. To test a static page, we need to create a subdomain in Plesk. Please note that we have now configured Varnish to accept connections from the NON-SSL port (80) only. So we need to disable the “SSL/TLS Support” for the subdomain from the “Hosting Settings”. Also, we need to turn off the option “Permanent SEO-safe 301 redirect from HTTP to HTTPS”, if it is enabled.

Once the SSL/TLS support is disabled for the subdomain, we need to redirect the requests to this subdomain to Varnish. We can easily do it by using the option “Docker Proxy Rules” in the domain overview of the subdomain.

Click on the option “Add Rule” and then select the previously created Varnish container and the port mapping to forward the web requests to this subdomain to Varnish. If the container is not listed in the drop-down menu, that container might not be running. In this case, you may need to start the container from the Docker extension.

Once the Docker Proxy Rule has been added, you can see it on the domain overview of the subdomain.

Now you may try to load the subdomain from a browser, you can see the error “Error 503 Backend Fetch Failed”. No need to be panic in this case since it is an expected behavior. It means that the proxy rule is working and the web request is successfully redirected to Varnish. But, the requested web page was not cached yet and saved in the virtual memory. In such cases, Varnish will forward the requests to the backend web server (apache) and need to collect the data from apache. But, we did not configure the backend web server (Apache) in the varnish configuration yet so that the error is showing while loading the subdomain.

Log into the server as root via SSH to configure Apache in Varnish. We need the ID of the container in which Varnish is running to enter to that container. You can use the following command to get a list of active docker containers on the server.

# docker ps

You may note down the container ID from the above result to use in the next command. You can use the following command to enter the container and to edits its configuration.

# docker exec -it ID bash // Replace ID with the correct container ID

Now you can find the configuration file for Varnish as “/etc/varnish/default.vcl”. You can use the vi editor to edit the configuration file of Varnish and can configure Apache in Varnish.

For this, we need to locate the lines starting with “.host” and “.port” in the Varnish configuration file. Then we need to enter the server IP address corresponding to “.host” and “7080” (non-SSL port of apache) corresponding to the “.port”. After that save the changes and restart the container from Plesk > Main Menu > Docker > Varnish > Restart.

You can see the following log once the varnish container is restarted successfully.

Now you can load the site without any issue from the browser.

How to Activate the Varnish Caching for a WordPress site?

We just explained how to install and configure Varnish within a Docker container and how it is used to serve a static web page. But WordPress is a dynamic CMS. So we should cache the required pages only without restricting the functionality of the site. For example, the WordPress administrators page should not be cached since the changes would not be possible for any logged in users. So we can not use the default configuration file to cache the pages of a WordPress site.

We need to edit the configuration file for Varnish (default.vcl) in case of a WordPress site. There are many configuration files available on the internet for WordPress. Here we are using the configuration file created by HTPC Guides with a slight modification. Or else you can use the configuration file without any changes created by HTPC Guides

You should change the following parameters in the above configuration files.
Note: replace XXX.XXX.XXX.XXX with your server IP Address

==
.host = “XXX.XXX.XXX.XXX”;
.port = “7080”; # Apache port

acl purge {
“localhost”;
“127.0.0.1”;
“XXX.XXX.XXX.XXX”;
}
==

The purge acl can verify curl requests to refresh the cache and smart refresh the Varnish cache using hash_always_miss from the web server which are the only IPs that can refresh or purge the Varnish cache.

Now you should restart the container from Plesk UI to reload the configuration information.

Do we have a cache hit or miss?
We need to know whether the content was loaded from the virtual memory or served by the Apache without checking the Varnish logs.

We can see if the request was processed by Varnish and contents were loaded from the virtual memory by a special header entry in the response. For this, we use the function “sub vcl_deliver” in the Varnish configuration file (/etc/varnish/default.vcl) that is the most common last exit point in almost all code paths.

Add the following code within the curly brackets of the function sub vcl_deliver.

if (obj.hits > 0) {
set resp.http.X-Cache = “HIT”;
} else {
set resp.http.X-Cache = “MISS”;
}

The above function is already included in the Varnish configuration file for WordPress. You can use this code in the default configuration file too for a static site.

We can use the Developer tools in the browser to examine the response. If the requests were redirected through Varnish, you can see something like “via 1.1 Varnish-v4” in the response header. In the first reload the request might be redirected from Varnish to Apache since it will not be present in the virtual memory since the page was not loaded before after configuring Varnish. In this case, we can see “X-Cache: MISS” in the response header.

But varnish will keep the loaded page in the virtual memory for future use. So you can see “X-Cache: HIT” in the response header if you reload the page again or access the same page from a different machine/browser. This means that the request was processed by Varnish and the contents were loaded from the virtual memory. Thus we can confirm that Varnish is working fine on the server.

Before and After Installing Varnish

You can compare the “Response Timing” while “X-Cache: MISS” and “X-Cache: HIT” occurred at the same time while we check the “Response Headers” from the Network tab in the developer tools. You can see that there is around a 1-second decrease in the loading time for our subdomain. But it may vary for different websites.

You can see that Varnish helped to decrease page loads making it easy for the users to navigate the website with ease. Now, you have learned how to install Varnish to increase the performance of your WordPress website.

Note: The test infra we have used is configured to run Ngnix as Reverse Proxy.

Thanks for dropping by. Ready for the next blog?

How to use Vsphere Power CLI And Project Onyx for Easy Automation

The post Improve WordPress Performance Using Varnish in Plesk Onyx appeared first on Sysally.