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. To be honest, 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 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. Simply include the following within your web.config file. credits stackoverflow
2 – Leverage Browser Caching
This will allow browsers to take advantage of caching. Simply 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 really 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
WordPress can be optimized internally as well 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 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 really configured a CDN within Azure. As for now I’m just directly pointing to the blob storage instead. This has some disadvantages given that you will only benefit loading assets from a different domain and not able to specify a TTL, undoing some of the earlier changes. In addition, this might affect your search engine ranking as well. Setting up a CDN isn’t that complex, the details can be found here:
Using CDN for Azure
The W3 Total Cache plugin supports custom domains as well, just make sure to map the CDN as described here:
How to Map Content Delivery Network (CDN) Content to a Custom Domain
Enable browser caching when using Azure CDN:
How to Manage Expiration of Blob Content in the Azure Content Delivery Network (CDN)
The end result isn’t perfect yet however, 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.