AJS Digital Group blog

Does Website Speed Matter?

In my daily life as a digital marketer, I see three common issues with websites: the first is keywords, second is links and the third is speed. While I’ll get to issues 1 and 2 in future posts, today, we’re going to look at the third.

 

 

So, Does website speed matter?

In a word, yes. It website speed matters a great deal. If you think about speed in terms of website usability, then it should concern you if your website if slow. Simply put, the longer your website takes to load, the fewer customers you’ll have. According to Google, a 1 second delay on mobile can impact upto 20% of your conversions.

 

If we consider the SEO impact then if a potential customer bounces back to Google then the search engine is likely to re-evaluate your position down within the results.

 

Thankfully, the reverse is true as well. If you have a website which loads fast and has great content and link profile, then you’re likely to see a boost in rankings.

 

A company I recently did some work for was ranking at position 4 for a business critical keyword. However, analysing their website using Google page speed insight, revealed that they had a really slow, bloated website. Diving into the HTML code showed even more issues. But that’s jumping ahead.

 

With this business, if they moved one position (from 4 to 3), their traffic for this keyword would jump by massive 50%! I believed we could achieve this improvement (and a respectable boost across all their ranking) by simply sorting out their issues with their website’s speed.

 

 

Where to start

So, how do we actually find out whether we’re winning with speed?

 

First, we need to measure current preformance.

 

Note: To help you, each step is rated easy, medium and expert. So, if you’re not techy start with the easy steps. Then either block out an afternoon to try the more advanced steps or employ a professional to help you.

 

Easy: Google Page Insights

I like how simple the Google Page Insights (free) tool is. Start by putting your URL into the search bar. After scaning your website, the tool will then give you a score for mobile and desktop as well as actionable steps to improve your website’s speed.  The more issues you have, the lower the score.

 

google page insights

 

Using our website as a starting point, you can see we’re scoring 92 out of 100. That’s amazing! Yes, we practice what we preach!

 

Medium: GTmetrix

If you’re not put off by Page Insights then GTmetrix adds another level of data. This time you can see more results and see data like actual page loading speed, size and more.

 

Personally, I use Google Page Insights first to see the big picture. Then as I tick the big things off the list, I move over to GTmetrix to help me refine my process and spot quick wins. Again looking at this website, we’re doing great!

 

GTmetrix

 

Medium: HTML Code

The third element I check is the page’s HTML code. There’s a really simple to do this. Right-click with your mouse anywhere in the page, then find and click where it says “View Code”. Or if you’re using Firefox you can always enter into the URL bar “view-source:URL

 

At this point don’t concern yourself with trying to understand the HTML code. Instead look at the code as a whole. Are there lines and lines of code? Or is it just a few? Does it look well formatted or not?

 

html code

 

As our website was coded in house, it’s look neat and tidy. However, here’s a random website, with messy code:

 

messy html code

 

While it look fine, zoom in and you’ll see elements within elements and styling written inline. Remember, the more lines, the bigger the file size and the slower the page will load.

 

 

Easy wins

I’m going to assume to make it easier for us, that your code is a mess, and you scored low on Google Page Insights. So what are a few easy wins?

 

Start by working backwards. It’s easier to sort out your images (could be a massive win!) over optimizing your CMS or server preformace (which could be a smaller win).

 

Easy: Hosting

If you’re hosting your website on a shared cheap hosting then you probably have some speed issues from the start. It worth paying a little more for hosting and a good package should cost around £7 per month.

 

If you’re unsure how your hosting is performing, use GTmetrix as this will tell you the current server response time. If this is over 2 seconds then you have a massive problem and it’s likely your losing business because of it.

 

Medium: Images

In my experience, one of the quickest wins is image sizes. If the space is small but you’re loading a massive image, then your server is working overtime. And this is likely to slow your website down.

 

Start by using either GIMP (free) or Photoshop (Paid) to resize and crop images to the right size. If you’re stuck, there are tons of videos on Youtube how to use both of these programmes. Make sure you export images as jpg unless it’s a tiny image then png is fine. Remember jpgs will always be smaller in size over bmp or png files.

 

You can also use an online image compressor such as Compressor.io and Compress PNG. Try to reduce all of your images under 100kb in size. Start by exporting images at 75% – you won’t be able to notice a difference but the file size will be smaller.

 

Pro Tip: Watch the input size. Simply put, there’s no way you’ll be able to resize and compress a 600kb image into one under 100kb!

 

For the technical, if your using WordPress, then you can set the CMS to resize and load the correct size for each space. Also, if you’re using a few small images or icons then consider combining them into an icon sprite. This small change could help knock off a few hundred milliseconds!

 

Medium: CSS/JS

Going back to the page you’re trying to optimize. Search the HTML (control F) for “.CSS” and “.JS” files. Ideally, you’d have one of each file. However, if you’re using WordPress then you’ll probably have a few of each.

 

Our goal is to reduce the number of JS and CSS files down to one or two of each. (If you have a look at our source code, you’ll see we have one of each!)

 

If you’re using WordPress then you can install a cache plugin like W3 Super Cashe or Autoptimize (which we use). Either will combine multiple files into one master file.

 

Magento, for example, has a built-in combiner under the advanced options. So, you’ll need to ensure that box is ticked.

 

If you’re working with a custom HTML coded website then you’ll need to copy and paste into one CSS file and one JS file. Having externally hosted JS files might be easier to work with when developing. However, you should consider adding these files to your master files as this will reduce the amount of work you serve has to do.

 

 

Advanced wins

If you don’t know what you’re doing with HTML code and .htaccess files then you’ll need to study the topic or hire someone else. Consider yourself warned!

 

Easy: Check compression

Start by either checking you have the below copied into your .htaccess file or use this free HTTP Compression Test which will do it for you in a second.

 

Meduim: CDN

A Content Delivery Network (CDN) is our serect weapon! Using a CDN means your website is copied onto servers all over the world. So when a customer in Australia browsers your website, they’re looking a local version which is hosted in Australia. This means your website loads quickly and you can convert more traffic into customers. Popular CDN include Amazon CloudFront, CloudFlare and Akamai

 

Expert: .htaccess file

Editing this file can cause website outage, so please take care.

 

If you have a lot of resources to call in order to load your page then you’ll want to try and cache them so that they can be easily recalled.

 

Firstly, GZIP compresses files and therefore speeds up your HTML code. This should be copied and pasted into your .htaccess file.

 

## GZIP ##
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

 

Another useful bit of code is expires caching. Again you can copy and paste this into your .htaccess file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

 

Expert: Html

This could open a can of worms. So, you want to get someone who knows what they’re doing. If you do decide to have a go, make sure you save your website in a folder offline and either edit on your browser or copy your website on to a subdomain. Doing either of these will ensure you don’t cause replaceable damage to your website.

 

Depending on your website you will want to aim to get your page size down to a few kb without images and under 500kb with. Again if you’re using WordPress you can minify your HTML with a cache plugin. This will reduce your page size further, but you should try and edit your HTML first.

 

Finally, run a speed test

There are two ways to do this, you can run a page speed test at each step to analyse any improvements or you could leave it to the end. It’s worth if it’s your first time to test as you go and keep a note of what you’ve done.

 

So now that your page loads in under 2 seconds, it’s time for a cup of tea!

AJS Digital Group - Digital Marketing, Done Right.

Book your free phone consultation today.