In the first part of this series, we reviewed caching and database optimization. In this second part, we'll talk about compression, minification, and using a CDN.
It's simple math: If your page's size is 1MB, a visitor with a 10Mbit connection can load it in 800 milliseconds. So, if you can reduce your page size to, say, 600KB, it would take only half a second for the visitor to load it.
Luckily, there are many ways to compress and minify your pages' CSS, JS and HTML output. Let's see how:
HTTP compression formats like gzip and deflate are used by nearly every server platform (including Apache and Microsoft IIS) and accepted by virtually every browser, so HTTP compression is most likely to run on every device and every server. (Your server might even enable it by default. To check it, search for "http compression check", click one of the results, and type in your website address.)
So how do we enable HTTP compression? There are several ways to do it, but I think these two can help everyone:
1. Enable compression via
.htaccess: If your server didn't enable HTTP compression by default, you can enable it by pasting the following code into your
.htaccess file (taken from the HTML5 Boilerplate):
2. Enable HTTP compression with plugins: If you don't know how to edit your
.htaccess file (or simply don't want to do it), you can enable HTTP compression using the two popular caching plugins: WP Super Cache and W3 Total Cache. Both of them offer the ability to enable HTTP compression via their settings pages.
Minifying assets is almost as important as compressing them. In PHP files, whitespace isn't really important since they are parsed and compiled; but whitespace in HTML, CSS and JS files increases file size, which means that visitors will download bigger files. To avoid this, you can delete all unnecessary characters in your HTML, CSS and JS files.
In addition to minifying them, you can also combine multiple CSS and JS files into one CSS and JS file. Doing this will reduce the number of DNS lookups and browsers won't download each CSS and JS file separately.
If your blog is more visual than average, if your pages are filled with images, or even if you're a regular blogger and want your images to load faster, you can (and should) use content delivery networks (which are commonly referred to as CDNs).
The logic behind content delivery networks is to serve content more efficiently by using "edge servers" around the world. These servers can contain your downloadable content (like images, CSS files and such) and when a user visits your page, the closest edge server to the visitor serves the files. With low prices on bandwidth (even free, sometimes) and blazing fast servers, the delivery of your content will be faster than ever.
There are more than a few plugins out there which provide synchronization of your assets with different CDNs, but I'll name just a few:
In this second part of the series, we went through compression and minification of assets, and using a CDN in WordPress. In the next (and last) article, we'll see the importance of image optimization, and we'll close up with some thoughts on using WordPress with common sense.
What do you think about speeding up WordPress? Share your thoughts below in the comments section. And if you liked the article, don't forget to share it.
See you in the next part!