Boost WordPress with Azure CDN

Size performance matters! We all know, what you miss during the first impression, during the first seconds, will be very hard to change or win back. As in the real world, the same applies to the World Wide Web (www) where slow websites are leaving a bad impression behind. Let’stake our blog as an example, which is running on WordPress hosted in Europe. As we want to make the content available to more people than just those from the local area, performance was a major priority before we went online.

WordPress powers 14.7% of top 100 websites in the world.

W3Techs

As mentioned before, the content of our website/blog isn’t limited to Europe, why we would need a global approach to ensure a good performance for everyone. The use case to evaluate the Azure Content Delivery Network (CDN) was born. But let’s start with some background information what else was done.

Solve performance issues, or be prepared for the storm

作为第一个行动项目,很好地了解网站的运行速度(或速度)。最著名的工具可能是 GTmetrix, PingdomVSTS Load Test. As a preparation, we looked into the following two topics:

  1. Optimizing Images: the easiest one is to reduce the size of images. We use ShortPixel (作为免费插件提供)并优化了我们所有的图像。这样平均可以将文件大小减少60%,而不会明显降低质量。
  2. Caching of Content: 至少在WordPress社区中,另一种非常著名的做法是缓存内容。我们决定使用插件 Swift Performance, one of the rising stars these days. Available as a free and premium version.

完成作业后,我们与Pingdom进行了绩效分析,并得到了以下得分:

pingfom speed measurement
Performance metric before, no-CDN

分数还不错,但考虑到来自美国的访客的加载时间已经接近3秒,因此从我们的角度来看,这并不理想。您可以找到有关如何改善网站性能的各种文章和指南,例如, Johnny Nguyen is knowledgeable and experienced in performance tweaking for WordPress.

好吧,我们已经完成了图片的优化并实现了缓存,因此,如何更好地提高性能就再也没有了。与使用 Content Delivery Network (CDN). And as most of the content is static, it will be a perfect candidate to be include into a CDN. Of course, we decided to use Azure for this, even though many also like CloudFlare with their free option.

What is a Content Delivery Network (CDN)?

Maybe you haven’t heard of Content Delivery Network (CDN) before. A CDN is a solution for delivering content globally. The CDN acts as a geographically distributed cache and provides a quick transfer of the assets needed for loading internet content. With Azure CDN, you can cache static objects loaded from Azure Blob storage, a web application, or any publicly accessible web server, by using the closest point of presence (POP) server. For a full list of Azure CDN POP locations have a look here. Careful, this is not to be confused with POP3, if you’re fan of electronic mail.

拥有CDN可使博客/网站的内容更接近其访问者。使用本地CDN POP有助于加快下载和显示内容的速度。使用CDN的其他原因可能是…

  • … reduce the load on your web server;
  • … protect the web server from DDoS attacks;
  • … allowing parallelized download of files;
  • … have access to high performing server at a very reasonable price;

Should I use a CDN?

The most prominent question at this point is, if and when a CDN should be used. A typical case is that you should use a CDN when your blog or website is getting accessed by people from every corner of the world. Our blog is hosted in Europe, which means our assets will have to make a very long intercontinental journey if someone from the US or Asia is trying to get to the page.

因此,我们决定使用Azure CDN。截止到今天,有四(4)个可用计划。 Azure与两家提供CDN功能的提供商合作,Akamai和Verizon具有标准和高级产品,Azure拥有自己的CDN解决方案:

Azure CDN Verizon Akamai Microsoft
Azure CDN Options

我们决定去“Standard Verizon”提供,因为它附带“Custom domain HTTPS”支持。这使我们可以指定自定义域名“cdn.cloudelicious.net”, instead of “cloudelicous.azureedge.net”.

Configure Azure CDN

CDN的配置非常简单。我们进行了以下CDN端点设置:

  • Origin
    • “cloudelicious.net”配置为“Origin hostname”,它定义CDN从中提取内容的URL;
    • “Origin host header” and “Origin path”保留为空,因为我们的设置不需要它们;
    • 我们还启用了HTTPS(443)作为唯一协议,因为我们甚至都没有通过HTTP发布博客(80)
  • Compression
    • 尽管缓存插件已经在准备内容,但是我们启用了压缩。
  • 自定义域s
    • 我们加了“cdn.cloudelicious.net”作为我们的自定义主机名,然后启用“Custom domain HTTPS”(仅在Verizon上提供)。

下一步设置“Custom Domain”也不复杂。请记住,某些步骤的验证可能要花费几个小时的时间(删除/停用最多需要8个小时)。在我们的情况下,创建已在12小时内完成。

The steps above are all you need to configure. Remember the URL specified under“Name”(cloudelicous.azureedge.net) or“Custom Domain”(cdn.cloudelicious.net), as this will be used later to configure to configure WordPress for CDN. It might be worthwhile choosing a proper name that also speaks for itself. Depending on the Provider, it can take up to 90 minutes for configuration changes to propagate when using Verizon (vs. a few minutes with Akamai and Azure). All in all, always plan ahead and allow enough time for everything to complete.

您是否想了解有关Azure CDN的更多信息?查看“Azure Friday”播客– 15分钟以了解 how CDN works and optimize your workflows.

Enable WordPress to use the CDN

To enable CDN in WordPress, you have to install a WordPress plugin. The primary requirement is to use a plugin that does URL rewrites – using the CDN Hostname – on the webpage since default WordPress doesn’t do that. This is a pre-requisite as WordPress uses absolute URLs for linking on its page by default, it would bypass the CDN if no rewriting is done.

需要插件才能添加/配置CDN端点。在大多数情况下,缓存插件提供了这种集成。我们研究了两个插件:

All of them have positive ratings and have their strength (and probably weaknesses). For this blog, we ended up using “Swift Performance” to not use too many plugins. The configuration of the CDN isn’t rocket science and is activated by adding the CDN’s Endpoint Name. Simply add the URL defined before (in our case //cdn.21645.cn).

部署需要花费几分钟,而且超级简单,配置完成后即可自行维护。无需推送内容,Azure CDN从此刻开始处理一切。要查看您的网站是否正在使用哪个CDN, cdnplanet.com 提供了一些出色的测试。注意,在使用CDN之前,您可能需要为CORS配置Web服务器。不久后将分享另一篇文章,以了解更多详细信息。

How did we score?

您可能想知道此配置在多大程度上改变了博客的性能。我没想到会有奇迹,但我们对缓存和CDN的新成绩感到非常满意:

pingfom speed measurement CDN
Performance metric after, with CDN

We gained easily more than 60% speed improvement. However, since we’ve added the CDN, there is a slight lag when accessing the blog from the local area as the servers are quite fast. But the load time with 700ms is still very fast. As you can see from above, the configuration was super easy, and requires only three steps:

  1. Setup Azure CDN
  2. Install a WordPress plugin
  3. Configure the plugin to use CDN

For those coming from overseas, the total load time has improved from ~3 seconds down to~1 second (on average), which is a considerable reduction you can feel as an end-user. Of course, these results can change again when more content has been published, at the time of writing/testing we had eight published articles and a lot of static content on the page graphics that don’t change and generic content that’s displayed to all users. Also updating WordPress or updating some of the plugins could have an impact, positive or negative. But the performance changes after implementing caching and a CDN is positive.

非常感谢Azure CDN产品组,尤其是 Anton Kucer,他帮助测试和调整了我们的实施。

There’s just one more thing

Numbers are great for comparison, and they give you good feedback on how you rank. However, don’t get too obsessed with the greens and reds. Not everything is indeed a problem or applies to your website or blog. Take it with a grain of salt; there is no solution which is a fit for all. You can read more about the different tools to measure performance on the WP Rocket blog。另外,您可能要注意网站的加载时间, Psychology of time: Perceived vs Actual Loading Time。并且–可能还有其他方法可以加快网站加载时间。另外–了解您的读者,他们从何处以及在什么设备上访问您的网站?

在我们的案例中,使用Azure CDN代表了完整解决方案的一部分,该解决方案可以优化博客的全球影响力。通常,需要采取其他步骤来提高整体性能。我们渴望听到您的 story how the performance of your website has been improved using caching and CDN.

This blog post was also published on the Microsoft Cloud Blog as“Make websites on WordPress and Joomla faster with Azure CDN“.

Tags

Related Posts

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.