Speed Up WordPress: Using CDNs, Compression, and Minification to Speed Up WordPress
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 “ href=”https://www.google.com.tr/search?q=http+compression+check”>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 href=”https://github.com/h5bp/html5-boilerplate”>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: href="https://wordpress.org/plugins/wp-super-cache/">WP Super Cache and href="https://wordpress.org/plugins/w3-total-cache/">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 filesMinifying 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 href="http://wordpress.org/plugins/autoptimize/">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 WordPressIf 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 WordPressThere 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 “ href=”http://jetpack.me/support/photon/”>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 href=”http://www.wpbeginner.com/wp-tutorials/how-to-setup-cloudflare-free-cdn-in-wordpress/”>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 href=”http://www.maxcdn.com/solutions/cms/wordpress-cdn/”>a thorough
tutorial on how to install its CDN inside W3 Total Cache’s settings.
End of Part 2In 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!
