Jasmine Web Starter

Have you ever Lighthouse tested a website? Hopefully if you've read our previous Sprout of Wisdom Use lighthouse to performance and Accessibility test it inspired you to go ahead and test your own, and with any luck you received an audit result like us, of 4 green circles with scores between 90 - 100!

If you did then that's great news, you and/or your web designer must have put a great deal of thought and work into creating a site, with both good performance and accessibility.

Though if your audit results show areas of amber or red, you maybe now wondering what does that mean and what can I do about it. Unfortunately there are too many potential issues that can be found by a Lighthouse audit for us to cover in this article, so we are going to take you through some of the more commonly found ones.

The Results

As you can see from the results, this website (Which must not be named) has a rather mixed bag of results which can be quite common. With it's lowest scoring areas being Performance, Accessibility and SEO. Though such a low performance result isn't so common, well not in our experience anyway!

The details of each audited section will be listed beneath it with the red warning issues first, followed by amber warnings. The details of each warnings can be seen by clicking on the down arrow ∨ to expand it. If you also want to see where you passed in each of these sections click on Show to expand the Passed Audits.

Performance

The typical issues we've come across that can bring a sites Performance results down are:

• Poorly sized images
• Not utilizing modern image formats
• Not having explicit widths and heights on images

Especially with a image heavy website, having large, poorly sized, non optimized image files can drastically effect it's performance, though you don't have to have many images on a page for it to have a negative effect either. Read more in our Image sizing & optimising Sprout of Wisdom.

Adding explicit widths and heights on images within the HTML page tells the browser to keep this space available for the image before it loads. This helps reduce any content shift as a page loads.

Accessibility

Most common Accessibility issues we find are:

• Insufficient contrast ratio
• Images not having alt tags
• Headings not in descending order

If you have read our Accessibility Sprout you'll already be aware that 1 in 5 people in the UK alone, that's a whopping 14.6 million people are reported to have a disability in a 2020 to 2021 Gov.uk survey. So it kind of makes you wonder how many users worldwide are you excluding if you don't consider accessibility and overlook these most common mistakes.

Contrast Ratio is when a websites foreground and background colour doesn't have enough contrast between them to be seen by many users. It's unfortunately an issue that many fall foul of, I know we have in the past. It can also be a contentious subject for some business owners/designers when they have a very clear view of how they want a website to look! But in reality, would it be a total design disaster if your text or the background of a button was a little darker or lighter? Especially if it opened up your website to a whole lot more users.

Image alt tags are the descriptive alternative text you see when a image for some reason has failed to load, but this is not their only use. They also allow screen readers to describe the image to visually impaired users.

Headings on a webpage represent the importance of each section in relation to its contents. So they should always descend in numerical order, with <h1> being the most important down to <h6>. By doing this it helps users of screen readers to jump from heading to heading when navigating a page and determining the importance and relevance of its contents.

• <h1>
• <h2>
• <h3>

A page should also contain only one <h1> heading but may have multiples of the others which can also be nested as subsections too.

• <h1>
• <h2>
  •    <h3>
• <h2>
  •    <h3>

SEO

Most common SEO issues we see are:

• Poorly written or no document title element
• No meta description tag
• Images not having alt tags

A websites SEO can be a another contentious and misunderstood area for many business owners. But what many of them don't realise is that you can take a few small steps to help organically improve your own sites SEO.

Starting with adding in the head of each of your websites pages, a concise and well written document <title> element. The title defines the contents of each page and should be unique to each one as it is shown in a browsers title bar or tab. Plus it's also used by screen readers to infer the content of a page when navigating through a website.

Each webpage on your site should also include a <meta> description tag that should contain a brief description of the page contents. This is then used by search engines e.g. Google to create a snippet, the descriptive text that you see in search results. This should also be added to the head part of your webpage.

Image alt tag, whoa hold on, didn't we already cover that in accessibility? Well yes, but the descriptive text is also used by search engines in image based search results so they can better understand your image when ranking it. Which means if its missing like with this example audits image, it isn't going to have good SEO.

Accessibility & Links

Though it didn't come up as an issue in this example audit, we do regularly come across websites which have accessibility problems with their icons, links and buttons, mainly on navigation and mobile devices. The issue is usually due to insufficient tap area around the link. Which is why it's more often an issue that comes up in mobile audits, but it can also appear in the desktop audit too.

It may sound obvious but the best way to avoid this is to make sure all links have sufficient space around them, to allow the user to tap it easily. According to the WCAG 2.1 AAA level requirements tap targets should be a minimum of 44px x 44px, though if the link is within a line of text then it doesn't need to be quite this large.