Website Speed Optimization

Could your website’s performance be affecting its Search Ranking?

So, you’ve spend hours and hours writing wonderful, compelling content. You’ve paid a designer a bucket load of bucks to make your website look good enough to EAT. You’ve worked on your social media so much that you’re the most popular guy / girl in the (virtual) room. Visitors just can’t wait to click on your site and when they do!…..

….

……

optimize website speed

Dinosaur of Death

It takes 10 seconds to load the page, and half way before that’s done, they’ve already left and gone some where else. :(

Yep, you forgot to optimize your website’s speed.

Website speed optimization is an important consideration for anyone running their own website or blog. It affects both user experience and search engine rankings.

The attention span of the average internet user is pretty short. I for one am very impatient when I’m faced with slow loading webpages, or webpages which do things that annoy me. Auto play any music or video and that’s usually a sure way to get me to click the X!

The thing is, there’s so much information available, from so many different sources.  It’s always easy for people to get it somewhere else – so why should they be patient?

Website speed optimization also affects search ranking. When Google returns a page of search results, it wants the user experience of those results to be good. If Google returned nothing but slow, broken websites then we wouldn’t keep using it for very long!

Checklist for speed optimization tasks

Here’s a list of things you should consider for optimizing the speed of your website or blog. Don’t worry if these seem complicated for now – later I’ll introduce tools and processes for making this very easy.

Minify

Minfying allows you to combine the contents of multiple Javascript and CSS files into one. It removes un-necessary whitespace in the code itself, optimizing it, and results in fewer HTTP requests as it combines multiple files into one. Awesome!

You really don’t need to understand exactly how it works, because there are tools, which we’ll cover later, to do the work for you. But if you’re interested you can read more about it here

Optimize Images

You can save valuable bytes by correctly cropping and compressing image files. I try and limit the files which I use in my posts to around 30-40Kb, and use a plugin which further optimizes the images once they’re uploaded. More information on the tools further on.

optimize images

Go to WP Dashboard > Media > Library to view image size

Reduce the number of requests

Each ‘object’ on your page, whether it be a javascript file, an image, or something else, requires a separate HTTP request for the browser. Although there are ways the browser optimizes this process with things like pipelining (beyond the scope of this article), you want to reduce the number of requests as much as you can. You especially want to have as few ‘above the fold’ requests as you can. Above the fold just means the top section of your site which gives the most impact to your readers.

Minifying your content helps with this, but you can also look into how your plugins are behaving, and how your theme is behaving if you use WordPress. The GTmetrix tool covered later gives great insight to this.

Reduce DNS lookups

Every time your page references an object that’s not hosted on your domain, the browser has to do an additional DNS lookup for this new domain before it can ask for the object. For example, if you reference an Aweber javascript file, the browser first has to look up aweber.com to get its IP address before it can make an HTTP request for the file. Each DNS lookup (and so each additional domain referenced) induces a delay.

Using a Content Delivery Network (CDN)

A Content Delivery Network is a group of servers distributed around the world. When you sign up for a web hosting provider, like Bluehost, the actual server which hosts your content is restricted to one geographic location. The problem with this is, visitors who are visiting your website and live a long way from the location of your web hosts servers will have a higher latency than those who live closer.

Content delivery networks have servers (or ‘edges’) located at different locations around the world. Each of these edges holds a copy of your content, and when a visitor makes a request from your website, the content is served from the closest location.

Using a CDN means that the content is served from the point closest to the visitor, therefore reducing latency.

Amazon Cloudfront is a good choice, and their rates are very reasonable, scaling up with the success of your website.

Speed optimization tools and plugins

Google Page Speed Insights

The Google Page Speed Insight tool provides great, simple advice for getting website speed optimization basics right. Just plug in your website URL, click ‘analyze’ and in a few seconds you’ll be shown results. Anything in red you should looking at addressing as a priority as it’s having a significant effect on your site performance.

google insights page speed

Google Page Insights for Blogshape.com

Don’t worry if you’re not hitting 100%, as you can see from the image below even google.com doesn’t get 100%!

google insights

Even Google isn’t perfect!

You should be aiming to get your results over 80% though, and with a bit of work, this shouldn’t be much of a problem if you use the tools and plugins I recommend later on in the article.

Ironically I noticed that a couple of the websites hosting articles about optimizing wordpress speed using plugins aren’t doing so well themselves!

optimize website speed

Plugging the top two results in to PageSpeed Insights gives us:

comluv speed insights

51/100 clearly needs some work.

 

sparringmind speed insights

This one is a little better, but there’s still room for improvement

 

So, even successful sites have room for improvement. That’s why there’s always room for new sites to come along and do it better than the other guys.

GTmetrix

After you’ve done the necessary changes with Google Insights, you can go a bit deeper with GTmetrix. They offer a free scan which gives you so much valuable information that I can’t believe they do it for free!

The information they return is more extensive than Google insights and they give you two ratings, page speed and ‘yslow’ which use two different sets of rules to measure your website speed optimization performance.

gtmetrix blogshape performance results

GTmetrix offers more detailed insights

Another great feature the GTmetrix provide is the ‘timeline’ which shows you which objects are causing a delay in loading your page. This ties in with what I mentioned earlier with having objects hosted on different domains, as you may have with plugins and externally hosted javascripts etc.

A great example of this is shown below, where a 20B (tiny!) .css file is causing a HUGE delay in the page load time. You can identify which object is causing the issue and do something about it.

using gtmetrix to optimize website speed

Catch slow loading objects

W3 Total Cache WordPress plugin

This plugin is simply awesome. It allows you to configure minify, page caching, object caching, browser caching, CDN and more (although those are the basics which I’d enable by default – with CDN optional).

One caveat is to make sure your site is backed up and restore-able before you play around with this plugin – I’ve never had any problems using it myself but I did notice a small number of negative reviews from people who complained it caused issues with their website.

I’ll cover how to set up W3 Total Cache with a CDN in a separate article. Adding the plugin and enabling the basic features like caching is fairly easy though.

EWWW Image Optimizer WordPress Plugin

Another great plugin – this automatically optimizes new images as you add them, and provides a one-click function of optimizing all existing images. A must have.

More tips. Yes, more! We sure do look after you around here!

Put your scripts in the footer of the page where possible. If scripts are at the top of the page, they can prevent the rest of the page loading until they load themselves, causing a bad experience for your impatient user.

One of the many things I love about using Genesis, is that it makes things like this very easy, giving you a simple interface to add your scripts in to the header or footer. If you’re not using Genesis yet, THEN I DON’T KNOW WHY NOT! Go pick it up now :-)

using genesis to help optimize website speed

Adding Scripts in Genesis is easy

Be careful with your plugins. You might be surprised at how a seemingly simple plugin can require as much data to be downloaded as the rest of your homepage! I found the Social Media follow plugin I was using was pulling down almost 500Kb of data. I got rid of it and more than halved the size of my page. Plugins can also require requests to other domains, which means it’s another DNS lookup. You want as few of these as possible.

Some tools give you the option to use a javascript, or inline HTTP code. Aweber for example provides either as an option. If you use the code instead of the js, then you save on one more request.

We’ll be covering how to set up Amazon Cloudfront CDN with W3 Pagespeed on WordPress in a few days. If you want access to this content then sign up for email updates and you’ll get a notification in your inbox. How cool is that?




email sign up

Your competitors have joined, have you? We DO NOT spam.
Name: Email:

Using Social Networking to Generate Web Traffic

How do you tell that a website is successful? It is not entirely by what it sells, not only by how well it has been represented graphically, not just how user friendly it is, no. Albeit these are invaluable tips, they are not entirely what every website owner is targeting. Instead, how big the traffic […]

Continue reading...

How To Build / Create a Website

build create a website with Wordpress

Learning How To to Build / Create a Website is EASY! If you’ve been thinking about building / creating a website, you couldn’t be doing it at a better time. There are so many tools and communities out there to help you get things the way you want them that anybody could do it! This […]

Continue reading...

How To Use Social Networking to Promote Your Website

Use games to promote social networking

Social Networking can Supercharge Your Website Social media is getting more popular with each passing day. In fact, business organisations have been active on social networking websites for a long time to promote their websites. These days, you’ll notice Google +1s, Facebook likes and Twitter re-tweets everywhere on the internet. These three have been the […]

Continue reading...

Hootsuite Review – First Impressions

Hootsuite Logo

I must admit I was a little dubious about Hootsuite, but I’d felt some buzz around it on Social Media sites and decided to give it a shot. So far I’ve been using the free account and will document my experience as I go including after I make the transition to a pro account. What […]

Continue reading...