Jasmine Web Starter

Whether your website is for business or personal, by a web design company or self built. There's a couple of things they really should have in common, good performance and accessibility for all.

Unfortunately though too many websites fall short in either or both of these areas. And to many website owners this comes as a shock, especially if they've paid good money to have theirs professionally built, or used one of the popular big name site builders.

But sadly the saying "You get what you pay for..." doesn't always ring true. Even if your site looks spectacular and includes all the bells and whistles, unless these are implemented and tested correctly you could be failing your users and possibly costing yourself money too.

"But how do I know my site isn't performing well or accessible enough?" Well, you might be surprised to hear that the answer to that is probably more accessible than you think, as it's right there in your browser with Google's Lighthouse.

What's Lighthouse

Lighthouse is an open-source tool designed to help improve the quality of webpages by auditing for performance, accessibility, progressive web apps, SEO, and more. It runs tests on each of these areas and gives you a score out of 100 for each of them.

The Lighthouse performance testing is based on Google's Core Web Vitals, along with some other metrics to measure the speed of page loading, responding to users, largest and the first contentful paint and visual stability of the page loading.

Since August 2021 Google's Core Web Vitals have been the metrics they use when ranking websites, so if your websites performance scores badly, it effects where you appear in search engine result pages, which is why those "pay for first page of Google" offers are a waste of time and money.

A Lighthouse audit can be run against any webpage you wish in a few different ways, such as Chrome DevTools, from the command line or as a Node module. But we are only going to be taking you through running an audit with Chrome DevTools in either a Google Chrome or Microsoft Edge browser.

DevTools

Hopefully you have already read through our JWS Doc's section Browser DevTools Intro page, so will be familiar with accessing DevTools.

The image below shows how DevTools first open up on the Elements panel, this is highlighted by a blue line under the panels title tab. You will find the Lighthouse panel option further along this tab bar to the right, though depending on the size of your browser window the tab bar may not be wide enough to show all options so you will need to click on the ≫ icon to reveal a dropdown list of the hidden panel options.

After selecting the Lighthouse option the panel will change to the Lighthouse panel as shown in the image below.

You should now see four lists of options Mode, Device, Categories and Plugins.

• Mode - This list should already have the default option Navigation selected.
• Device - Here you can choose from either Mobile or Desktop depending on which you would like to test.
• Categories - The top 4 categories should all be selected (if not already by default), as they are the areas we are wanting lighthouse to give a report on.
  • Performance This will analyze how fast your page loads. A range of factors are taken into consideration to produce the performance score.
  • Accessibility Analyzes how well all users can access your website, from colour depth issues to those utilising screen assisted software.
  • Best Practice Audits of best practices applied in the development of a websites page, such as security, UX (User Experience) and deprecated technologies
  • SEO Ensures that your page is following basic search engine optimization advice
  • Progressive Web App Only needs selecting if applicable.
• Plugins - Its only option Publisher Ads shouldn't be selected by default hopefully.

After you have checked the above list selections, you should click on the blue Analyze Page Load button.

Lighthouse will now run it's audit of the webpage, this should take around 30 to 60 seconds to complete. As it does this a new window will appear saying Auditing (your url) followed by the name of the website being audited, with a progress bar across the middle and cancel button on the bottom right.

Once the audit is complete your report will appear, and if you're lucky and have a great performing website, it should light up green like the one below. Plus if you score 100's across the board you'll also receive the colourful firework display too!

PageSpeed Insights

For those unable to access DevTools you can still run a Lighthouse audit by going to Google for Developers PageSpeed Insights page and adding the URL of the page you wish to audit into the blue bordered Enter a web page URL box provided then click on the blue Analyze button and it will then run a full audit of the webpage. Unlike using DevTools it provides both mobile and desktop audits at the same time, which you can alternate between using the tabs at the top of the report.

Lighthouse Results

Both of these ways to run an audit will give you the same reported results. Which Google have made as user friendly as possible with the use of a traffic light system when scoring the categories.

How scores are color-coded

The metrics scores and the performance score are coloured according to these ranges:

• 0 to 49 (red): Poor
• 50 to 89 (orange): Needs Improvement
• 90 to 100 (green): Good

According to Google - "To provide a good user experience, sites should strive to have a good score (90-100). A "perfect" score of 100 is extremely challenging to achieve and not expected. For example, taking a score from 99 to 100 needs about the same amount of metric improvement that would take a 90 to 94."

That being said it isn't impossible to reach the perfect scores, it just depends on what kind of website you have and how it is built. As many of the popular site builders/shop sites are built using templates that either include additional files that you may not be using, which can dramatically slow down performance. Or they don't implement accessibility very well, if at all.

So why not go ahead and check your website today and see how you score. Then come back and find out about using those results to improve performance and accessibility with our Common lighthouse errors explained sprout of wisdom.