In my daily life as an SEO and website content marketing coach, I see three common issues with websites: the first is speed, the second is keywords, and the third is links.
Today, we’ll look at the first issue. You might wonder why website speed matters to your business website?
In short, as users, we want every website to load fast. We’re easily bored and don’t want to wait around. So your website needs to load quickly.
So, why website speed matters?
Website speed matters a great deal. If you think about speed in terms of website usability, it should concern you if your website is 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 up to 20% of your conversions.
If we consider the SEO impact, if a potential customer bounces back to Google, the search engine will likely re-evaluate your position downwards within the results.
Thankfully, the reverse is true as well. If you have a website that loads fast and has great content and link profile, you’re likely to see a boost in rankings.
A recent consultancy client of mine was ranking at position 4 for a business-critical keyword. However, analyzing 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 a 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 improving your website’s speed
As you know understand why website speed matters. How do we find out whether we’re winning with speed?
First, we need to measure current performance.
Note: To help you, each step is rated easy, medium, and expert. So, if you’re not techy start with the easy steps. 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 scanning your website, the tool will give you a score for mobile and desktop as well as actionable steps to improve your website’s speed.
If you’re using Website Auditor, you have access to Google Page Insights as it’s built into the tool, allowing you to quickly analyze your website’s speed.
The more issues you have, the lower the score.
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!
If you’re not put off by Page Insights, GTmetrix adds another level of data. This time you can see more results and see data like actual page loading speed, size, and more.
I use Google Page Insights first to see the big picture. 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!
Medium: HTML Code
The third element I check is the page’s HTML code, which is simple to do. Below are the keyboard commands for viewing your webpage source code for both PC and Mac.
- Firefox: CTRL + U (Meaning press the CTRL key on your keyboard and hold it down. While holding down the CTRL key, press the “u” key.) Alternatively, you can go to the “Firefox” menu and then click on “Web Developer,” and then “Page Source.”
- Edge/Internet Explorer: CTRL + U. Or right click and select “View Source.”
- Chrome: CTRL + U. Or you can click on the weird-looking key with three horizontal lines in the upper right hand corner. Then click on “Tools” and select “View Source.”
- Opera: CTRL + U. You also can right click on the webpage and select “View Page Source.”
- Safari: The keyboard shortcut is Option+Command+U. You also can right-click on the webpage and select “Show Page Source.”
- Firefox: You can right-click and select “Page Source” or you can navigate to your “Tools” menu, select “Web Developer,” and click on “Page Source.” The keyboard shortcut is Command + U.
- Chrome: Navigate to “View,” click on “Developer,” and then “View Source.” You also can right-click and select “View Page Source.” The keyboard shortcut is Option+Command+U.
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?
As our website was coded in-house, it looks tidy. However, here’s a random website, with messy code:
While it looks fine, zoom in and you’ll see elements within elements and styling are written inline. Remember, the more lines, the bigger the file size and the slower the page will load.
Easy speed 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!) rather than optimizing your CMS or server performance (which could be a smaller win).
If you’re hosting your website on a shared cheap hosting package, you probably have some speed issues from the start. It’s 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. It will tell you the current server response time. If this is over 2 seconds, you have a massive problem. You’re likely losing sales due to a slow website speed.
In my experience, one of the quickest wins is image sizes. If the space is small but you’re loading a massive image, 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 showing you how to use both of these programs.
Make sure you export images as .jpg unless it’s a tiny image then .png is fine. Remember .jpg files will always be smaller in size over .bmp or .png files.
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 6MB image into one under 100kb!
If you’re using WordPress, 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 consider combining them into an icon sprite.
This small change could help knock off a few hundred milliseconds!
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, 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!)
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, you’ll need to copy and paste all your files 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.
If you don’t know what you’re doing with HTML code and .htaccess files, 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.
A Content Delivery Network (CDN) is our secret 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 seeing a local version that’s hosted in Australia. This means your website loads quickly and you can convert more traffic into customers.
Expert: .htaccess file
Editing this file can cause website outage, so please take care.
If you have a lot of resources to call to load your page, 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.
Another useful bit of code is expires caching. Again you can copy and paste this into your .htaccess file.
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 onto 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 plug-in.
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 analyze any improvements or you could leave it to the end. If you haven’t, 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! You should always remember why website speed matters, both to you and your website’s visitors.
Struggling to drive sales from your website?
Our 1-to-1 SEO website content marketing coaching service is designed for you. Book Free call