When I first set up my website, I found that the performance was really not what I was hoping for. It was really slow to load, it didn’t get faster with reloads, and it didn’t seem to matter how much horsepower I threw at the servers involved – it was just slow. I found Google PageSpeed and the Pingdom, and worked through the warnings, trying to figure out what they meant at first, then figuring out how to implement them.
Here’s what I did:
- Configured web.config for caching and HSTS
- Minify + CDN JS and CSS (this post)
- CDN whole site
After configuring the web server to force TLS and to encourage clients to cache static content, I next targeted the warning to minify my CSS and JavaScript files. Wikipedia defines minification as: “the process of removing all unnecessary characters from source code without changing its functionality.” This means that the files that are downloaded are smaller, which means that the page loads and therefore renders more quickly.
Minification takes a file like this:
.inline-footnote {
padding: 2px
6px;
text-decoration: none;
border-radius: 3px;
vertical-align: sub;
margin: 0
2px;
line-height: 1;
vertical-align: text-top;
font-size: 12px;
margin: -5px 0 0;
display: inline-block;
font-weight: 500;
border-bottom: 0px;
cursor: pointer;
}
.inline-footnote:hover {
text-decoration: none;
}
.inline-footnote
span.footnoteContent {
position: absolute;
z-index: 10000;
padding: 15px;
background-color: #fff;
border: 1px
solid #6c6e6d;
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .4);
font-weight: 500;
font-size: 13px;
line-height: 1pc;
letter-spacing: .01em;
max-width: 300px;
}
and outputs a file that looks like this:
.inline-footnote{padding:2px
6px;text-decoration:none;border-radius:3px;vertical-align:sub;margin:0
2px;line-height:1;vertical-align:text-top;font-size:12px;margin:-5px 0 0;display:inline-block;font-weight:500;border-bottom:0px;cursor:pointer}.inline-footnote:hover{text-decoration:none}.inline-footnote
span.footnoteContent{position:absolute;z-index:10000;padding:15px;background-color:#fff;border:1px
solid #6c6e6d;box-shadow:2px 2px 10px 0 rgba(0,0,0,.4);font-weight:500;font-size:13px;line-height:1pc;letter-spacing: .01em;max-width:300px}
For WordPress, there’s a number of tools that perform this task automatically. The tool I chose, BWP Minify, also combines the files so that there’s fewer connections to make (more files means more connections, and each connection has overhead). This needs to be handled carefully, because you also don’t want to block the page from loading because of a large file – just combine files that are related. The W3 Total Cache plugin is a lot more popular, and, unless you’re already using a caching solution (I use Project Nami Blob Cache), it’s probably a good choice to kill two birds with one stone. Sometime, I may run a comparison of a few different plugins that optimize performance, but that’s not part of the content today.
Configuring minify-ing plugins is generally simple, but there’s a few things that can trip you up – if your website starts to look like the below image, you’ve got something wrong with the minification! Fortunately, simply deactivating the plugin will restore the site to normal working order.
You can configure the plugin to serve the content over a CDN, which I’ll be covering in a future post. Depending on the plugin, it may try to store files in a place that your webapp can’t write to (or it may not exist) so make sure that the caching location for the minified files actually exists. If it’s correctly configured, after browsing the site for a while, files should start appearing there.
Another configuration that goes along with the minification is changing the location of the references to the files. Some improvements can be made if the files are located in the footer instead of the header of the page. This is usually a toggle in the plugin. Understanding the critical rendering path is pretty complex. If you want to learn more about it, Google’s got some good documentation here!
That’s all there is to it – enabling CSS and JS minification in your Azure WordPress installation will make the files slightly smaller and hopefully improve performance slightly.