Free tools to improve your website

In an ideal world we would have teams of specialists looking over our websites and telling us everything that is wrong and helping to prioritise and fix those issues. Failing that we would have the budget to go and hire external experts to do the same. In the real world we have no or next to no budget, but we want to try and improve our websites as best we can.

Luckily, there are quite a few completely free tools you can use to help point your website in the right direction. I’m going to go through some of them today. I will be keeping this post up to date as I find new or better tools, so you might want to bookmark this one.

I’m not suggesting that these tools take the place of engaging with experts and conducting proper reviews, nor do I think that these tools always highlight the best things to be working on. I do, however, think that if you have nothing to go on, then these tools will help give you something to move forward.

If you’re in a rush, or have been here before, you can go straight to the tools. You can also skip to the main sections, checking your website is valid, accessible, fast, and secure.

General advice for using these tools

Before I start sharing the tools I want to share some general advice for all of these tools.

Test multiple pages

Several of the tools I’ve written about will scan the page you share and deliver results for that singular page. A lot of people will pick the homepage. The homepage is of course an important page on a website, but it often isn’t the most trafficked nor representative of content pages or other types of pages within the site.

Before testing, I would suggest selecting three or four pages that are representative of a range of content that appears on your site.

Don’t worry about fixing everything

You are going to see lots of red when you run your website through these tools and lots of scary looking errors.

You don’t have to get perfect scores in all of these things. The important thing is to go in the right direction. That might mean fixing one small issue.

The reports aren’t perfect

As I mentioned at the start of the article, these don’t take the place of expert advice. Anything shared here I am happy to stand behind as a good tool that hasn’t lead us wrong in the past, but if your accessibility expert is saying X and a free tool is saying Y, go with X.

Consider doing this often

Looking at the results of these tools and actioning even one thing is great, but in an ideal world you would run things like this fairly often, to keep on top of issues as they arise. The tools themselves are always improving and showing you new and better information as well.

This will help you build up a picture of if your website is generally getting better or worse over time, for these specific metrics.

Why care about automated reports?

A website that scores higher on one report versus another website doesn’t mean the website is better. You could score really well on a page speed test by having a completely empty page!

The reason I like this reports, is that they act as a proxy for something that is very important. The person who is using your website.

Making sure your website is valid, accessible, performant, and secure is going to make people’s lives easier and better. As I’ve mentioned a few times now, this doesn’t take away from using experts and doing proper testing, but anything we can do to make someone’s life easier we should.

Checking your website is valid

Websites are made up of HTML and CSS. HTML structures the content of the page and CSS styles it.

If either aren’t written correctly, web browsers will guess at what you want and do the best possible thing; however because each web browser decides what is best, you can end up with your site looking nice on Google Chrome, but horrible on Microsoft Edge.

There are five tools I would recommend you use to check your website is valid. Two to check the HTML and CSS, and three that check some supplementary technology

HTML Validator

Enter the URL of a page into the HTML validator and get a report back on what HTML isn’t written or placed correctly on your web page.

Addressing invalid HTML is never a bad thing to do. You will improve not just how web browsers can view your website, but also assistive technologies such as screen readers will have a better time, as will search engines.

CSS Validator

Like the HTML validator, the CSS validator will look through any CSS linked or added on your page and report back.

Most web browsers will ignore CSS they can’t understand, which at the very least means you’re making your website too large by sending web browsers things they don’t know what to do with. Sometimes they will guess at what you mean, which can lead to layouts looking different on different browsers.

Fixing issues here will hopefully make your website smaller and work better for the people using it.

Schema Validator

Schema is a way to add more meaning to a web page. For example if you are selling a product you might have all of the pricing and information as text on the screen.

The sentence “This red hat costs £5” might make sense to a human, but if you want a search engine to point people towards your page when they want to buy red hats for under £10, you need to let computers know that the product is a “red hat” and the price is “£5”.

That is where Schema comes in.

Enter the URL of a page into the Schema validator and get a report back on what Schema isn’t written correctly on your web page. It doesn’t tell you what you should be adding.

If you don’t have any Schema on your web pages and you think you would benefit from some, I’ve written up a pragmatic approach to adding Schema.

Rich Results Testing Tool

There is a second tool which can do a very similar job to the Schema Validator above, made by Google. The rich results testing tool does the same thing, however Google sometimes cares about things that Schema.org doesn’t really care about.

Having your schema be valid in Google’s eyes is an excellent way to ensure you have the highest change of ranking highly.

RSS Validator

If your website has a list of articles, such as a blog, then there is a good chance it has an RSS feed. RSS feeds allow someone to subscribe to updates from your website which they will receive in their RSS viewer of choice.

Just like HTML, RSS can be validated to make sure it has been written correctly.

Add your URL to the RSS Validator and it will let you know if your RSS feeds are valid.

Checking your website is accessible

With the first set of tools, there is a very easy set of tests that can be performed to say if a page has valid code or not. Accessibility is much more subjective and really needs humans to test.

If you can muster up some budget for any of these activities, accessibility would be the one I’d suggest you do.

Unfortunately many companies don’t put much stock in accessibility, this has always been odd to me, ethics aside, making your website usable by more people means more readers, more buyers, more, well, everything! If you need to “sell” accessibility, just let people know that accessibility and SEO are tightly linked.

Here are the tools I use when doing quick tests myself. Two of them are websites you can run a report with, and one is using the tools that come with your web browser.

Wave

Enter your URL into the Web Accessibility Evaluation Tool and it will show a visual report of the page you submitted along with some of the issues and things it has spotted.

Lighthouse

If you use Google Chrome or Firefox, you can search for an extension called Google Lighthouse, when you run it on a page it will generate a report which shows many things, including accessibility issues. I will be talking about the web version of this report (without needing a plugin) in the next section about checking if your website is fast.

Browser Tools

I also use the inbuilt tools given to me by web browsers. This is a little bit harder to do if you aren’t used to doing things like viewing the code that makes up a web page.

If the thought of looking at code scares you, skip this.

In Firefox you can view an accessibility report once you’ve enabled it. At its most basic it will provide a list of issues it has spotted.

Checking your website is fast

There are lots of reasons you want your website to be fast. I like the ethical reasons, because slower websites cost people more to download and consume more battery to run. You might prefer the fact that faster websites convert more people.

Regardless of your reasoning, faster websites are better websites.

There are two tools I generally use for this.

PageSpeed Insights

Put the URL of the page you want to test into Google’s PageSpeed Insights and it will generate a report detailing several things, but the main thing is the page speed.

The language used can be quite confusing, but the general rule is you want to see green, not orange or red.

The interesting thing about this report is Google have always said that page speed is a factor in how they rank websites on Google results. This report gives you some insight into what they consider fast.

Web Page Test

There are a few more options with Web Page Test than some of the other tools, I would recommend selecting a mobile device and also asking for their Carbon Control Report.

Once the tests have completed, you can navigate between an overview, and some more detailed reporting. I would suggest looking into the “Opportunities & Experiments” section and the “Carbon Control” section. Some of the other reports are excellent for the tech team to get stuck into, but are a little low-level for general reporting.

Experte

If you aren’t sure which page to focus on when reviewing page speed, a tool like Experte’s PageSpeed can help. Give it a starting URL and it will run Google’s PageSpeed tool on the page, as well as follow internal links and perform the same check again.

You can export the results into a spreadsheet, which you can sort to find the problem pages to help focus on.

Checking your website is secure

A lot of web security is making sure that you are slightly more secure than the website beside you. Most people trying to break your website look for low-hanging fruit, doing the basics right will go a long way.

I’ve found three tools to be excellent at this.

Moz Observatory

Moz observatory takes the domain name of your website (so, not an individual page) and generates a report on how well your website certificates and security settings are configured.

There is a lot of technical language used in this report, but luckily they back it up with a grade and a list of pass/fail. My suggestion would be to pass the results of this report onto the technical folk on your team for further analysis.

Security Headers

Adding a URL to Security Headers will generate a report similar to Moz Observatory but with specific guidance on the security headers you are using.

You can think of security headers as extra bits of information your web server gives to anything connecting to it to say “this website allows this to happen, but not that”. A common example is you can tell the world that your web page isn’t allowed to be added into someone else’s website in a frame. This would stop someone from easily pretending to be your website.

HSTS Preload

Google Chrome has a list of websites that it considers safe to always enforce HTTPS (note the S). This speeds up access to the website because it doesn’t need to go back and forward understanding if HTTPS is available or if it should use HTTP.

Being on this list is useful if you always plan to only support HTTPS, however the main benefit is putting your domain into the HSTS preload checker and seeing if it reports any reasons why you couldn’t be on the list.

Email Security

The National Cyber Security Center has a tool for checking the security of your email setup. Enter your domain name and it will make suggestions of what you can do, mainly at the DNS level to stop people abusing your email address and trying to send emails as you. It can also show you how to send an email to its service for more advanced reporting.

When using this tool, I found the free tools available at DMARCian to be great for suggesting and testing the specific recommendations made by the NCSC’s tool.

Complete list of free tools

Here is a link for each of the tools I’ve mentioned in this article;

• https://validator.w3.org/
• https://jigsaw.w3.org/css-validator/
• https://validator.schema.org/
• https://search.google.com/test/rich-results
• https://validator.w3.org/feed/
• https://wave.webaim.org/
• https://pagespeed.web.dev/
• https://www.webpagetest.org/
• https://www.experte.com/pagespeed
• https://observatory.mozilla.org/
• https://securityheaders.com/
• https://hstspreload.org/
• https://emailsecuritycheck.service.ncsc.gov.uk/check

And here is the link for the slightly more advanced tools than “put in a URL and hit go”

• https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/
• https://dmarcian.com/dmarc-tools/

Still need help?

I appreciate a lot of the output of these reports can be confusing. They are often confusing to web developers!

If you’ve looked at some of these reports and you want some extra guidance on the best next steps, we’d be happy to help.