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
- Optimizing Images: the easiest one is to reduce the size of images. We use ShortPixel （作为免费插件提供）并优化了我们所有的图像。这样平均可以将文件大小减少60％，而不会明显降低质量。
- Caching of Content: 至少在WordPress社区中，另一种非常著名的做法是缓存内容。我们决定使用插件 Swift Performance, one of the rising stars these days. Available as a free and premium version.
分数还不错，但考虑到来自美国的访客的加载时间已经接近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
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
- … 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解决方案：
我们决定去“Standard Verizon”提供，因为它附带“Custom domain HTTPS”支持。这使我们可以指定自定义域名“cdn.cloudelicious.net”, instead of “cloudelicous.azureedge.net”.
Configure Azure CDN
- “cloudelicious.net”配置为“Origin hostname”，它定义CDN从中提取内容的URL；
- “Origin host header” and “Origin path”保留为空，因为我们的设置不需要它们；
- 我们加了“cdn.cloudelicious.net”作为我们的自定义主机名，然后启用“Custom domain HTTPS”（仅在Verizon上提供）。
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.
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?
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:
- Setup Azure CDN
- Install a WordPress plugin
- 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。并且–可能还有其他方法可以加快网站加载时间。另外–了解您的读者，他们从何处以及在什么设备上访问您的网站？
This blog post was also published on the Microsoft Cloud Blog as“Make websites on WordPress and Joomla faster with Azure CDN“.