google lighthouse logo

Improving page performance goes hand-in-hand with improving the visitor experience

We’ve recently moved onto a great new project for BA. As we are tasked with a large code base, we needed something that would quickly provide an insight into the performance areas of the page, that indicate the severity and give us a focus to improve, improve, improve…

Introducing Lighthouse, from Google Chrome.

TL:DR; “The BBC has seen a loss of 10% of their users for every extra second of page load” – if you’re looking for a anyone-can-use all in one tool, we have been loving the benefits and direction on how to make our webpages more performant

Anyone Can Use and Understand It

As the title suggests, it’s an out of the box tool – installed in Chrome by default. Results are intuitive with plenty of easy to understand tips and tricks.

Developer working on a computer

OK, but what does it give me?

The great aspect of Lighthouse is how many different ways it can be run on your site. We required this analysis on a runtime development server, run straight from Chrome DevTools as opposed to running either from the command line or a Node module.

From the control panel you can test your web page against an array of options:

  • Performance – How long does your app take to show content and become visible?
  • Progressive Web App – Does your page meet the standard of a Progressive Web App?
  • Best Practices – Does your page follow best practices for modern web development?
  • Accessibility – Is your page usable by people with disabilities or impairments?
  • SEO – Is your page optimised for search engine results ranking?

.. also while it’s running it provides you with interesting facts about how improving the web pages can have a huge benefit for companies.

Two big facts that myself and the team have taken away is that;

  • “The BBC has seen a loss of 10% of their users for every extra second of page load”
  • “Rebuilding Pinterest pages for performance increased conversion rates by 15%”.

Don’t take our word for it though, Here is a great article from Pinterest

google lighthouse results

The results

Once finished, results are split up into three categories:

  1. Metrics
  2. Opportunities
  3. Diagnostics

…as well as an over all score for your web page.

Our focus is on the performance of the page, so we are going to be taking advantage of as many “Opportunities” as possible, including;

  • Off screen images
  • Reduce render-blocking scripts/CSS

So, stay tuned and keep an eye out for our journey into Lighthouse statistics and the advancements that can be made in the world of user experience.