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.
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.
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.
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.
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.
