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.
Let's begin!
Compression and Minification of Assets
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:
Method 1: Enabling HTTP Compression
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):
<IfModule mod_deflate.c>
# Force compression for mangled headers.
# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Mark certain resources as been compressed in order to:
#
# 1) prevent Apache from recompressing them
# 2) ensure that they are served with the correct
# `Content-Encoding` HTTP response header
<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# Compress all output labeled with one of the following media types.
# IMPORTANT: For Apache versions below 2.3.7 you don't need to enable
# `mod_filter` and can remove the `<IfModule mod_filter.c>` & `</IfModule>`
# lines as `AddOutputFilterByType` is still in the core directives.
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rss+xml" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/opentype" \
"image/svg+xml" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/plain" \
"text/vtt" \
"text/x-component" \
"text/xml"
</IfModule>
</IfModule>
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.
Method 2: Minifying and Combining CSS and JS files
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.
Minifying and combining your assets manually is considered bad practice and could be impossible in some cases. Luckily, though, it's really easy to achieve it automatically with plugins. If you're using the W3 Total Cache plugin, you can enable minifying and combining your CSS and JavaScript files via the plugin's Settings page. If you're not using it, you can install a separate plugin—my favorite one is Autoptimize. Autoptimize does the job perfectly and it has some very useful options that you can manage. I'm using this one with WP Super Cache and I'm extremely happy with the results.
Using a CDN in WordPress
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).
Why Use a CDN for a Website?
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.
CDN Plugins for WordPress
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:
- Jetpack's Photon: Being one of the most popular WordPress plugins in the plugin repository, Jetpack provides a number of features as "addons". (Think of it as a plugin serving many plugins.) One of the addons is called "Photon", a simple and free CDN service for your website. Photon will take your images and featured images in your posts and pages, upload them to the servers of WP.com, and change the URLs of your images with new URLs from the CDN. It will only filter your posts to change the URLs (meaning it won't edit your posts), so you can easily turn it off if you don't like it, but you'll probably like it a lot—it's one of the best free choices for most WordPress websites.
- CloudFlare: CloudFlare is more like a proxy server which has a CDN and acts as a firewall to protect your website against malicious attacks. And since you use their DNS zones, the URLs of the images will stay the same but will be cached in CloudFlare's servers. But be careful—installing CloudFlare is a bit tricky. Check out WPBeginner's article for more information on installing CloudFlare and using its CDN features.
- W3 Total Cache: They didn't name it "W3 Total Cache" for nothing. After all, this extremely popular caching plugin includes the feature of integrating a CDN of your choice to your website. One of the popular CDN brands, MaxCDN, has a thorough tutorial on how to install its CDN inside W3 Total Cache's settings.
End of Part 2
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!
Comments