Imporving WordPress Performance on Azure Web Apps

WordPress is web software you can use to create a beautiful website, blog, or app. It is a free and open-source content management system (CMS) based on PHP and MySQL

The Azure Marketplace makes available a wide range of popular web apps developed by Microsoft, third party companies, and open source software initiatives. You can find more info on how to create WordPress app @ Link

Whether you run a high traffic WordPress installation or a small blog on a low cost shared host, you should optimize WordPress and your server to run as efficiently as possible. Although there are different blogs available online, this article would provide step-by-step procedure on how to fix WordPress performance issues in Azure specifically.

One of the main question we encounter most of times is

How a WordPress installation on Azure web apps is different from other providers/ why is it slow ?

– Azure web apps use a remote storage disk to store all the deployed code. When a request comes in, it would hit your web app machine which in-turn has to bring the code from remote storage into web app machine for execution. These remote storage calls add some network latency causing app to be slower than expected.

Below diagram may help you understand this scenario

As you can see in above picture, Deployed code would be stored in a remote storage and required files are accessed from it on-demand basis by web app machines.

Is there a workaround for reducing network latency between storage and web app machine ?

Yes, Using local cache but it changes how you operate web app. More info can be found @ https://azure.microsoft.com/en-us/documentation/articles/app-service-local-cache/

Troubleshoot :

As my colleague Yi Wang says "A part of solution is in understanding the problem". First look at the Browser developer tools and check where its spending the time

First Request (or)

Static files

If it is on First Request (where it brings html content). Follow below list of steps

- Enable super cache

Navigate to your WordPress admin portal ex : http://Your_WebApp_Name.azurewebsites.net/wp-admin

Click on Add New in plugins at the left nav

Search for super cache and click on install

Activate the plugin

Click on Wp super cache settings in plugins tab

Check if Caching is turned-on and update status accordingly

Navigate to your web app in browser and you should see decrease in TTFB from second request. As you can see in below screenshot, same app took minute amount of time after enabling super cache.

- Disable Plugins

If your app is still slow after enabling super cache, Try disabling all the existing plugins and check if there is any fault plugin affecting overall app performance

We have seen few plugins which are having negative affect on app performance. These plugins mostly rely on database operations to store/retrieve data.

– Add wincache.reroute_enable=1 to the .user.ini

If the slowness is due to Static files,

– Try to reduce number of requests made by your app for static files

When you navigate to a url on browser, it makes >1 requests internally for getting dependent content(it could be images, JavaScript or other files).

Ex: Below is an app which makes 145 static url requests for loading index page. As you can see, It took almost 9 sec to load its page while a minimal amount of time spent in retrieving html content after enabling super cache.

In case of Azure web apps, It uses IIS Server which receives request and forwards to PHP process for response. If IIS is busy processing other requests/cannot create a new process it would build a queue and a new request would wait in queue to get processed.

For a WordPress app, we generally see number of static file requests ranging(100-140). It's quite natural that response time would increase as requests would wait in queue to get processed over the time.

Above is a request stack of an app in normal condition vs under load. As you can see in above screenshot, queue size has increased and it took 113sec to just assign a PHP process.

High Traffic apps

– Enable CDN (making it someone else problem)

Below url has details on how to create a CDN Profile and an end point.

More Info : https://azure.microsoft.com/en-us/documentation/articles/cdn-create-new-endpoint/

At the end of above step you would receive a CDN url : https://Your_CDN_URL.azureedge.net/

Wait for 30-40 sec for web app content to get propagated into CDN servers

There are different plugins to enable CDN. Since we have already installed super cache in earlier step, Lets use that

Super Cache has in-built functionality to enable CDN, navigate to admin portal

Click on WP super cache settings in plugins tab

Click on CDN

Enter CDN url

Low Traffic Apps

Although using CDN is a good way to solve static files latency issue. Many of small vendors are less likely to utilize this feature due to added cost. Below tips may help you

–  Process static files at IIS level, All static files follow below mapping

url hits IIS ->  forwards request to PHP/wordpress -> response is fetched

IIS uses web.config file to configure server settings. This would be available at web app root folder in kudu console(https://Your_APP_Name.scm.azurewebsites.net)

 Enter Below rewrite rule and all the url's are served at IIS level instead of forwarding it to PHP process

This would help reduce fight for PHP processes.

<!-- consider whether the incoming URL matches a physical file in the /public folder --> <rule name="StaticContent"> <action type="Rewrite" url="public{REQUEST_URI}"/> </rule>

– Enable Browser cache

Browser cache, sometimes also referred to as the temporary Internet files folder, contains files from web sites you've visited. All modern web browsers maintain a cache of files for one important reason – faster display of web pages the next time you open those web sites. Thus, instead of being retrieved from the online web server (the computer that hosts the web site) each time, the files are picked from the browser cache (on your computer) which, as you can understand, speeds up the display of the web page.

Adding below content in web.config file would set the cache-control for static files . <staticContent> <!-- Set expire headers to 30 days for static content--> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> </staticContent> Browser screenshot :

– Use Local cache

As i have mentioned earlier, Azure web apps use remote storage.

Every file access would add this network latency between web app machine and storage.

You can turn-on local cache by adding below app setting in azure portal.

WEBSITE_LOCAL_CACHE_OPTION = Always

A one-way sync process is established and all the content in storage for that web app is copied to web app machine.

Using Local cache would reduce response time as files are stored in web app machine itself.

Final Notes

Special thanks to Yi Wang on our Team for help with this blog

Make sure you understand affects of local cache before using it

Useful Links:

10 ways to speed up WordPress – https://sunithamk.wordpress.com/2014/08/01/10-ways-to-speed-up-your-wordpress-site-on-azure-websites/

Back to top
Source: Imporving WordPress Performance on Azure Web Apps