Skip to main content

8 Tips to Boost Your Website Speed in China

Posted in Tech on August 17th 2018
author photo
Tech Lead

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.

So how do you measure performance? Monitoring tools such as Site24x7 and many other tools will give you detailed reports which are very useful for you to keep a closer eye on the performance of your website. Imagine that you just got a performance report like the Faguowenhua website shown below. You can see that all the onsite elements received an “A” grade. Fantastic! Your website is very optimized now. However, the grades for HTML, Javascript and redirects minification can still be improved. Don’t worry, we will show you how to resolve this issue (and other similar performance issues) in the upcoming parts.

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.

So, what is the standard response time that your server needs to achieve? In this case, Google recommends reducing your server response time to under 200ms (twice as long as the speed of a blink).

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.

Statistics by HTTP Archive show that the average page size as of January 2018 is 3.54MB, which has grown by over half a megabyte since 2016 due to the addition of heavy contents. Videos, images, Javascript, and fonts contribute the most to the increase in page size. These new elements provide users with more vivid online experience, but loading time will be heavily affected.

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

An optimized page size can be achieved by minifying resources like HTML, CSS, JavaScript and other related media. Minification refers to the process of removing unnecessary characters like spaces, code comments and unused code without affecting how the resource is processed by the browser. Users will see their content load faster and businesses will need to use and transmit fewer data.

Here are recommendations by Google on resources minification:

  • To minify HTML, try HTMLMinifier
  • To minify CSS, try CSSNano or CSSO
  • To minify JavaScript, try UglifyJS

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.

Images can be compressed with tools like TinyPNG (it is celebrating 1 million compressions and still counting), ImageMagick or the export tools of Photoshop, Sketch, etc.

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


Gzip compression refers to compressing web files such as HTML, CSS, and JavaScript before sending them to the server. Up to this day, all browsers support gzip and it is probably one of the easiest optimization techniques to apply. By using gzip compression, your web page size can be reduced up to 70%. However, it is not an ideal solution for optimizing images as these files are already compressed in different ways in order to retain their original qualities, which are mentioned in the previous part.

5. Leverage Browser Caching


Browser caching is the next technique to consider when you want to boost your website speed. Every time a browser loads a webpage, all files including HTML, CSS, Javascript and images will be downloaded and displayed to the users. This process may take a long time if the webpage contains a lot of files. This makes the overall speed of your website become much slower, which is definitely detrimental to the user experience. Luckily for you, here comes the role of browser caching. In order to solve this issue, browser caching will download and store some of these web files locally in the user’s browser on their first visit to the website. When the users revisit the website or refresh the page, these files are already there so the browser does not need to download them again. As the fewer data needed to download, fewer requests need to be made to the server, and page loading time will be reduced.

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.

Conclusion

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.

FURTHER READINGS

 

About the author


Tom

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.