Things to Consider When Building a Website in China

China

Recently I have been working from China and was involved in building a couple of websites that target visitors from China. While most of the web development techniques can be applied directly to building websites in China, I did realize there are some special issues that need to be addressed.

The main thing you have to take into consideration is that many websites and web services are blocked by the so-called Great Firewall of China (GFW), including big names such as Google, Gmail, Twitter, Facebook and YouTube etc. As a result, Google’s CDN service, the Facebook API and the Twitter API etc. are not accessible most of the time from China. For example, if your website loads jQuery from Google’s CDN like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

then your site will be in trouble for loading from a browser in China. Also, if you hope to use some pretty web fonts hosted on Google like this:

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

The fonts might not show up correctly either in China. Using the Facebook API or the Twitter API? Your API calls won’t work in China.

Due to blocking of those services, even if your website itself is not blocked, you will find it hard to load or very slow to load in China. BTW, Github has been occasionally blocked as well and you can’t use Slack smoothly in China (HipChat seems to be working fine though).

How to solve these problems? While it’s probably impossible to get the Facebook API or Twitter API working in China at this moment, there are ways to solve some of the other problems.

For CDN, don’t use Google’s CDN, instead, use MaxCDN (although the site itself is very slow to load from China) or the CloudFlare CDN. Also, you can consider using a CDN hosted in China, for example, the Baidu CDN library, or the Sina library. Below are some code examples that will work in China:

JavaScript:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>

Bootstrap:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//lib.sinaapp.com/js/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Font Awesome:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="//apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Google Fonts:

For using Google Fonts in China, one solution is to use Qihoo 360 CDN‘s Google Fonts Mirror. To use it, just replace the domain fonts.googleapis.com with fonts.useso.com. For example, instead of:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Use:

<link href='http://fonts.useso.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Finally, to access blocked websites from China, the best solution is to use a VPN service. Here’s a list of VPNs that work well in China. Actually, I almost always connect to a VPN when using the Internet in China.

If you are outside of China and would like to know which sites are blocked in China, you can use websites such as GreatFireWallofChina.org. Just type in the URL of a website and it will show whether it’s blocked or not.