Performance

9 min read

Optimise your Lighthouse score and watch your site performance soar

Whether your goal is to sell more products, drive more conversions, or reach more customers, you won’t get there if you don’t have excellent user experience.

Written by

Tasmin Lofthouse - Content & Marketing

Tasmin Lofthouse

Published on

21 September, 2022

Updated on

27 September, 2022

If pages are slow loading, inaccessible, or poorly optimised for organic search, chances are UX is also performing poorly. 

In other words — people will be running away from your website, rather than flocking towards it.

You can get a good idea of your current user experience (UX) by analysing your website performance.

What is a good Lighthouse score? 

Google describes Lighthouse as an open-source, automated tool that improves the quality of web pages. You can run a Lighthouse report for pages that are public or that require authentication. Once done, you’ll get audits for performance, accessibility, progressive web apps, SEO, and more.

Side note: To access Google Lighthouse, open the web page you want to analyse in Chrome, then navigate to Developer tools, select the Lighthouse tab, and click “generate report”.

After running your site through Lighthouse, you’ll be presented with a performance snapshot showcasing a series of scores rated from 0 - 100. The metrics measured are:

  • Performance
  • Progressive web apps
  • Best practices
  • Accessibility
  • SEO

If simple dashboard metrics weren’t helpful enough, Google takes this up a notch by colour-coding the scores to determine performance:

  • 0 to 49 (red): Poor
  • 50 to 89 (orange): Needs improvement
  • 90 to 100 (green): Good
Screenshot of Google Lighthouse score for Skyward's website.

A score between 90 - 100 is considered to be a “good” score. You need to be striving towards a score of 90 if you want to make sure your site offers a good user experience. 

However, the higher the Lighthouse score is, the harder it is to achieve.  Achieving a “perfect” score of 100 will be challenging, but ensuring you’ve got at least “good” scores for every category will guarantee you’re getting the best results. 

And you’ll be able to feel the difference.

Why does it matter?

Before you roll your eyes and start thinking “Great, one more thing to add to my to-do list”, let me explain why optimising your Lighthouse score matters.

When ranking your website for lighthouse, on their search engine, or anywhere; google only cares about one thing. User Experience.

They want to ensure that the right users are finding and staying on your website long enough to get the information they need.

So by improving your lighthouse score, you’re not just making google happier, you’re working towards creating a better experience for your users overall.

And that, in turn, leads to numerous other benefits.

Skyrocket your SEO

Google created Lighthouse. They also run the biggest search engine in the world. So if Lighthouse says your website needs improvement, Google’s Search Engine is going to be using that data too.

Your organic website rankings can change depending on how well your site performs on Lighthouse. If we spin this around, we can deduce that increasing your Lighthouse score will help you meet best practises for search engine optimisation (SEO).

If you aren’t familiar with Core Web Vitals, these are metrics that measure the loading, layout stability, and interaction readiness of your web pages. How you score on these metrics is an indication of how user-friendly your site may (or may not) be.

Lighthouse lets you easily measure site performance across these metrics so you see which areas of user experience need your attention most. You can then optimise site performance, accessibility and usability to enhance SEO.

Lighthouse is far from the only scoring factor, but if you have poor performance, seo and accessibility you’re going to struggle to rank regardless of how good the rest of your content is.

See a problem, find a solution

What if I told you that rather than guessing where, and what, the roadblocks on your site might be, you could see clear warning signs that told you exactly what those roadblocks were? You’d want to know, right?

That’s exactly what the Google Lighthouse report does. It doesn’t just tell you if your site is performing poorly. It tells you why. You can then use that information to implement solutions.

Google Lighthouse report identifies common problems and then provides recommendations on how to fix them. It’s a powerful tool for effectively monitoring website quality without having to do too much manual heavy lifting.

Better UX

I know I’ve already mentioned the importance of Google Lighthouse for UX. But, it really is important.

The accessibility test within Lighthouse contains 35 audits. That’s 35 chances to improve your site’s accessibility and usability — two factors that are key for enhancing user experience for everyone.

Making changes to close the ring in the other reports will all help benefit UX too. From a performance point of view, a higher score will mean having faster loading pages and lower user frustration.

Google’s primary goal is to get search users exactly what they need, so Lighthouse gives you the ability to fix poor UX across all areas of your website to ensure it’s in its best shape.

Faster loading times

Load speed can make or break your website. 

Slow websites are frustrating. But reducing loading time isn’t just about overcoming frustrations. It’s also about improving performance and skyrocketing success. 

Every second counts when it comes to web page loading times, and the first 5 seconds can have the biggest impact. Conversion rates drop by an average of 4.42% with every additional second of loading time between those first 0 - 5 seconds.

Along with increasing conversations and reducing user frustrations, page speed is another important factor for SEO and getting your website to that number one spot in Google search results.

Google Lighthouse’s performance audit measures your site speed against seven different metrics so you can speed up web page loading times to help your users and organic rankings.

More conversions

Happier users = more conversions. 

By now, you’ve probably realised that optimising your Lighthouse score is all about user experience and keeping your website visitors happy. 

By that notion, if you focus on increasing your Lighthouse score and making the recommendations presented, you’ll bring your website performance into closer alignment with user expectations. In turn, your users will have a more positive experience on your site and will be more likely to convert.

It’s a clear winner, if you ask me.

How does a Lighthouse report help you?

Both “big” and “small” brands can benefit from running a Lighthouse audit and improving their score.

If you’re the owner of a small business or start-up, the Lighthouse audit offers clarity over your website performance. You can then use the report to identify clear recommendations and opportunities for improvement. 

You might be able to implement some of these recommendations yourself. For example, the performance report might recommend that you “properly size images”. This is a change that you could execute, by taking images and resizing them in photoshop, to reduce loading time and improve website performance.

But some recommendations are best left to an experienced web developer, and you’ll find that as your site grows you’ll want to start automating some of those more manual tasks (which your developer can also help you with).

The Lighthouse audit gives you a good baseline understanding of your current performance before you engage the help of web developers. They can then guide you through which issues to tackle first to improve website optimisation.

For “big” brands and large-scale organisations, the Lighthouse report is a powerful accessory developers can use alongside current web optimisation activities. 

As your business grows, so does your website. Overtime, websites can become bloated or sluggish. Using data from lighthouse allows you to make better decisions, and maybe your time is better spent fixing your website performance than creating a new landing page this month.

Running a Lighthouse report is a great way to take things back to basics and remember the fundamentals of good UX when amending your website. Armed with a Lighthouse report, you can take large, complex websites and make them fast-loading and smooth-running.

How does Lighthouse calculate scores?

Knowing how Lighthouse calculates your score is beneficial for knowing how to improve it. 

Lighthouse scores web pages across a series of five categories on a scale of 0-100. Within the Performance category, your final score is weighted based on metrics essential for organic search performance.

The metrics measured within the Performance audit on Lighthouse 8 are:

  • First Contentful Paint - 10% weighted average
  • Speed Index - 10% weighted average
  • Largest Contentful Paint - 25% weighted average
  • Time to Interactive - 10% weighted average
  • Total Blocking Time - 30% weighted average
  • Cumulative Layout Shift - 15% weighted average

The metric results are then converted to a score on a scale of 0-100 based on benchmark data held by Google. 

Optimise your Lighthouse score by paying attention to the Google best practices for UX and accessibility, and following the recommendation provided in Lighthouse reports.

Check the Lighthouse scoring calculator

The Lighthouse scoring calculator is the best place to start when looking to improve your Lighthouse performance score.

This calculator helps you understand the thresholds you should be aiming for if you are looking to achieve a particular score. 

Screenshot of Google Lighthouse scoring calculator for Skyward's website.

Adjust the metric score for each datapoint to see what value you would need to achieve to get your desired performance score. Compare these numbers to your current performance to find opportunities for improvements.

How to improve your Lighthouse Scores?

After all that talk about why Lighthouse is important, how do you actually go about fixing poor lighthouse scores?

Working with an experienced web developer

If you want to get the best possible Lighthouse score for your site, you need to work with an experienced and knowledgeable web developer. 

Sure, you can DIY some elements, but working with an experienced developer will strengthen the long-term performance of your site. It isn’t about finding quick fixes. It’s about developing a website that performs as well as it possibly can.

Working with a developer means you’ll have access to someone who understands the finer details of performance, best practices for UX, and how to implement long-term solutions.

Do it yourself

Sometimes, the only option is to do it yourself. If, for instance, you are facing strict budget limitations and aren’t in a position to invest in your web development support. 

We only advise going down the DIY route if you are already familiar with performing complex web development tasks. 

While we don’t advise doing it yourself, it is possible to improve your performance score with these tips.

Fixing Lighthouse Issues

Focus on most severe issues first

Above anything else, you first want to focus on fixing the more severe issues. 

These are the issues that are having the biggest negative impact on your score. Focusing on these changes will, therefore, significantly increase your performance. The Google Lighthouse report uses a traffic light system to highlight the severity of issues. 

Screenshot of Google Lighthouse performance opportunities for Skyward's website.

Any issues with a red triangle next to them are the most severe issues. These are followed by an orange square to indicate issues of a lower severity. Use these colour-coded symbols to identify the most severe issues on your web page and create a priority order based on severity.

Optimise images

One simple Lighthouse score improvement that anyone can implement is optimising on-site images. This also tends to be one of the most overlooked performance issues.

Large images that have not been adapted to suit the web page presentation can negatively affect website loading time. Resizing images can improve load time and save data.

Before uploading images, compress them and use a smaller file format such as JPEG.

There are ways to automate this process. Most headless frameworks (Like NextJS or Gatsby) offer an Image tool that resizes your images for you. You could also use a service like imgix or cloudinary, that resize images and give you a ton of other controls too.

While compressing images, I recommend also improving any image file names and alt text for accessibility purposes. It’s a good habit to get into, and one that will help accessibility and search engine optimisation.

Reduce extra packages

Having a large number of packages or plugins on your site can reduce loading time, especially if they’re barely used.

Only install packages that are absolutely necessary. Make a habit of checking through them often and removing any that are redundant or no longer needed.

Prioritise high impact pages

Lighthouse scores are determined on a page-by-page basis. When improving your Lighthouse score, focus on the most important pages first.

To find high impact pages, analyse your website traffic to see which pages people typically visit. For a SaaS company, the sign-up page will likely be one of their high impact pages. Whereas, a B2B service provider might consider their services pages to be the high impact pages.

Improving your Lighthouse performance score is about improving UX. So it makes sense to prioritise the web pages where users spend the most of their time. Fixing the performance of these pages will positively impact the user journey, meaning you can start creating a positive user experience then focus on fixing the lower impact pages next.

Remove unnecessary elements

Not everything on your site is necessary. Along with removing redundant packages, remove any other unnecessary elements on your site. This can include unused CSS and JavaScript, or even parts of your webpage if they’re not providing any value.

These elements will be dragging down your site loading time, causing them to load far slower than necessary. You can fix this by removing unnecessary elements, or if you can’t remove them instead splitting them up and loading them only when necessary.

If you, like us, love headless frameworks then they often have a lot of these performance boosting methods built in, though newer frameworks are moving away from hydrating your entire page.

Improve accessibility

Finally, prioritise accessibility at every stage of your website build, development and maintenance.

Accessibility metrics make sure your web pages are usable for people who might interact with your content differently. Accessibility should be a facet of user experience rather than a box-ticking exercise. 

Look at the Accessibility report within your Lighthouse audit and work through the recommendations in order of severity. While some recommendations will require the support of an experienced web developer, you might be able to action some of the other recommendations yourself.

Improving your accessibility score makes it easier for people to access your on-site content and perform the actions they intended. 

Work with us and take your site performance Skyward

In a nutshell, the Google Lighthouse audit is a powerful tool for assessing your website’s UX performance.

Optimise your Lighthouse performance score to tap into improved UX, faster site speeds and more conversions. Plus, you’ll naturally improve organic performance.

Here at Skyward, we are an experienced web development and design team with a specific UX focus. Our eye for UX paired with our deep understanding of web development means who can map out a clear path to resolving site issues and skyrocketing your performance.

So, get in touch and let’s talk about optimising your website performance.

Join our newsletter

No spam. Just the latest releases, tips, and interesting articles, in your inbox when they release.