In the first two parts of our ultimate web performance series, we have discussed some of the best ways to improve your website speed in China. We devoted part 1 to two popular speed optimization tools Nginx and Varnish - how they work and how we can leverage them to boost website performance in China. Part 2 of this series discussed the benefits of using local hosting and content delivery network (CDN) in Mainland China.
While Nginx, Varnish, local hosting, and CDN all play important roles in optimizing the speed of your website, there are still tons of factors influencing your website performance. These factors cannot be underestimated - as a matter of fact, every second of delay in your page response can result in a 7% reduction in conversion rate: that is definitely not good news for your business.
So, how can we make sure all web elements are fully optimized? In this third installment of this series, our Tech Lead - Tom will share 8 essential tips to enhance onsite elements to boost your website speed, specifically for the Chinese market. So what are those tips? Let’s dive in.
*Note: many techniques discussed in this cheat sheet are massive topics that would need articles of their own to be explained in details. Luckily for you, we have prepared a handy list with further readings at the bottom if you wish to dive deeper into any of these topics.
1. Monitor performance
Let’s start with the basics: the most important aspect of website optimization is monitoring the performance of your website regularly. Why is monitoring such an essential task to boost your website speed? Simply speaking, monitoring performance will help you figure out which elements are negatively affecting your website speed, and then apply the right methods to solve the issues. Any good performance improvement strategy must start with monitoring.
Performance Test of Faguowenhua
2. Optimize server response time
So what happens next? After monitoring your website performance, it is vital that you continue to measure your server response times and address any future bottlenecks that prevent you to boost your website speed. There are dozens of potential factors which may slow down the response of your server: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation. All of these factors need to be considered to improve your server's response time and might even allow you to add more meme GIFs to really improve the quality of your website.
After your server response time is optimized, what performance issues should we address? Check out the next parts for some other useful tips!
3. Reduce Page Size
Let’s take a closer look at one of the most important factors that determine your website speed - your page size. The website “Computer Hope” defines page size as the overall size of a web page, including HTML, images, style sheets, scripts, and other media.
In the example below, Tmall has a faster loading time than Suning because of its smaller page size, 666.95KB compared to 822.09KB, according to a performance testing of Site24x7 from Guangzhou (China) server.
Performance Test of Tmall
Performance Test of Suning
So how do we reduce page size? There are actually two methods to achieve that: minifying resources and optimizing images.
3.1. Minify resources
Website owners can also see reduced webpage loading times on mobile by installing an AMP plugin. This will strip back any excess design code to load a very basic version of the webpage, which allows the page to load almost instantly for the user. However, the website owner would also need to consider that an AMP plugin will remove the website's unique branding and aesthetic design from any mobile pages where this is active.
- To minify HTML, try HTMLMinifier
- To minify CSS, try CSSNano or CSSO
3.2. Optimize images
You must have encountered this issue before. Super annoying, right?
Let's have a look at the above image. I believe you have at least once encountered this issue when loading an image, and it is definitely not a good experience. Images are often the heaviest assets that hinder the page loading speed. How can we avoid our users from such this annoying feeling? The best solution is to optimize the images on your website.
Image optimization is about reducing the file size as much as possible without sacrificing quality and can be done in three ways:
1. Specify image dimensions
If a browser knows the image dimensions, it could load a page faster since it could simply reserve a space for the downloading image while laying out other contents. As stated in part 1 of this series, loading times will drastically hurt your user retention rate. Therefore, if you can load other components of your web page before your images, it gives the impression that the page loads faster.
2. Compress images
There are two types of compression you can use, lossy and lossless.
- Lossy compression is a compression in which some of the data from the original image are lost. The more you compress it, the more the quality will go down.
- Lossless compression will compress the image without any quality loss. The original and compressed image should look the same.
3. Choose the right image file format
- JPEG – best for most images.
- PNG – best for images with transparent backgrounds.
- GIF – best for animations, otherwise, use the JPEG format.
- WebP – modern image format with better compression efficiency, but not compatible with browsers that don't support WebP yet.
In brief, optimizing images is one of the most important techniques to consider when reducing your page size. In China, where content-rich online experience is preferred, most websites are usually embedded with a myriad of images in order to showcase their products, which in turn may affect the loading speed. Thus optimizing images should always be taken into consideration while developing such websites. The example of Faguowenhua shown as the beginning is a good case of Chinese website with optimized images. Here are some screenshots from this website.
Images on Faguowenhua website have been optimized using lossless compression and dimension specification.
4. Enable Gzip Compression
5. Leverage Browser Caching
6. Upgrade HTTPS to HTTP/2
Another way to boost your website speed is to upgrade your HTTP(S) protocol to HTTP/2. Compared to HTTP/1, in HTTP/2, the number of connections needed to load all contents on each web page is reduced. Instead, a single network connection will be made to request all the images at the same time. The below figure illustrates how this process works:
In HTTP/2, there is only 1 TCP connection
Enabling HTTP/2 will give big performance gains:
- HTTP/2 is fully multiplexed. This means that HTTP/2 can send multiple requests for data in parallel over a single TCP connection.
- HTTP/2 is binary, which makes it more efficient, and headers are compressed which reduces the amount of data on the network.
A notice when upgrading from HTTP/1 to HTTP/2 is that your site should have HTTPS rather than HTTP. HyperText Transfer Protocol Secure (HTTPS) is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. If your site is not secured (i.e. the link doesn’t start with https), you probably should not be switching to HTTP/2 until your site owns a valid SSL certificate. The reason is that most browsers will simply ignore the HTTP/2 version of your website if it is not secured.
Now that you understood how HTTP/2 is superior to HTTP/1, are you ready to experience visually the difference between them? Please follow the two links below!
7. Reduce DNS Lookups
When a page is loaded, DNS lookups have to be made for each domain that is requested before anything is downloaded. When web pages have many DNS queries, the accumulated lookups times will affect the speed with which your web page will load.
The easiest way to reduce DNS lookups is to simply get rid of requests that use different domains. This means reducing different features presenting on your web page, so reducing DNS lookups in this sense can be a tradeoff between complexity and loading speed.
On the other hand, you can simply host the resources that require DNS lookups, reducing the time and also allowing for flexibility in terms of allocating resources (caching, using CDN). If you can’t avoid using DNS lookups from third parties you can change the cache times (TTL) depending on the record type, using DNS caching means DNS lookups are not used. Additionally, you can preload DNS lookups to your cache in the background to eliminate waiting times. Finally, you can always change the provider of your DNS since some run faster than others.
8. Consider having a static site generator (SSG)
The final tip to boost your website speed is having a static site generator. Serving a static site is extremely fast because all the web server needs to do is returning a file, but it can also cause scalability issues especially in terms of navigation.
A Content Management System (CMS) stores the web page content on a database which is then rendered in different HTML templates from a web server. This method facilitates managing assets and is one of the most common systems used to create and modify contents but can create performance issues.
Using a static site generator (SSG) could bring the best of both worlds and allows you to create a static site from a generator and store it in your own web server where it can be accessed directly by the user through the web server. Some popular SSGs are Jekyll, Hugo and Gatsby.
Bonus: When to do optimization?
It is important that proper time and budget be allocated for the optimization process. While you can do optimization long after your website is live, we strongly suggest taking all necessary steps earlier. Imagine optimization as fixing things in your house: you can live with a loose door handle or a broken light switch but you'll have to fix it one day. And the sooner you fix it, the more enjoyment you'll have from what has been fixed.
In the website development process, performance optimization then is usually carried out during the User Acceptance Test (UAT) or right before Deployment. At this stage, the website is almost ready, only need to figure out which elements can be optimized to bring the best experience to the users.
Fast loading speed matters a lot to the Chinese market, due to the preference for content-rich online experience among Chinese users. Besides Nginx, Varnish, local hosting and CDN, part 3 of web performance series gives you a cheat sheet on how to boost your website performance in China based on your performance monitoring report. These 8 tips will guide into optimizing specific elements on your webpage to ensure the fastest loading speed. The most important thing is to always monitor your website performance. Only by diagnosing your problems will you be able to apply the right cure. Adopting the appropriate techniques will provide a better user experience and give you a fighting chance in China’s competitive digital landscape.
About the author
Tech Lead of IT Consultis
With 7 years’ experience in the IT industry, Tom is a first-class Tech Lead in ITC, delivering successful developments for clients from different industries such as Porsche, Swatch, AmCham, and many more. Playing the role of both Tech Lead and Senior Full Stack Developer, he contributes to all the most important projects of ITC, always seeking to improve his technical skills and engage with different aspects of coding. Tom is passionate about creating projects that matter both for brands and end-users alike: to achieve this, he fully commits to only delivering the best in the projects he works on.