Optimising the things I couldn’t see on my website

  • 📖 ~4 mins to read

You’re going through a website redesign and you’ve managed to land a design that doesn’t only look great but also works towards growing your business — now it’s time to build it.

Instead of just focusing on what the website looks like, consider what might be happening behind the scenes that can have an impact on your business.

Here are a handful of things you’ll want to consider during your next website redesign:

  • Performance: is your website fast? does it load quickly on slow connections too? performance can have a big impact on a business’s bottom line, the overall user experience and how well your website performs in search results
  • Accessibility: is it easy to read the text on your website? can you tab through the website using your keyboard and not lose track of where you are? having an accessible website makes good business sense, it helps to broaden your audience and give you a competitive edge
  • SEO (Search Engine Optimization): is your website showing up in search results for terms that your audience might be searching for? do these search results return any rich snippets and can your website make use of structured data to compete with them?

When it comes to things like performance and accessibility, it’s important to remember that although you might have a fast internet connection and you don’t have any disabilities — it might not be the same case for your audience.

If you prepare for the worst-case scenario, you’ll create a better experience for all

Share this on Twitter

Having just launched my new website, I’m going to briefly touch on how I optimised my website for the points above and what tools you can use to help audit your own website.

Never miss out on new articles

Get new articles straight to your inbox. Your information won’t be used for anything besides sharing updates with you.

Optimising my new website for performance

There are several reasons to focus on performance, ranging from better SEO, lower bounce rates and improved user experience — all of which results in more leads and revenue.

Slow websites lead to higher bounce rates, poorer search result rankings and worse user experiences – all of which results in fewer leads and lost revenue

Share this on Twitter

Choosing a technical stack

Going into development, I followed the JAMstack approach — a new way of building websites and apps that focuses on performance.

In short, it does away with the database and leverages third-party services to create fast websites/apps with higher security and a lower cost to scale — great for a business of any size.

JAMstack websites/apps yield better performance, improved security and are cheaper and easier to scale

Share this on Twitter

With a methodology to hand, I opted to use GatsbyJS to build my website. It’s touted as fast in every way that matters and is geared towards building really fast websites and apps.

GatsbyJS is a free and open source framework based on React that helps developers build blazing fast websites and apps

How you can analyze the performance of your own website

Whilst there are a lot of ways in which a website can be optimised for performance, tools such as Google Page Speed provide a quick and easy way for less technical people to audit the performance of their website.

It provides ranges and colour codes that show how well your website has been optimised. I wouldn’t obsess over getting 100/100 but you want to be in the 90-100 range for best results.

Google page speed performance results for robsimpson.digital

Broadening my audience by creating an inclusive experience

People often think that making an accessible website isn’t worth the time and effort as they believe that their audience doesn’t have any disabilities. However, the reality is far different.

In 2016 roughly 1 in 5 people reported suffering from some form of disability in the UK

Share this on Twitter

Disabilities come in many different forms and can range from permanent disabilities to temporary and situational. Take for example:

  • an amputee with one arm
  • a man with a broken arm
  • a mother holding her child with one arm

I myself am colour blind (kind of ironic, a designer who is colour blind), I suffer from a mild form of red-green colour blindness which affects around 6% of the male population.

How you can analyze the accessibility of your own website

Whilst tools can’t test everything when it comes to accessibility, they can definitely provide insights into some quick wins.

My favourite tool for content editors is tota11y — a browser extension that can be used to get an overview of heading structure, link text, image alt text etc.

Tota11y heading structure accessibility testing on robsimpson.digital

Implementing structured data to power rich snippets in search results

Structured data is a way to pass information to search engines which is then used to power rich snippets in search results. Here are just a few examples of the type of content you might want to mark up with structured data:

In Neil Patel’s article; How Google’s new layout predicts the future of SEO it shows the importance that Google has started placing on rich snippets and structured data.

How you can test structured data on your own website

If the content on your website falls into categories such as:

  • Articles
  • Events
  • Jobs
  • Products

You can paste the URL of one of your pages into Google’s structured data testing tool which will then let you know if you have structured data setup and if it’s valid or not.

Google structured data testing tool results for blog articles on robsimpson.digital

The result

All of these things combined have created a really solid foundation for me to build on — it’s been purposely built for great performance, accessibility and SEO.

Google Lighthouse performance, accessibility, best practice, SEO and progressive web app results for robsimpson.digital

If you already have a website and it doesn’t quite meet the mark, you’ll probably find more value in getting these fixed by your agency or developer instead of implementing new features like a carousel.

Websites are just like cars, it’s more important to get your brake disks replaced than buy some new alloys

Share this on Twitter

It’s important to remember that all of these things are ongoing endeavours. Even if your website was developed for great performance, accessibility and SEO — this can all be undone over time if it’s not considered as more content is added.

Rob Simpson

UI/UX Designer & Front-End Developer bridging the gap between user goals and business needs