A fast and performant website is incredibly important. Mobile and tablet usage are on the rise, people are busy and increasingly impatient, everyone wants to get to content more quickly. Although this post is tailored to WordPress there are still some great takeaways for any web project so even if you’re not running a WordPress website, read on to learn some neat tips and tricks you may not have already heard of.
If you haven’t already read my WordPress performance hints post I would recommend giving that a read too.
How do you know how fast your website is?
GTMetrix is far more detailed than Google PageSpeed Insights (at the moment) so I always go to GTMetrix first. Google PageSpeed Insights is something I use to focus in on some of the key aspects.
If you run a test on GTMetrix for this website you’ll see what kind of data you get back.
First, focus on these two key areas:
GTMetrix use colour coding here, green is good, orange is not so good and red is terrible.
Page load speed is important here too as well as total page size and requests. You want the website to load quickly, 1.23 seconds is pretty good, you want it to be small, anything under 1mb is good if you are using images, this is a text based blog (mainly) so under 300k is good.
If you are not technically proficient, the above may be scary or confusing or both. Without going in to masses of detail – basically what we are aiming to do here is to improve. Performance scores numbers need to go up, Page details need to go down.
If you know code, you can view the source of your website and manually look through all of your .js, .css links to see how many requests are going out. Each file the HTML references is a request.
The core premise is to reduce the files requested, or http requests as its known by those who know these things!
How to speed your website up
I suspect most of you scrolled right down to this section! Here are a few of the tips and tricks I apply to almost all of my client websites.
Please make a backup your website including your database before doing any of the steps below.
Make sure you are on the latest WP, Themes and Plugins
The most obvious first step is make sure you are up to date on WordPress core, themes and plugins. Go to your dashboard and check you are up to date via the “Updates” panel. The WordPress Team, Theme and Plugin Developers work hard to keep security holes patched and work on optimising code.
Minification and Compression
This is a very powerful plugin with a perhaps overwhelming set of options and settings. Without digging through too much detail here, I’d recommend installing and then going to this guide on GT Metrix.
This is a bit of a strange one as it doesn’t appear to be maintained, or at least it hasn’t been updated in over 2 years now. However, it works perfectly with WP 4.5.1 and is a great solution when you cannot use W3 Total Cache. For example, the webhost I use, WP Engine, has its own amazing caching layer so Total Cache isn’t required.
Once installed, go to Settings > MinQueue. From there make sure you have “Enable the helper in the front end of the site (only visible for site admin users).” checked/ticked.
Then save at the bottom.
Now visit your website whilst still signed in and click the “MinQueue” in the admin bar.
This gives you a list of all of the file IDs that are loaded through your WordPress install, theme and plugins. WordPress calls it “enqueuing” or “enqueue” instead of loading.
Simply copy and paste the enqueue IDs from the list that you want to minify and join together (or concatenate) and add them to the lists. Make sure you’ve clicked “Enable script minification” and “Enable style minification” and Save Changes.
You’ll probably want to experiment a little bit to get the best results, but in my tests this step alone saved 1 to 3% depending on how many files you were loading.
Sometimes plugins like to load things that you don’t want them to load. Jetpack for example (which is awesome) does like to load styles and scripts when it isn’t always necessary. Asset Queue Manager can turn off these unwanted scripts and styles.
Install and activate the plugin and then go to the website view of your WordPress website, click “Assets” in the admin bar and you’ll get an overlay of everything being enqueued. Just click it to turn it off.
Incidentally, this is a neat trick for just turning off all of Jetpack scripts and styles.
I went through Image Optimization in my WordPress performance hints post. If you want to batch process images before uploading though, seriously check out TinyJPG it compresses the dickens out of images.
This is where things get a little bit more technical. If you are unfamiliar with server side technology, there is a common configuration file called .htaccess which helps to deal with Apache routing. Obviously, it only works on Apache hosts so if you’re not sure check with your webhost or login to your file manager/sFTP and check for a .htaccess file.
This is a wonderful resource from the HTML5 Boilerplate.
Warning! Messing around with this file can cause unwanted issues! If you make an error in the document, even a missed space or wrong quotemark it could take your website down, so save a backup to revert to if needed.
Finally, I’d recommend searching around for a good solid webhost. I use WP Engine as it is specifically geared to WordPress optimization. However I’ve heard great things about Digital Ocean and A Small Orange. This can help massively with website response times, caching and a multitude of different things, make sure you shop around though and ask their customer sales departments before you commit to anything.