About Performant Websites

1. What's the main goal - awareness and conversion

I’m a compulsive ‘checker’ of websites. I have website OCD (self-confession there). If I see a new website launched, I’ll run through my checks on it. My overriding question is… will this website benefit its owner?

On many occasions, I’m left confused… I’m looking at an ‘expensive-looking’ website. And my website checks are throwing blanks; it’s not going to benefit the owner.

This bothers me… many websites cost thousands of pounds to create and maintain. They need to be pulling their weight for you - don’t they?

But what should they be doing for you?

We’re a small business. We don’t have a marketing budget as such. We don’t have a sales team. And you won’t find us at networking events. So how do we survive? Our website - it’s the marketing mothership. It creates awareness of us across the UK and converts visitors into enquiries.

I would say that that is the primary goal of any website. Whether you’re a charity or business. Your website should be creating awareness for you and converting visitors into enquiries.

And that’s what this article is all about… I want you to know my checks. I want you to know the perfect recipe. And I want your website to succeed for you.

2. What's the right website recipe to achieve the goal

So what’s the recipe for the perfect website? Here’s an overview of my perfect recipe:

1. The right message - it conveys the right message about your business. So important! So that a) search engines understand what you do and your expertise. And b) visitors land on your site know what you do. Not only what you do, but how it benefits them.
2. The right design - it allows Google to see your content. It works well on desktop and tablets and even better on mobile. It works well with your message. It’s easy to navigate. It’s easy on the eye - uncluttered. And it’s logical. And it includes those with with a disability.
3. Rich content, logical grouping of content. It demonstrates your knowledge and expertise through rich content. It provides useful content that adds value to your product or service. And it’s grouped together in a logical structure; making it easy for Google to see your expertise too.
4. Quick to load - it must be quick to load. Especially on mobile. And quick to load around the world if you have an international audience.
5. Compliant with the law - in the UK all websites need to have taken reasonable steps to be accessible. At least AA compliant would be a good rule. There’s no excuse for non-compliance.
6. Integrated with social media. Content should be easy to share and focused on growing your networks.
7. Easy to manage - it must be easy to use so that you can add rich content! And keep the content fresh.
8. And it must be secure - so that it doesn’t get hacked.

With the above points. I have cross-cutting themes. These include:

• SEO (search engine optimisation)
• Accessibility
• Usability
• Marketing
• Speed of performance
• Security

3. Right message

You need to be in the right place in Google for your website to create awareness that will lead to conversion. The only way of knowing this is with keyword research. Use a keyword research tool such as Moz to help you rank attractiveness of keywords.

Checkout the competition to ensure that your core message hooks don’t copy theirs.

Develop your message strategy around your keyword research. Use your target keywords in your landing pages with on-page optimisation techniques. Combine with marketing techniques to encourage conversion. E.g. use buying words and have strong calls to action.

Ensure that your message is accessible. Don’t embed messages in images or code them in a way that would confuse a screen reader. Screen readers need to be able to identify important phrases. Google uses the same techniques. So following accessibility guidelines can also help your search engine rankings improve. E.g. links with ‘Explore web development services’ are better than non-specific ‘Read more’ links.

Be lean with your message - use enough to convert but don’t overdo it. For example, will your prospects read your headline on slide 4, 5 or 6 of your carousel. Or will one well-written headline with one image work better?

4. Right design

Aim for a design that satisfies both SEO experts and marketeers. Not an easy task! For example, ensure landing pages have an area that can cope with a large quantity of text. Ensure that styling of the text makes it easy on the eye. Include tools such as Page Content menus. So that visitors can jump to different sections. And intersperse with a video or an image or two.

Make sure that the design includes overviews. The too long / didn’t read approach. Think through what four things do my customers need to know. Ensure the design prioritises the overviews - drawing attention to them.

Accessibility also needs to start with the design. Pay specific attention to fonts. Typography needs to be of suitable size and with enough contrast with the background. Too often I see text overlaid on an image. The image is busy and the text is very hard to read. That’s an accessibility fail.

Designers like to experiment with eye-catching designs. Quite often they want to be different. Or use your website to showcase their design skills. This is all well and good, but you shouldn’t stray too far away from usability rules. You don’t want your visitors to not be able to understand how to navigate your landing page.

Make sure that your web design includes marketing tools that will help conversion. For example, banners, emphasis on headlines. Tools that provide physical evidence of your track record. E.g. testimonials, galleries, FAQs, accreditations etc.

Aim for your design to load fast. Five seconds is the worst acceptable loading time. Be quick! It will help with your search engine rankings. For example, you might want a widget that loads all your Facebook testimonials. Great. No! It will need to connect with the FB servers and your performance will take a hit. It would be better to to use plain text for one, two or three testimonials and then to have a button that links to FB.

The design of your website should also help you grow your social media networks.

5. Rich content, logical grouping of content

You need to show Google that you know your eggs. Google will give priority to websites with rich, relevant and useful content.

Quality text is still king in this SEO world. Create useful, compelling content. Even better create landing pages surrounded with other quality, related content. This then becomes a silo of expertise. This includes further content that showcase your authority and expertise. And could include: case studies, white papers, how to guides, cheat sheets and more.

Again, use page content menus and typography to ensure that content doesn’t overwhelm.

Group content so that it makes it easy for Google to see. This means that your url structure needs to follow a logical pattern. E.g. /web-developer/ leading to a nested page of /web-developer/really-useful-article/. Too often I see content spread all over the place making it a) hard to find and b) for Google to categorise. Often website owners misuse categories and tags in tools such as WordPress. Result disparate content, no logical grouping.

Make sure that your rich content follows accessibility guidelines. From the basics like adding text to alt tags for your images. Through to ensuring that there are transcriptions for videos, i.e. text-based alternatives.

Throughout creating your rich content you must also be wearing your marketing hat. What content can I provide that will speed up conversion. How can I intermingle strong calls to action?

6. Quick to load

Sites must be quick to load. Far too often I see sites taking 10 or more seconds to load. These sites score low marks on speed checkers. Side by side with comparable content… Google is going to give the faster site a better search engine rank.

It’s the job of the designer and developer to work together to ensure that your website is quick to load. Poor design can lead to a slow website. And poor coding will also contribute. Get them both wrong and you’re heading for a slow website.

From a coding persepctive, the goal here is to use the least code to deliver the most effective message.

The main coding offenders for slow websites are as follows:

• Loading too much unused code. This is often the case when a website uses a responsive framework such as Bootstrap. Bootstrap provides web developers with ready-made components. Web developers often include all the Bootstrap CSS. A lot of this code is un-used. It’s completely pointless in downloading it when the website loads.
• Too many https requests. An http request is when the clients browser connects with the server to retrieve an asset. Often caused by plugins using different versions of the same code library. I’m looking at you WordPress. A local WordPress agency has a nice looking website… but it’s slow, about 20 seconds to load on my connection. Their website makes more than 70 requests for Javascript files. It downloads more than a MB of Javascript. They should be aiming for one Javascript file of less than 100kb.
• Not using responsive image techniques such as srcset. I.e. one smaller image for mobile. Instead using one image size fits all devices.
• Complex html structure, often as a result of a page builder
• Not lazy loading images, Lazy loading means that images that are out-of-view are not loaded until needed.

Two other speed killers can be:

• Hosting - hosted on poor quality hosts is going to cause slow loading. Mind you, if your website breaks all the rules above, then a better quality host is not going to solve the problem. We use Netlify’s superfast delivery network which has high performance around the world. We’re also advocates of static site generators. So we enjoy the benefits of a system like WordPress but not the degrade in performance. Read our article on static site generators to find out more.
• The CMS software itself. For example, WordPress is software that on every request has to run a load of jobs. It has to run these tasks before returning the html page for the visitor.

7. Compliant with the law

Accessibility

Site owners must make ‘reasonable adjustments’ to help people with a disability. As stated by the Equality Act 2010. Have there been any legal cases? I don’t know. But there are three good reasons to ensure your site is accessible.

1. To include those with a disability
2. To abide by the Equality Act
3. Accessible sites perform better in search results than non-accessible websites.

The standard that the UK government has adopted is the WCAG level AA standard. It would be wise to follow this standard too.

We have another article on accessibility for websites. But in a nutshell, the following tips will help you reach AA standards.

• Fonts: Ensure that fonts are of a suitable size and have enough contrast with the background.
• Navigable by keyword: Ensure you can navigate your website by only using the keyboard.
• Use Aria and Semantic tags. Your developer needs to ensure that screen readers can identify regions of a page. For example, the main content, a marketing banner, a side bar.
• Have text alternatives. Ensure that you have text alternatives for assets that screen readers can’t handle. For example, a transcription for a video. Or text for an image or a PDF.
• Skip to content. Make it easy for disabled people to skip to the main content of the page

**GDPR (**General Data Protection Regulation)

If your site is collecting personal data then you need to let people know what you’re doing with the data. You do this with your privacy policy. There are plenty of templates online. Or you can ask your legal adviser to write one if your needs are more complex.

If you are collecting data then you must give visitors an option to opt out. You may be collecting data through forms and cookies. So it’s very important to know what your website is collecting.

For example, Google Analytics uses cookies as part of it’s process in collecting data. For websites they the data controller. Even though it’s anonymous you should ensure that users can opt in or opt out of Analytics.

This website allows users to opt out.

8. Integrated with social media

It should be easy for visitors to share content on your targeted social media platforms. Your website should have functionality to allow users to pin, post, tweet etc. your content.

And it should focus on growing your social networks.

At the same time, this functionality should not slow down the performance of your website. For example, you might think it is cool to have a stream of tweets from your Twitter account. But what is the cost to performance from loading and initialising this functionality?

9. Easy to manage

To perform well in the search engines you need to ensure that you have fresh content. Your website should be a joy to edit! There are plenty of content management systems to choose from. We’re a big fan of static site generators and also headless CMSs. This reduces the list, but this is also good as the list can seem endless.

If you like WordPress but want the benefits of a static site generator. See our article on static site generators. Then we recommend the following:

• CloudCannon - excellent UI. Hosting included on superfast content delivery network. Cloud-based so no updates.
• Forestry - an untested option by us, but with great reviews. Cloud-based so no updates needed. Can deploy content to the Netlify content delivery network. Super-charged! Will be testing this soon.
• NetlifyCMS - Not such a beautiful interface (think rally car) but does the job well. And hooks into the Netlify CDN with ease.

10. Secure

You want to have peace of mind that your website is not hackable. If you read our article on static site generators then you’ll know why SSGs are a good secure option.

To ensure that your site is secure you always need to keep your systems up-to-date. WordPress is often releasing security patches. This can have knock-on effects. New versions may not be compatible with plugins etc. that you are using.

The content management systems that we recommend are cloud-based. They’re affordable and they look after the maintenance of the system, so that you don’t have to. This gives you peace of mind.

11. Conclusion

Websites can cost very little these days, but they often don’t include all you need to perform well. Sadly, all websites are not created equal. Even if they appear so at first glance. If you want to succeed with your website then stick to the guidance above and you won’t go too far wrong.