>> Introduction
>> Part 1: Caching
>> Part 2: CDNs
>> Part 3: Asynchronous Loading
>> Part 4: Image Optimization
>> Part 5: Security
>> Round-up and acknowledgements
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]
Measuring performance
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.
>> Introduction
>> Part 1: Caching
>> Part 2: CDNs
>> Part 3: Asynchronous Loading
>> Part 4: Image Optimization
>> Part 5: Security
>> Round-up and acknowledgements
Lisa says
Thanks Charles for sharing this information. I’m in, I’ll be joining you on the journey of improved performance! So excited!
Charles says
Thanks Lisa! It’ll be no small amount of reading (though I’ve tried to keep it as concise as possible!) but I hope you’ll find some of it useful 🙂
Kristy says
I have always been curious about self-hosted sites. I would like to do that at some point. It would just require a lot of learning on my end. Hopefully I’ll have time for that one of these days. I’m just not super tech savvy. I learn quickly, but I do have to learn by reading a lot. I’m going to enjoy your series though as I do find it fascinating. It’s very nice of you to take the time to put this together. You can tell you’ve put a lot of thought into it. 🙂
Charles says
Thank you Kristy – I hope you’ll find my coming posts useful. I’ve written up 3 of them so far and wow, there’s a lot of information in them… I’ve had my wife read through them, have read them multiple times myself. I just hope they don’t end up confusing people :).
Anyway – if you ever wanted to change to a self-hosted site I’d be happy to help you out if you wanted 🙂
Kristy says
I may take you up on that someday Charles. 🙂
Minnie@thelady8home says
Brilliant!!! I love you have simplified the information. Just fabulous. I always found Pinterest plugins to be very interfering, but never knew plugins could actually impact performances!!!
I see a whole new career for you Charles! Way to go!!!
Charles says
Thanks Minnie – I hope you’ll find the upcoming posts useful in that case then! 😀
Nazneen | Coffee and Crumpets says
Oh no. You made me all conscious now about my site 😉 Looking forward to seeing your series of posts, it’s a great topic and thank you for taking the time to teach us. Also, thank you for saying it…..I hate those floating social media banners too and I too will leave if that’s the first thing I see ( I also hate the Captcha words)
Hope the family is well.
Nazneen
Charles says
Hi Nazneen, I had to laugh the other day… I was reading the blog of someone… some “guru” teaching about website “best practices”. First thing that happens when the page loads… popup: “Like me on Facebook”. I close it, because I really wanted to read it… start reading and a box slides out saying “Share this with your friends”… I closed it, I STILL really wanted to read the content. As soon as I move the mouse wheel to scroll down, yeah, you guessed it: another pop up asking me to sign up to his mailing list. I closed the page then. Seriously, how can he not realise how obnoxious that is?!
Laura (Tutti Dolci) says
Great tips, Charles! Thanks for passing your knowledge along with us :).
Charles says
Thanks Laura – I hope you’ll enjoy the rest of the posts when they come along 🙂
Kelly @ Inspired Edibles says
Charles, this is utterly cool! There is nothing like ‘doing’ to learn and I think it’s brilliant that you have decided to share your explorations and discoveries in this series. Now I saw the wordpress assumption and did not come across blogger so I’m not certain if you will be addressing blogger at any stage. I know that it is a very limited platform (in some ways good because… geez, there are no apps/plug-ins to contemplate or slowdown the site! – LOL) the downside of course is that you have to create all the darn content that would otherwise have allowed you to have this nifty stuff via software. To give one example, I had to create a recipe card for my site with print capacity and nutrition facts panel all de novo. Blogger has no app for this. Wordpress does – ugh! What a load of work and I have to key in special HTML coding each and every time. Yet, I’m happy with the result as laborious as it is.
Anyhoot, I will certainly be following along to glean any morsels I can on the tech side from you Charles. I think it’s an absolutely great idea for a series!
Charles says
Hi Kelly, I’ve never used Blogger but having to do everything by hand… yikes. That sounds terribly annoying. Did you ever consider switching to WordPress? I’m not sure how easy the process would be but I guess it must be possible!
There will definitely be some points which you’ll be unable to use in my upcoming posts, but there will absolutely be others which you will find useful. Some of the tips I will write about are not at all platform-specific so I hope you’ll find them useful! 🙂
Hotly Spiced says
Thanks Charles for doing my homework for me. I would have found all the research quite beyond me. I hate pop-ups too and would never have them on my blog. Looking forward to the next in the series xx
Charles says
Thank you Charlie – I hope you will find them useful. I’ve written part 3 of my guide now… it’s a lot of writing… I don’t think I ever wrote so much before. Seems like I could almost publish it in a book, lol! 😀
Barb @ Profiteroles & Ponytails says
Your tips will be very useful Charles. I’ve been thrown into another big project at work, so it’ll be a little while before I can put them into practice. Great idea to share your knowledge! We appreciate it…especially me, as my blog could use a little TLC in the design and programming department!
Charles says
Hi Barb, I hope you’ll find them useful. Good luck with your work… I hope it doesn’t take up too much of your precious free time! 🙂
Sissi says
Brilliant idea, Charles! I’m sure many people (like me) will learn a lot and profit from your advice. You say you are not an expert, but you know hundred times more than an average blogger about the technical side (your kind advice and help has always proved that you are more than competent in technical side of blogging). I am sure I will improve my blogging experience thanks to you! Looking forward to reading next episodes!
Charles says
Hi Sissi, you’re too kind. I find this kind of thing really interesting… I’m a big nerd at heart, haha :). I just hope I can convey the information I want to in an interesting way which won’t bore people!
I must admit, during my research, I checked out the performance of quite a number of blogs of people I know. Yours got a very good score and page-speed. Your theme and style is very light and minimalist! You have the kind of load time which I was striving to achieve with all my social media add-ons and stuff so I hope you feel satisfied with your site these days!
Sissi says
Thanks a lot, Charles. I’m proud that according to you my website works quickly (that is when it works because I have been recently having some “down” moments a bit too often…).
On the other hand my website is not complex at all. Not very inventive, like yours for example, so I suppose there is not much merit.
Kitchen Belleicious says
what a great information post!
Raymund says
Very nice tips Charles, i took note on most of it.
Charles says
Thanks Raymund, there’ll be more to come 🙂
Nami | Just One Cookbook says
You have been always my secret web support. I really appreciate your kindness and thank you for sharing your knowledge with us. This is a valuable source, and I’m going to take some time to read this (and sent the link to Shen…hoping that he’ll summarize for me! LOL).
Charles says
Hehe, thank you Nami – I hope you’ll find some of my upcoming posts useful :). Let me know if you have any questions!
Anneli (Delicieux) says
Hi Charles, Well this is interesting and quite a departure from delicious recipes! I am lucky enough to be married to a web designer who helped me set up my site so I am a bit of a cheat. But he does actually teach me along the way and it’s amazing how much I have picked up. I also write a weekly round up blog of all the best SEO and Online Marketing posts that I read in the week. So I have picked up a lot from scouring endless techy articles every week. You can see my last round up here: http://www.addictivity.com/about-us/blog/item/addictivity-the-weekly-fix-31-05-2013 Perhaps you might find some of it interesting. Anyway, thank you for writing this and planning more. I think it’s really important to understand all of these things and to get this info from a food bloggers perspective is really valuable. Keep up the great work 🙂 xx
Charles says
Aah – it’s always nice to married to someone in the know… lawyers, doctors, or in your case, web developers! Must be good to have a solution for any problem. Goodness knows I could use it sometime.
Thanks for the link, I’ll be sure to check it out :).
Jean | DelightfulRepast.com says
Charles, am I the only one of your readers not using WordPress?! Anyway … I’ll be reading your posts; I’m sure I’ll pick up some useful tips.
Charles says
Hi Jean, no no, there’s quite a few people who don’t use WordPress, but it’s definitely one of the biggest platforms out there.
Eva Taylor says
Hi Charles, I’m sorry I didn’t see this post! I don’t have time right now to read it all because I’m at work but I wanted to comment that I’m loving that you’ve optimized it for smart phones! So much easier and faster to navigate. Thank you!
Will be back later.
Charles says
Hi Eva, I’m so glad that you were one of the first people to notice! I had the shocking realisation that ~43% of my traffic comes from smartphones and I decided that I really had to cater to these people more. I have a switcher which detects if the user is on mobile or not. If they are then it will switch to a different theme which is dynamic… it will scale up and “grow” depending on the size and orientation of the screen.
The theme is a little annoying to configure so it might look a bit funny until I can get around to really giving it a good do-over but I’m glad it’s working well for you 🙂