I was recently working on some performance issues, which also included dealing with the web front-end. I’m more of a middleware/backend guy, however, do know my way around web development and website optimization (minification, bundling, caching, Gzip, CDN, etc.)
After working on the issues, I was wondering how my blog would perform. I’ve never run any analysis, leave alone applied any tweaks. This website is a basic out of the box WordPress installation (scripted by discountasp.net) hosted on Windows containing only a hand full of articles. And therefore not even thinking about possible performance issues, but I was wrong.
The tips below can be applied by anyone with rudimentary WordPress / IIS knowledge.
Just a Disclaimer: this isn’t an extensive guide. I’m just addressing some common issues and simple fixes. I’m in no mean an WordPress expert. I was just interested to see if I could improve my ‘Page Speed Grade’ (http://gtmetrix.com/) from a D to an A.
My WordPress optimization steps
1 – Enable IIS compression
Enable compression to provide faster transmission times between IIS and compression-enabled browsers. The implementation details can be found here http://technet.microsoft.com/en-us/library/cc771003(v=ws.10).aspx. Include the following within your web.config file. credits StackOverflow
2 – Leverage Browser Caching
Browser Caching will allow browsers to take advantage of caching. Include the following within your web.config file.
3 – Optimize your images
I found out that I could shave off 25% on the average file size but wasn’t fond of the idea of re-upload all my images. Fortunately, a plugin called EWWW Image Optimizer supports optimizing all existing assets. It’s even possible to alter the compression setting; however, the defaults are perfectly fine options. New images will be compressed by default.
4 – WordPress caching
You can optimize WordPress by introducing a new caching layer/framework. After having played with a couple of plugins, I’ve seen the best results after installing W3 Total Cache. This plugin allows caching at various levels like; Page, Database, and Object.
In addition to this, I’ve enabled the CDN option, which stores all my static assets within Azure blob storage, including existing assets.
Note: I haven’t configured a CDN within Azure. As for now, I’m just directly pointing to the blob storage instead. Doing this has some disadvantages, given that you will only benefit from loading assets from a different domain and not able to specify a TTL. This might affect your search engine ranking as well. Setting up a CDN isn’t that complex;
Using CDN for Azure
The W3 Total Cache plugin supports custom domains as well, make sure to map the CDN as described here:
How to Map Content Delivery Network (CDN) Content to a Custom Domain
Setup browser caching for Azure CDN:
How to Manage Expiration of Blob Content in the Azure Content Delivery Network (CDN)
The result isn’t perfect. However, I was able to improve my score significantly (previously around 60%). I think that configuring the Azure CDN, creating image sprites, and enabling lazy loading for images would be the next step.