How To Speed Up a WordPress Website For China

WordPress is the most widely used website content management system in the world, and for good reason. It’s easy to use, SEO friendly, secure and open-source. It also has a great community of developers that build websites, design themes and create useful new plugins.

However, it can be tricky to get WordPress to run as fast as possible though, at least for us regular non-developer types. To fix this, there are various improvements that should be made to each site you build. This is especially important for China, because the Chinese Internet is throttled by something called “The Great Firewall of China”. The firewall is a factor for WordPress even if you host the website in China, because the site may still load some scripts from outside of China.

Website speed is important because faster websites have higher conversion rates and tend to get higher rankings on search engines too.

To write this post, we had Daniel D Konold help us optimize this very WordPress-based site you’re reading now. We were able to get it to load about 80% faster. We’ve also added in some tips from our experience with a bunch of other Chinese websites that are built on WordPress.

The Starting Situation of Our WordPress Website

Our website used to be based on Drupal. We moved it over to WordPress a few months ago. The work was done mostly by team members of NMG that are NOT developers, and they did a great job overall. 

But the site was too slow!

We used GTMetrix to measure the speed. It’s a great tool that can help anybody understand how fast their website is, and it helps developers find the detailed reasons that the site is slower than it could be.

Here were the initial results for the homepage before we made any changes:

• • Grade E. Ouch! This shows that the website was poorly-optimized. At least it wasn’t an F.
  • Largest Contentful Paint (LCP): 3.7 seconds. This shows about how long the page takes to load for a regular user, so it is perhaps the most objective and important statistic.
  • Performance: 46%
  • Structure: 80%
  • Total Blocking Time: 370 milliseconds. This is how much time is wasted due to scripts blocking other things from loading. 
  • Cumulative Layout Shift: 0. There’s no problem here.

Before Starting, Backup Your WordPress Site

If you’re going to do-it-yourself, make sure to backup your website files and database before proceeding!

The Top Issues Identified by GTMetrix

Thankfully these page speed checkers give us lots of helpful information these days, but it’s not always easy to understand what they mean. That’s why we’re here to help interpret them.

One huge glaring issue was the first item on the list – a 19.4 MB image! This is 100x larger than any website image needs to be in order to be clear.

Other things on this initial list included:

• • Optimizing fonts.
  • Other large images. 
  • A recommendation to use a caching plugin to “reduce initial server response time” and “serve static assets”.

Note that GTMetrix isn’t testing the website from China, but it’s review is useful for making the site faster overall. One thing that was not on GTMetrix’s list, but still important for keeping a WordPress website fast in China, is to avoid loading resources that might get blocked or throttled by The Great Firewall of China.

Now, in the next section we’ll get to work, and the website speed will quickly improve.

Step #1 – Shrink Images

“Working/designing for the web is completely different from print materials. For example, if I’m printing an advertisement that will be used to give people in their actual hands, I want that image quality resolution to be the highest I can possibly make it so the reader can clearly see what I’m promoting and hopefully take action. 

If we did the same thing for a website, it would lead to extremey large image files, which would load very slowly. Want your site to be fast? Make sure your images have a small file size.

Of course, we can’t reduce image file sizes to the absolute minimum either, because then they wouldn’t be clear. So we need images that are the right size. In general, it’s a good idea to keep all images under 150 KB file size.” – Daniel

For this case, we used Photoshop to decrease the sizes of images on the homepage.

Here’s a before-and-after comparison for that one super-large image on the site.

Notice any differences? Practically none to normal eyes! So this image went ​​from 19,400 KB (19.4 MB) down to 120 KB. That’s an astronomical improvement.

Images should also be saved in the best format.

• Photos should be saved as JPGs
• Graphics/transparent images (like logos or icons) should be saved as PNGs or SVGs.
• If you’re really cool, you could use a relatively new format like WEBP or AVIF, but that’s not necessary yet for this project.

Other listed large-ish images were the partner logos on the homepage. Because these are small transparent graphics, we were able to save them as much smaller file sizes without losing too much quality. All are now under 10 KB each and saved in PNG format.

For the main company logo, it was at 103 KB which isn’t too bad because we want this graphic in particular to be extra sharp. We still ran it through a resourceful website called tinypng.com and it reduced the file size by 70% without losing any quality. The new file size is 30 KB.

After fixing the images, there’s already a noticeable speed improvement. 

• Grade E → C. The overall grade is much better.
• Largest Contentful Paint (LCP): Improved from 3.7 to 2.8 seconds. 
• Performance: 46% → 72%
• Structure: 80% → 92%
• Total Blocking Time: 370 milliseconds → 15 ms.

Step #2 – Check the Fonts

You never think too much of fonts, right? Maybe you select one that looks good when you’re first designing your site and never think twice about them. Well, they can slow down your site big time if not optimized properly.

Here’s how to do that:
1) Load fonts from your website, not Google or some other outside source. This is especially important for making your site fast in China, which (sometimes) restricts fonts from Google. The website had no problem here. The font files were already loading from the website itself.

2) Cache font files. The site was loading 3 different font files: fa-regular-400.woff, fa-solid-900.woff, and material-icons.woff. In a step below, we turned on a caching plugin, which helped improve the speed these fonts load.

3) Use font-display: Swap. If it’s taking too long for a user to load the custom fonts, this tells their browser to first load a separate font that is already present on their computer.

Here’s some extracurricular reading if interested: https://web.dev/fast/#optimize-webfonts

Just to recap, no changes were made to the fonts in this case because they were already OK, but it’s still important to check.

Step #3 – Add a Caching Plugin

“For WordPress, there are so many different caching plugins. To use a baseball analogy, it’s really hit-or-miss for every single one. Each web server reacts differently to each caching method. So you could try them out one by one and see which works best.

Note: these plugins are known to “break” the design of your website. This is totally normal. “Break” doesn’t mean broken for good, it just means that the website layout will look messed up. If this happens, just adjust plugin settings or deactivate the plugin and try another one.

I like to start with a freely available plugin called W3 Total Cache.” – Daniel

After plugin installation and activation, it’s time to go through the Setup Guide. Now, these settings can be very confusing to some people. Here are the settings we used:

• • Page cache engine: Disk: Enhanced
  • Database cache: APC
  • Object cache: APC
  • Browser cache headers: Enabled
  • Lazy load images: None (This was done later. Read on.)

If you already have a caching plugin, but your site is still loading slow, consider taking a deep dive into your specific settings. There are so many different server configurations and website options that it’s not possible to explain all the possible caching methods in this post in detail.

Additionally, your hosting company (if they’re worth it) should already have a robust server-side caching system implemented for you. When in doubt, talk to their tech support.

Not all hosting services are created equal! Here are some suggestions:

• For global sites that are not dedicated to the Chinese market:
  • We use FullHost for this site because they have great support and great speed. We also use CloudFlare’s Pro Plan to further improve speeds, and it only costs about $25/month.
  • Daniel also recommends WPEngine or Siteground.
• For websites that are specifically meant to load rapidly in mainland China:
  • Hosting inside mainland China is the best, but requires an ICP License. We have more on that in a separate blog post.
  • Hosting near mainland China is often the best choice overall. We often host with West.cn on their Hong Kong server.

Here’s the new performance report after adding the caching plugin:

By this point, there was even more of an improvement. 

• Grade C → A. The overall grade is much better.
• Largest Contentful Paint (LCP): Improved from 2.8 to 1.4 seconds. 
• Performance: 72% → 95%
• Structure: 92% → 94%
• Total Blocking Time: 15 milliseconds → 14 ms.

Step #4: Minify JS, CSS, HTML, etc.

The next step was to minify Javascript and CSS. This can also be done in most of the good caching or performance plugins.

What this setting does is takes all your files for Javascript and CSS and other code and combines them all into a few smaller files, thus making them “mini”.

Step 5: Turn on Lazy Load

This step was saved for last because it could potentially break the site. The setting tells the users’ device to only load what’s on the screen viewport until the user starts scrolling. Technically, entire pages load at once, but this setting helps load it in increments.

End Results for WordPress Optimization

When we ran the GTMetrix speed report again, performance was now at 99%! Also, the Largest Contentful Paint was down to 0.8 seconds. That is a huge improvement.

• Grade A → A.
• Largest Contentful Paint (LCP): Improved from 1.4 to 0.8 seconds. 
• Performance: 95% → 99%
• Structure: 92% → 96%
• Total Blocking Time: 14 milliseconds → 37 ms. (bit worse here)

Here are the changes from start to finish.

• Grade E → A.
• Largest Contentful Paint (LCP): Improved from 3.7 to 0.8 seconds. This is a very important metric, because it’s what affects users. The other metrics are to guide webmasters/developers about what to change.
• Performance: 46% → 99%
• Structure: 80% → 96%
• Total Blocking Time: 370 milliseconds → 37 ms. A 90% improvement.
• Cumulative Layout Shift: 0. There wasn’t a problem here.

Bonus Optimizations

The above guide shows how we improved results for this WordPress website by 80%. We figured that would help most readers improve their existing WordPress websites quite a bit, and be relatively easy to achieve.

But what if you still want to improve more? Here’s a quick list of some other things we did for this website and others.

1. First, you can add in additional tests:
   1. Google’s PageSpeed Insights using many of the same ratings that GTMetrix does, but is stricter.
   2. Use Chrome DevTools from a browser within China.
   3. Test loading speeds across China with 17ce.com.
   4. Use additional locations from within GTMetrix.
2. You can optimize images even more.
   1. Use a WordPress plugin like Performance Lab to automatically convert jpg images to the newer webp format, which uses smaller filesizes.
   2. Ensure your theme uses the proper image sizes. WordPress should automatically create different sizes of images for use on your website. However, in practice, it might not work because of various issues with WordPress, themes and plugins.
3. Rebuild your website itself.
   1. Use a more streamlined Theme. For example, a new website we made WeChatAdvertising.com is built with Kadence, a system with themes and blocks for WordPress.
   2. Avoid having many plugins.
4. As a reminder, you can host your website in China too, so long as you get an ICP License.

We’re not recommending you try to make ALL of those optimizations. You should expect diminishing returns the further you go with regards to improving your Chinese website’s load speeds. You’ll never get the load time down to 0.01 seconds, but <4 seconds is still quite good.

Need More Help?

We hope this blog post is useful enough for some people to do-it-themselves. There’s a lot more information like this in the China Digital Marketing 101 guide.

If you need help with WordPress optimization, contact Daniel.

If you want help creating a Chinese website or launching a Chinese marketing campaign, contact us through the form below.