I am quite happy with the performance improvement to my WordPress hosting in Azure. After I put all the measure for performance improvement

1. Change default application settings
2. Create .user.ini to override php.ini settings
3. Use AutoOptimize plugin (and web cache)
4. Use CDN as reverse proxy cache

Read my previous blog here - blog.libinuko.com/2017/11/23/troubleshooting-wordpress-multisite-hosting-in-azure/. I analyse from the report that actually there are room for improvement in the image processing. With current configuration, all image processing will be done in the Azure hosting, and all of images will be served from my Azure app services. This processing consumes CPU and memory of the server. Since my blog has many images, I can see spikes in the real-time dashboard that impact average response time.

Although it doesn’t seem a problem at the moment, but the response increases as high as more than 10x average. Its not safe in case the web receive sustainable request that trigger image processing. Of course, we all know that Azure App Service is elastic – we can scale-up the instance with few click or activate auto-scale. Auto-scale will allow the web to increase the resource automatically when it reached a threshold. Since auto-scale equal to auto cost increase, I put this option as the last resort. I plan to optimize the resources with many free resources that available in the internet.

Main criteria: Free Plan

I search using “Wordpress free CDN” in google, and went through many articles about WordPress free CDN. I am looking for resources/images CDN, since I already used CloudFlare as web cached/reverse proxy CDN. My main first criteria is that the CDN must offer free plan. The second criteria is – the CDN must be able to store images or resources. My search tumble to Cloudinary.com (https://cloudinary.com) that provides free plan (with some monthly quota). This service also provide image processing in their service, so that I can offload the image processing CPU from my Azure to it. The next problem is how to upload the files to the CDN and how to modify the image url?

Auto fetch

I install Auto Cloudinary (https://wordpress.org/plugins/auto-cloudinary/), and follow their configuration guide. Unfortunately their configuration guide is obsolete. It doesn’t work. Then I read Cloudinary documentation, and found out about auto fetch feature. Auto fetch feature basically send a request to Cloudinary url a link to original files. If the file is not available, the Cloudinary will fetch the stream from original location and use their CDN network to distribute the content to end user. The auto fetch URL has following format: https://res.cloudinary.com/[CLOUD_NAME]/image/fetch/[ORIGINAL_URL] For example, if the original url of the resource is https://blog.libinuko.com/upload/images.jpg , and the cloud_name is myblog; then the auto fetch url will be https://res.cloudinary.com/myblog/image/fetch/https://blog.libinuko.com/upload/images.jpg. As I mentioned before, that the Auto Cloudinary documentation is not correct, so I take this opportunity to share the correction.

1. Cloud Name : [Cloud_Name]/image/fetch
2. Auto Mapping Folder : [BASE_ORIGINAL_URL_OF_YOUR_IMAGES]

See images below, my cloud name is itszap-cdn, hence I type itszap-cdn/image/fetch , in the Cloud Name settings. Next is auto mapping folder, since all of my images will have common prefixes https://blog.libinuko.com/wp-content/upload/sites/8 , then I put this information in Auto Mapping Folder setting.

Now I can post with any image size, and disable WordPress thumbnail processing. The Cloudinary will be responsible to process the image resizing, and distribute it through their CDN network. I can see no more spikes in the dashboard. The CPU resources is now transferred to Cloudinary – and you can see in the dashboard.