Lighthouse - Optimize your website, Part 1: Introduction

What is a good website? Have you ever been asked that question?

I have, but the answer isn't necessarily that simple. Let's just say - it depends! 😉

A great website can be great because of it's design, because of it's conversion rates, because of it's content, because of it's SEO and so on. Let's start with a technical part, where we can actually measure something in numbers. Not that it's the only truth - on the contrary. But it's a good beginning.

My preferred tool to measure a website is Lighthouse. You can learn more about Lighthouse on their GitHub page. With Lighthouse you can measure:

• Performance

• Accessibility

• Best practices

• SEO

In the next 4 weeks I'm going to dig deeper into each part of a Lighthouse report of a website and show what you, as a developer, can do to fix issues that might show up in the report. But let's just take an overall look into the four areas before digging into them in the upcoming weeks.

Performance

A great website is fast and user friendly - and the performance report can help you create a faster website - and actually also a more user friendly website, if you follow the instructions.

The performance part of Lighthouse looks into a lot of technical setup on your website. All of them affects your final performance score. The score is divided into 5 parts:

• First Contentful Paint (FCP)

• Largest Contentful Paint (LCP)

• Total Blocking Time (TBT)

• Cumulative Layout Shift (CLS)

• Speed Index (SI)

The higher the score, the better!

Accessibility

A great website is also accessible for all (it's) users. Just like in the physical world where we need to make public spaces available for people with disabilities, you should help users with disabilities to be able to use your website.

The accessibility score isn't divided into subparts, but is just an overall score indicating if your website is accessible. A few examples of what Lighthouse looks for is:

• Correct usage of ARIA attributes

• Titles and ALT attributes for iframes, images, links etc.

• Contrast-ratio of background and foreground colors

• Sufficient sizing of touch targets

Best practices

Lighthouse can also give us an idea of the usage of best practices in your website. I can be simple stuff like using HTTPS, allowing users to paste content into input fields in forms. But it could also be information about usage of deprecated API's, valid source map files etc.

As in the Accessibility part, you just get an overall score here as well.

SEO

The last part of the Lighthouse report will give you results regarding SEO to make sure your website can be found be search engines. But keep in mind - this is just a very technical part of SEO. It doesn't tell you if your content is good or bad for whatever you might be optimizing for. But it tells you if the fundamentals are in place.

Lighthouse looks at e.g.:

• Title tag + meta description

• Robots.txt file

• Structured data

• Ability to index content

I hope this gives you an overall insight into what Lighthouse can help you with. And I hope you'll read a long in the upcoming weeks, where I'll be digging into each part of the Lighthouse report.

As always, if you've got any feedback of supplementary info please let me know at [email protected] and I'll credit you here in the post.