Starting today I’ll be writing some guides on how to improve the performance of your blog. Over the next few weeks I’ll cover everything from caching, spriting, lazy loading, and asynchronously calling external resources and plenty in between. If you’ve never heard those terms then don’t worry – I’ll explain them in greater detail when I get to them.
Before I even post my first article in a few days I want to warn people in advance that things might get a bit nerdy. I appreciate that not everyone is as interested in these topics as I am, and as a result I’ve tried to keep things as easy to understand as possible. Naturally, for anyone planning on reading my upcoming posts, there will probably be points I cover which don’t interest you in the slightest. However, if you end up reading, and learning something new about even one point then I’ll feel like my writing has been worth it, so do please let me know what you think as I go along!
I’ve spent the past few weeks being obsessed with my own site’s performance and must have spent hours tweaking settings, researching best practices and techniques and trying to find out where, and why, my site was loading slowly. As a caveat, I must state that I’m not an expert, I am simply sharing my findings with you and hoping that others may find them useful.
My guides and tips will assume the following:
- Your blog is running under WordPress
- Your site is self-hosted in a shared hosting environment or better – that is to say that your blog does not run on WordPress.com, but on another host such as HostDime, HostGator, bluehost etc.
That’s not to say that other people cannot follow the advice, but under certain circumstances you may find the environment you’re blogging under unable to be improved using the methods I will write about.
So, let’s begin with some introductory points:
Why is performance important?
We’ve all been there – visiting a site and it starts loading. It continues loading. It’s still loading. Fifteen or twenty seconds might not sound like much, but when you’re sitting in front of a PC drumming your fingers it seems like an eternity. Research has shown that around 40% of visitors will abandon a website if it’s taking more than 3 seconds to load¹. This may sound rather drastic – I like to think I’m a bit more tolerant, but I’ve closed plenty of sites which haven’t loaded in what I deem to be an “acceptable” amount of time.
Slow site speed doesn’t just impact the end-user either. Google will rank slow-loading sites lower in their search results², so even if you have fantastic content, incredible photography, and a gorgeously designed site, if your site is taking twenty seconds to load for all your visitors then you’re shooting yourself in the proverbial foot because no-one will find your content via a web search.
On user experience…
WordPress in itself is a hugely popular platform. Through its numerous iterations during its lifetime the developers behind it have helped make it perform better, faster, and more securely. So why do some blogs load so quickly, and others take so long?
Image courtesy of David Castillo Dominici / FreeDigitalPhotos.net
Put simply, barring any hosting problems, it’s what the blog owner does with the site. Take plugins, for example. There’s a whole load of fantastic plugins for WordPress, designed to help you do a great many useful or just plain “fun” things – image galleries, e-commerce, social media and so forth. Don’t be too tempted – you should always try and think of how all these plugins are going to impact your site performance, and in web design the old axiom “less is more” is especially relevant. Just because you can install all those plugins doesn’t mean that you should. In some cases, certainly in the case of many social media plugins, a bit of research will show you that a manual solution can lead to much better site performance (no – I’m not suggesting you code your own plugin, but loading the required “Like” boxes and “Tweet” buttons separately from the social networking site using their developer documentation can often be better than having a plugin handle it for you).
I feel this is a good time to mention as well (though this is only my opinion) that if you have any plugins or code which pops up a window or message box to say anything like “Follow me on Facebook”, “Tweet this”… basically anything that prevents the user from viewing the content they are there to see without having to make an additional click, then… what’s a good way to say this… I hate them. It’s exceptionally bad design practice to force unwanted content on your visitors and will almost certainly lead to some visitors leaving your site before they’ve even seen what they originally came for.
What impacts site performance?
In order to understand the different factors which can impact site performance it’s important to establish roughly how WordPress works. To try and keep it easy to understand, I’ve made a vastly simplified diagram which explains, in essence, what goes on in the background when someone requests a page on your blog.
Once the WordPress back end starts working to fetch your page it has to reference a great deal of different resources:
[tabs slidertype=”left tabs”] [tabcontainer] [tabtext]Core Page Files[/tabtext] [tabtext]Database Calls[/tabtext] [tabtext]Stylesheets[/tabtext] [tabtext]Internal Scripts[/tabtext] [tabtext]External Scripts[/tabtext] [tabtext]Images[/tabtext] [/tabcontainer] [tabcontent] [tab]WordPress is composed of a great deal of separate files which are built into the page that you see here on demand. For example – the header, with the logo, navigation menu and so forth, might be one file, then there is the main page which has the dynamic content. This could be composed of any number of files, and then there are pages for the footer, the sidebars and so forth.[/tab] [tab]Posts, comments, settings, user data and so on for WordPress are all stored in a database. The WordPress back end will need to retrieve the post content from the database and render it into the correct part of the page.[/tab] [tab]Stylesheets enable you to completely change vast aspects of your site – colour scheme, text size, font – simply by modifying one centralized file.[/tab] [tab]Your site might load a number of scripts to provide effects or functionality. If you click an image on my site, such as the one above, it will open up in an overlaid window. This is powered by a script. Likewise, the navigation menu, and font replacement for titles is also powered by scripts.[/tab] [tab]Do you have social media elements on your site? What about ads? Tracking code, such as Google Analytics? These are all loading scripts from external sources. That is – even once all the data for your site has been retrieved, additional requests must be made to the external sources to download their scripts.[/tab] [tab]Chances are, if you have a blog, you probably put images into your post. Naturally these all need to be loaded individually.[/tab] [/tabcontent] [/tabs]
The performance of every single one of the above mentioned resources can (usually) be improved. Yep – every single one. Even for the resources which you have little control over – such as external scripts – you can often load these in a way in which they won’t be able to impact the performance of your site as much as they did previously.
Image courtesy of David Castillo Dominici / FreeDigitalPhotos.net
If you’re still with me and want to join me on the journey of improved performance then stay tuned for my upcoming posts on the subject.
In the meantime, if you’re not already – start measuring your site performance:
With Pingdom‘s free account you can get not only alerts sent to you in case your site is down or unreachable, but you can also view a history of your site’s response time and, best of all, their feature called Real User Monitoring, which gives you live and archived information about exactly how long your site took to load for each visitor. You can get additional functionality and monitor more websites with their paid accounts.
GTmetrix allows you to run your site through Google’s PageSpeed and Yahoo’s YSlow analysis services to get average load times, optimization tips and best practices to help your site load faster and improve the end-user’s browsing experience, thus decreasing bounce-rate, and increasing the likelihood they’ll return, not to mention increasing your Google page-rank.