How to Score 100% in Google Lighthouse

Google Lighthouse is an open-source, automated tool which can help business owners and developers optimise various aspects of their websites. Lighthouse is available as a plugin for Google Chrome. This makes it really quick and easy to run a review and receiving valuable feedback almost instantly. When using Lighthouse to review your website the aim is to score 100% across four key areas.

These key areas are:

• Performance

• Accessibility

• Best Practices

• SEO

These four areas are important marker of the overall health of a website. And each one not only impacts on things like SEO but also user-friendliness. For example, a website which loads quickly will provide a much better user experience than a slow one. But a fast website will also generally rank higher than a slow website – everything else being equal.

Lighthouse can be asked to provide feedback on either a Desktop or Mobile experience, with scores adjusted for each use case. This is helpful as it ensures that improvements can be made which target specific kinds of users. It also allows business owners to determine where to put their efforts. For example, if a website is more frequently accessed via mobile devices than desktops then these users should be prioritised when it comes to performance considerations.

It’s not possible to provide a ‘one size fits all’ approach to scoring 100% across the board. This is because every website is different. Some platforms make it more difficult to achieve 100% as find-grained control over every aspect of a website is often required. This means that if you’re building your website using Squarespace, WIX or Shopify, you may have trouble scoring top marks in particular areas. But don’t be put off trying!

However, there are some common issues which are easily fixed. Below we’ve highlighted some of the key pitfalls. We hope you’ll find this a useful guide if you’re looking to score 100% in Google Lighthouse.

Performance

This area is all about how quickly the web page loads. There are various aspects to this, such as Time to First Byte and Largest Contentful Paint. Performance is important as it dicates the percieved speed of your website. We all know how annoying slow websites can be to use!

There are a few areas which can yield easy wins when it comes to performance.

Images

With the arrival of broaband internet speeds, the need to optimise images was dramatically reduced. However, this has led to a situation where many websites make use of large images which are not appropriately sized or saved in the correct format.

A primary cause of a poor Lighthouse Performance score is issues with images. Here are some top tips:

• Size images appropriately before uploading them to your website

• Use modern formats like WEBP rather than traditional JPG or PNG

• For graphics like logos try using vector SVG files rather than rastered images

If you’re a developer you may also want to explore using responsive images. This can be quite straightforward to implement these days, provided you have control over how the website renders the images.

Javascript

Msot websites use some Javascript files. Javascript is a language which affords interactivity within a website. Things like image galleries, contact forms, accordion interfaces and so on often rely on Javascript. But there are better and worse ways to load Javascript files into a website.

Here are some general rules which might help you speed up your site:

• Include Javascript files at bottom of your pages, rather than the top

• Use the defer attribute which delays running the script until after the page has loaded

• Use DNS Prefetch to help reduce latency

• Store Javascript files locally where possible (rather than linking to them from external websites)

• Only include necessary Javascript files – avoid bloat

Fonts

Fonts can also become a performance headache. Thankfully there are a few things which can be done to speed things up.

• Use DNS Prefetch to reduce latency, as with off-site Javascript files

• Use Google Fonts, Adobe Fonts or similar – these platforms are designed for speed and have optimisation baked in

• Don’t use too many fonts, and don’t load any fonts which are not required

Accessibility

Accessbility is about user-friendliness, with a particular emphasis on visitors who may be using screen readers or other assistive technology. Web accessbility has become a hot topic in recent years as developers seek to make the internet a more open and accessible place for all.

As with the other Lighthouse areas, accessibility is good for everyone. Google can recognise if a website is accessible or not, and while it may not hamper your search ranking initially, it’s always good to aim to be as accessible as possible.

Colours

The main issue here is text contrast. That is, the difference between the text colour and the background colour. Where the contrast is too low text can become difficult to read. Depending on text size and weight different levels of contrast may be required to satisfy Lighthouse. A good place to explore this concept further is WebAIM Contrast Checker.

Link Text

Lots of websites use icons for things like email links and social media links. While these icons can work well for many visitors, those with visual impairments may not be able to make sense of an icon. A screen reader will not be able to determine what the icon is, and this can be confusing and frustrating. It’s a good idea to find some way to include the text within the structure of the link, but then hide it from view using CSS. This way, the link remains accessible to those using screen readers, while sighted users benefit from a cleaner interface.

ALT Tags

Always use ALT tags! It can be tempting not to. After all, most people are going to see the image. However, for visually impaired visitors to your website the ALT tag can be the only information they have about an image. ALT tags should be short and accurate, ‘A photo of a man in a blue shirt’, for example.

Best Practices

This area is generally about more technical aspects of your website. It’s often the easiest section to score 100% in, but can also be the most difficult to troubleshoot. By way of a quick guide, here are some key considerations:

• Always use an SSL certificate and serve your website from a https:// URL

• Make sure your HTML structure is correct without broken elements

• Avoid annoying pop-ups or notifications

• Be careful when using external Javascripts that they’re up to date and don’t pose a security risk

• Ensure all text is readable and that images are correctly displayed

As mentioned, if you have any problems hitting a score of 100% in Lighthouse for Best Practices you may need to get some specialist help to resolve the issues.

SEO

The final area of importance is SEO (Search Engine Optimisation). It’s generally quite easy to score 100% in Lighthouse for SEO – but that doesn’t necessarily mean that your web page is well optimised. These checks are fairly light touch – Lighthouse is checking for the presence of something, not the accuracy or quality of it.

When it comes to SEO, there are a few things which are really important, beyond the content of the page. These are:

• Page titles

• Meta descriptions

• That the page is accessible to crawlers and not blocked by robots.txt

• Images have ALT tags

• Links are crawlable

Page titles and meta descriptions can normally be easily added to any website. In WordPress you might like to use a plugin like Yoast to help with this. Ensuring a website is accessible to search engine crawlers is also normally not an issue – as all websites should be like this by default. If you have any problem get an SEO score of 100% in Lighthouse feel free to get in touch, we’d be glad to help.

How to Score 100% in Google Lighthouse Conclusion

As stated at the top, there’s no ‘one size fits all’ approach to scoring 100% in Google Lighthouse. Each website is unique and will have different issues depending on how it has been built, and what content it contains. This being said, well-constructed websites should have no problem reaching 90+ in each of the key areas listed above.

While hitting 100% in each area is satisfying, it’s no the be all and end all. Google, and other search engines, consider a wide range of factors when determining how to rank websites for different search queries. While these key areas of Performance, Accessibility, Best Practice and SEO are all important, there are many other factors at play.

At Hello Technology we build fast, accessible websites using best practices which are optimised for search engines. We know what it takes to score 100% across the board. If you’d like to discuss optimising an existing website, or discuss a new project with us we’d be glad to hear from you.