Preparing for optimized delivery<\/h2>\n\n\n\n
It\u2019s good to get an understanding of how fast or slow the current website is. Helpful tools are provided by GTmetrix and Pingdom, but you can also use Load Test<\/a> from Azure DevOps. As a preparation, we looked into the following two topics:<\/p>\n\n\n\n After implementing the solution described above, we started with the performance analysis using Pingdom and ended up with a score as follows:<\/p>\n\n\n The performance grade was already quite okay in Germany, but performed poorly for users in US, Brazil, and Tokyo. With image optimization and caching already in place, fronting the content with Content Delivery Network (CDN) is the last possible way to boost the performance.<\/p>\n\n\n\n You may find various articles on how to improve the performance of a website, but using CDN is something that gave us the biggest bang for our buck.<\/p>\n\n\n\n Let\u2019s dive into this question for a second: A Content Delivery Network (CDN) is a distributed network of servers that can efficiently deliver web content to users. CDNs deliver cached and dynamic content from edge servers and\/or Point of Presence (POP) locations that are, in the case of Azure, deployed in over 129 sites globally to minimize latency. For more information, reference the official documentation<\/a>.<\/p>\n\n\n\n Having a CDN brings the content of the website closer to its visitors. Using a local CDN POP helps accelerate downloading and display content. Other reasons for using a CDN could be to:<\/p>\n\n\n\n The prominent question at this point is when should a CDN be used. In a typical case, you should use a CDN when your website is getting accessed beyond your local region. Our blog is hosted in Europe, extending the capabilities with CDN was a logical step to improve the experience for Asia and Americas.<\/p>\n\n\n\n The Azure CDN platform is comprised of three providers, namely Azure CDN from Verizon, Azure CDN from Akamai, and Azure CDN from Microsoft.<\/p>\n\n\n We chose the \u201cStandard Verizon\u201d in our example, but we could have chosen any other provider as well. We didn\u2019t require any special features, but the most fancy is probably the \u201cCustom domain HTTPS\u201d support, which allows us to specify a custom domain name \u201ccdn.cloudelicious.net\u201d, instead of \u201ccloudelicous.azureedge.net\u201d.<\/p>\n\n\n\n The configuration of the CDN is very straightforward. We configured it with the following settings:<\/p>\n\n\n\n We will be using Azure CLI for enabling CDN. Think of the resource group (cloudelicious-prod-rg) you want to use for this and start with the creation of the CDN profile (cloudelicious-prod-profile). In this step the SKU will be selected, which will be \u201cStandard Verizon\u201d in the example below.<\/p>\n\n\n\n az cdn profile create -g \u2018cloudelicious-prod-rg\u2019 -n \u2018cloudelicious-prod-profile\u2019 \u2013sku Standard_Verizon<\/strong><\/p>\n\n\n\n A named endpoint \u201ccloudelicious-prod-endpoint\u201d is created to connect to a CDN. In this step the origin hostname and the URL of the website (www.cloudelicious.net<\/a>) will be specified, SSL only (TCP 443) and compression will be enabled as well:<\/p>\n\n\n\n az cdn endpoint create -g \u2018cloudelicious-prod-rg\u2019 -n \u2018cloudelicious-prod-endpoint\u2019 \u2013profile-name \u2018cloudelicious-prod-profile\u2019 \u2013origin \u2018cdn.cloudelicious.net\u2019 \u2013no-http \u2013enable-compression<\/strong><\/p>\n\n\n\n The next step is the configuration and enablement of the custom domain \u201ccdn.cloudelicious.net\u2019\u201d. Of course, this domain name has to be registered in your DNS before proceeding.<\/p>\n\n\n\n az cdn custom-domain create -g \u2018cloudelicious-prod-rg\u2019 \u2013endpoint-name \u2018cloudelicious-prod-endpoint\u2019 \u2013profile-name \u2018cloudelicious-prod-profile\u2019 -n \u2018cloudelicious\u2019 \u2013hostname \u2018cdn.cloudelicious.net\u2019<\/strong><\/p>\n\n\n\n Using the final command to enable the custom domain, including validation can be completed within a few hours.<\/p>\n\n\n\n az cdn custom-domain enable-https -g \u2018cloudelicious-prod-rg\u2019 \u2013endpoint-name \u2018cloudelicious-prod-endpoint\u2019 \u2013profile-name \u2018cloudelicious-prod-profile\u2019 -n \u2018cloudelicious\u2019<\/strong><\/p>\n\n\n\n The steps above are all you need to configure. Remember the URL specified under name \u201ccloudelicous.azureedge.net\u201d or custom domain \u201ccdn.cloudelicious.net\u201d as this will be used later to configure the CDN for the website, in the example using WordPress or Joomla.<\/p>\n\n\n\n If you want to know more about Azure CDN, check out this Azure Friday<\/a> show to get an understanding of how CDN works.<\/p>\n\n\n\n As mentioned during the introduction, Joomla is one of the most popular content management systems (CMS), along with WordPress. The integration of Azure CDN into a Joomla-based website is as easy and can be done by installing the extension for CDN. The extensions to add\/configure the CDN endpoints are the following and are not exclusive:<\/p>\n\n\n\n The extension updates the website to support rewriting, which ensures static assets are loaded from the CDN and not anymore from the origin server.<\/p>\n\n\n\n The configuration is straightforward. Add the CDN endpoint name as the \u201cCDN Domain\u201d and check the file types you want to load from the CDN. One thing not to forget is to clear the cache, this will purge all the stored cached files and force up to pull the assets from the CDN.<\/p>\n\n\n\n Same as above, the configuration is straight forward. Add the CDN Endpoint Name as the \u201cCDN Domain\u201d and check the file types you want to load from the CDN. One thing not to forget is to clear the cache \u2013 this will purge all the stored cached files and force to pull the assets from the CDN.<\/p>\n\n\n\n If you are using WordPress, as we are with our blog cloudelicious.net, then you have to install a WordPress plugin. The requirement is to use a plugin that does URL rewrites using the CDN hostname on the webpage, since default WordPress doesn\u2019t do that. Using a plugin is a prerequisite as WordPress uses absolute URLs for linking on its page by default. It would bypass the CDN if no rewriting is done.<\/p>\n\n\n\n The plugin is needed to add\/configure the CDN endpoints. In most cases, a caching plugin offers this integration. For this test we used \u201cSwift Performance<\/a>\u201c as it provided the best improvement. The configuration of the CDN isn\u2019t complicated and is activated by adding the CDN\u2019s endpoint. Simply add the URL defined before in our case \u201ccdn.cloudelicious.net\u201d.<\/p>\n\n\n\n It takes a few minutes to deploy, plus it\u2019s easy and maintains itself once the configuration is done. No need to push content, Azure CDN is taking care of everything from this moment. To run some tests on CDN, utilize CDN Planet<\/a>, which offers a good tool.<\/p>\n\n\n\n Depending on the scenario, you might need to enable Cross-Origin Resource Sharing (CORS). CORS is an essential component when loading web fonts or images from another domain, or loading them from the CDN. When not handled correctly, the data won\u2019t be loaded or displayed unless it is explicitly stated in the HTTP header. If not stated, an error like the following would be shown:<\/p>\n\n\n\n Access to Font has been blocked by CORS policy: No \u2018Access-Control-Allow-Origin\u2019 header is present on the requested resource<\/p>\n\n\n\n The configuration can be done directly on the web server (the origin), or on the CDN Endpoint if supported. As we went with the Verizon Standard SKU, we had to configure the CORS header on the origin server. The code snippets below can be used to add the HTTP Header Access-Control-Allow-Origin for *.css files and web fonts:<\/p>\n\n\n\n .htaccess<\/strong><\/p>\n\n\n Nginx<\/strong><\/p>\n\n\n In the example above, our site \u201chttps:\/\/www.cloudelicous.net\u201d is granted access to the requested resources, such as css files and web fonts. For testing purpose, you might want to start using a wildcard (*) to setup the HTTP header, which disables CORS and allows any URL to access the CDN Endpoint. I wouldn\u2019t recommend this for production.<\/p>\n\n\n\n If you don\u2019t have access to the origin server, you will need to use Azure CDN Premium SKU offers<\/a> to set CORS header from the CDN. As mentioned above, this capability is not yet available with the Azure CDN Standard SKU\u2019s.<\/p>\n\n\n\n You probably wonder how much this configuration changed the performance of the website. We didn\u2019t expect miracles, but we were very happy with the new score of caching and CDN:<\/p>\n\n\n We had a significant improvement in speed from oversees. There is a slight lag when accessing the website from the same local area, but the load time of 720 ms is still very fast. As you can see from above, the configuration was also super easy and set up requires only three steps:<\/p>\n\n\n\n We reduced total load time from more than three seconds down to approximately one second (average). This is a considerable reduction that you can feel as an end-user. Of course, these results can change again when more content has been published. Also updating Joomla\/WordPress or updating the plugins could have an impact. But the performance improvements after implementing caching and a CDN are overwhelmingly positive.<\/p>\n\n\n\n Questions or feedback? Let us know in the comments.<\/em><\/p>\n\n\n\n We all know it; first impressions are the most lasting. As in real-world, sluggish load times can leave a negative impression for any website and even negatively affect your business. Below we\u2019ll walk through how Azure CDN can improve that first impression, speeding up websites hosted on WordPress or Joomla.<\/p>\n","protected":false},"author":5562,"featured_media":95465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"msxcm_post_with_no_image":false,"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","footnotes":""},"post_tag":[2272],"content-type":[340],"topic":[2241],"programming-languages":[],"coauthors":[457],"class_list":["post-75667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-microsoft","content-type-tutorials-and-demos","topic-cloud","review-flag-1593580428-734","review-flag-1593580415-931","review-flag-1593580771-946","review-flag-and-o-1593580423-446","review-flag-exclu-1593580297-613","review-flag-free-1593619513-693","review-flag-new-1593580248-669"],"yoast_head":"\n\n
![\"Website](\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/03\/v2-CDN-Image-1-1024x609.webp\")
<\/figure>\n\n\n\nWhat is Azure CDN?<\/h2>\n\n\n\n
\n
Does it make sense to use a CDN?<\/h2>\n\n\n\n
![\"website](\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/03\/v2-CDN-Image-2-1024x461.webp\")
<\/figure>\n\n\n\nConfigure Azure CDN<\/h2>\n\n\n\n
\n
\n
\n
\n
Enable Joomla for CDN<\/h2>\n\n\n\n
\n
Enable WordPress for CDN<\/h2>\n\n\n\n
Cross-Origin Resource Sharing (CORS)<\/h2>\n\n\n\n
\n
\nlocation ~ \\.(ttf|ttc|otf|eot|woff|font.css|css)$ {\n add_header Access-Control-Allow-Origin \" \nhttps:\/\/www.cloudelicous.net\";\n}\n<\/pre><\/div>\n\n\nPerformance improvement<\/h2>\n\n\n\n
![\"Website](\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/03\/v2-CDN-image-3-1024x610.webp\")
<\/figure>\n\n\n\n\n
Follow Michel @michelluescher<\/a> and on his blog cloudelicious.net<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"