Skip to main content

How to Drastically Improve Website Speed? - Part 1: Using Nginx and Varnish

Posted in Tech on May 16th 2018
author photo
Chief Technology Officer

The loading time of a website is the time needed for a browser to load the complete content of that website. It is common knowledge that website speed can play a vital role in how a company performs: the longer the website loading time, the higher the chances of users abandoning your website and moving to a competitor’s website. Specifically, data shows that 40% of people abandon a website that takes more than 3 seconds to load, hurting your conversion rates by as much as 7% for every single second delay in page response. Thus, it is essential to improve the website performance by ensuring a fast loading speed for your website. How to do that, you ask? You are in luck. We have written two articles to explain how to achieve higher speed with your website: in the first one, we will discuss how two popular tools, Nginx and Varnish, can let your website achieve higher speeds, and show and example implementation. In the second one, we will focus on Chinese specificities and make sure your website can achieve higher speeds given the differences in the local ecosystem. But let’s get back to the topic of this article - how do we make a website faster with Nginx and Varnish? Let’s find out.


How to make a website faster?

There are different ways to make your website faster, but generally speeding up a website requires faster content delivery via servers that are nearby to avoid request-response latency. This is especially true for global websites, where multiple servers are necessary to balance the load and serve the content from the closest available location. Balancing load or delivering the content in an optimized manner usually requires complex and expensive solutions. Luckily, Nginx and Varnish let you manage these factors with minimal configuration. How exactly? Let’s find out


1. Improve website speed with Nginx

What is Nginx?

Started off merely as a web server, Nginx is now an open source software with numerous features dedicated to serving content faster and in an optimized manner. Nginx provides services like a web server with load balancing, multi-level caching, performance monitoring, Web Firewall and others. Nginx is known to be powering over 40% of the busiest websites around the world.

Nginx started with the goal of creating the fastest web server around the world with all the necessary optimization algorithms implemented within, and maintaining that excellence is still a central goal of the project. Nginx consistently beats Apache and other servers in benchmarks measuring web server performance.

Nginx has two variants. The standard Nginx server is free to use and comes with the basic caching and optimized delivery features. Nginx Plus is a premium version with additional features like the firewall and load balancer. Both versions are the best-in-class application servers. Nginx has been used as high-end application delivery solutions for high-traffic and content-intensive websites such as Dropbox, Netflix, and Zynga. Based on the data available from Nginx’s website, as of today over 367 million websites throughout the world, including some of the world’s busiest websites, rely on Nginx and Nginx Plus to deliver their content quickly, reliably, and securely.


How can Nginx improve website performance?

Optimized content delivery is one of the most important requirements when it comes to speeding up a website. One way Nginx can improve performance is to cache static assets within the server cache memory. These static assets include common content like the scripts and stylesheets used by every page, default images like logos and banners and also some static pages. It has been observed that nearly 30 percent of data on the modern web pages are static. Such content should be cached in order to improve the performance of Nginx as a web application server.

In addition to caching, one can look into enabling reverse proxy server configuration. A reverse proxy server helps to optimize the delivery by utilizing an additional machine to handle the requests. This machine is connected over a high-speed connection with the main application server that serves only the necessary data. This improves the processing time of the application server and eventually speeds up the website.


Going further with performance optimization on Nginx

But it doesn’t stop here. Nginx can be further optimized thanks to its support of the latest technologies such as:

  • Brotli compression: a more advanced compression algorithm than gzip with a descent browser support.
  • HTTP/2 Protocol: out of the box HTTP/2 protocol for more low-latencies and parallel HTTP connections
  • PageSpeed: a Nginx plugin that will automatically improve performances of your website

Thanks to these advanced features, NGINX is a powerful tool that cannot be ignored when it comes to performance optimization and should be on your to-do list when considering optimizing your website.


What are the drawbacks of using Nginx?

Even though Nginx is one best tool around, the drawback with using its built-in micro cache is the fact that assets cannot be purged from cache individually using a standardized API. Luckily, this issue can be solved by using another tool: Varnish.


2. Improve Website speed with Varnish

The performance improvement gained by using micro caching on Nginx can be further improved by using Varnish. This pairing will not only allow you to slightly improve the speed but mostly it will allow you to retain your flexibility when managing the content of your application.


What is Varnish?

Varnish is a web server with caching implemented at its core and an easy-to-implement addition to the previous Nginx setup. It can also be customized to reduce the origin-server load by writing a simple algorithm to manage the server requests. Unlike Nginx, it uses blocking system calls that make it easier to implement caching and configure load-distribution.

Varnish has a threaded architecture but avoids using event loops. This is the main reason for choosing it over Nginx when turnaround time is important. With proper configuration and tuning, Varnish has been noted to serve content at very high speed. Another important reason to choose Varnish is the possibility of purging individual resources from the cache, using one of the many open-source libraries available for the different backend platforms. This is not easily doable when using Nginx microcache.


How to properly tune up your configuration?

Although it might seem tough to configure Varnish, with the key performance metrics easily available, Varnish can be easily tuned to perform at its best. In order to fine-tune your Varnish configuration to serve at the optimal speed, there are some factors to look at, most notably:

  • Amount of client requests
  • Cache hits - The number of times content gets delivered from cache
  • Thread metrics - The cycle of thread creation, queuing and success or failure
  • Backend metrics - Frequency of failure, hardware health, and CPU consumption

What are the drawbacks of using Varnish?

Due to the fact that Varnish is a specialized software only dedicated to caching, it lacks many common web server capabilities, the most noticeable one being the inability of implementing SSL. Therefore, it does not allow you to use HTTPS protocol. This can, of course, be solved by pairing Varnish with a reverse proxy that acts as TLS termination, in our example Nginx. How to implement this configuration?


How to leverage Varnish and Nginx - An example implementation

The following diagram provides an overview of an example implementation with a Chinese user and an International user trying to access the same resources on a website.

In the example we are using a different domain to direct the traffic, however, some DNS services allow to use GeoIP detection to balance the traffic to different servers based on the location so the same domain can be used if the DNS service chosen supports this option.

In this diagram, we can see how Nginx acts mainly as a TLS termination (managing the incoming https traffic) and is set as a reverse proxy that sends all the traffic to varnish. In other cases, specific rules (based on paths, parameters, etc..) can be set to redirect the traffic directly to the origin server.

As mentioned above both Nginx and Varnish have load balancing capabilities, so multiple varnish servers and nginx servers can be set for the same domain as well.

An additional improvement to this setup can be achieved by using Nginx to fetch data from the origin server before storing the cached version in Varnish, allowing us to do some simple replacements in the content received (for instance URLs of blocked resources) for the different markets, without impacting or having to modify anything on the Origin server.


Improving website speed in China - a different scenario

In China, the scenario of website loading is completely different. China internet regulation is a highly secluded territory of the global network. Numerous APIs including Google-owned APIs are blocked in China and this is a major roadblock in optimizing the speed of a website. Today, nearly 40% of the website around the world are CMS-based and almost every single one of them internally uses JQuery and Google fonts which rely on Google servers for loading. In China, these fonts or scripts are blocked from loading, so the website does not get rendered as expected. Moreover, even for the other third-party APIs, the Chinese network setup increases the loading time to allow the API script to pass through. This eventually leads to poor performance of foreign websites in China.

In addition to the URL based blocking, China has its own web to manage the DNS data and every request made from China needs to pass through its highly protected firewalls. There is a high probability that the DNS data of certain domains might not be synced in China as the relevant data server might be blocked due to detected illegal activities.

As discussed, it is challenging to speed up a foreign website in China without any potential block. Hence, apart from the conventional techniques like using Nginx or Varnish, one needs to go through several other processes like acquiring an ICP license, getting a hosting within China and optimizing the content for a better delivery within China. These techniques will be discussed in the next article.


Conclusion

The major factor determining the optimization of a website loading speed lies at its core - the web application server. By correctly implementing and leveraging Nginx and Varnish, a website speed can be greatly improved - however, more techniques should be used when approaching website speed optimization in China. More details on how should we deal with these challenges will be covered the next part of this series.


References



About the authors


Dario Martini

CTO of IT Consultis

Graduated with a Computer Science degree from Politecnico di Torino, Dario started his career at IT Consultis as PHP and Lead Magento Developer. Being promoted to Chief Technology Officer after only 3 years, he has played a key role in all the biggest accomplishments made by ITC, managing projects such as GAP, Swatch, Leica, G-Star Raw, and many more.

Thanks to his strong experience in software architecture development, he steers the direction of the development team to ensure the success of each project, pushing for innovative technologies and embracing new methodologies. Besides, it is his priority to keep the team motivated, identifying their strengths and weakness and assigning the proper workload so that ITC can deliver better projects to our clients.



Thomas Guillemaud

COO and Co-founder of IT Consultis

As the COO of ITC, Thomas manages all operations and promotes the adoption of new technologies and philosophies within the company. In addition to raising the efficiency of each project, he invests his time in coaching and mentoring the project management as well as the development team, ensuring they all have standardized knowledge and skills to successfully meet client's expectation.