Website Weaknesses Revealed by Lighthouse

Website weaknesses prevent your site from achieving maximum performance.  Help is available with the form of a free tool called Lighthouse.

Lighthouse was created to analyze web pages for elements Google uses when ranking.  It provides a list of items to fix to make them load faster and work better.

New metrics added to algorithm

Google’s Page Experience Update included new metrics called Core Web Vitals (CWV) which measure a user’s experience when interacting with a website.   

• How fast it loads.
• Whether it works on their device.
• Is it easy to navigate?
• Do all the links work?
• Updated and useful content

4 Lighthouse categories

Lighthouse evaluates a page for website weaknesses and places them in four categories.

• Performance
• Accessibility
• Best Practices
• SEO

Ideally you want all greens meaning the page passes with a score between 90-100.  Medium range is 50-89 and red is failing with scores 49 and below. Progressive Web App is a category though it doesn’t apply to most pages and why I didn’t list it.

You can’t control everything

Certain elements are beyond your control when you run Lighthouse (or any test).  These are also the reasons why scores can fluctuate each time a test is run.

• Internet connection speed
• Device capabilities
• Browser used
• Apps on device

Since you can’t control this information, it’s good practice just to be aware of it and improve items of which you ARE in control.

Performance includes many metrics

How a web page performs is based on a variety of things which determine if the user has a positive or negative experience.

• How fast page loads and all visuals are on screen.
• Once page loads, how quickly the page respond to user interaction.
• Do items (on page) shift during loading and does it cause problems for the user?
• Do transitions and animations render at a consistent rate and flow fluidly?

Measuring user experience

Page Experience Update is all about the user’s experience. Lighthouse measures these specific metrics that Google uses to rank sites.

• First Contentful Paint (FCP) marks the time when the first text or image is visible.
• Largest Contentful Paint (LCP) measures how long it takes for the page’s largest image or text block to become visible.
• Time to Interactive (TTI) is the time from when page starts loading until it’s able to respond to the user.
• Speed Index (SI) is the average time it takes for visible parts of the page to be displayed.
• Cumulative Layout Shift (CLS) measures how elements on a page shift as it loads.
• Total Blocking Time (TBT) measures the time between the first text/image is visible and the time page responds to the user.

FYI-Total Blocking Time is the same as First Input Delay (FID), which is what it’s called in Google’s algorithm.  It’s best explained like this.  When a browser loads a page, it can’t load all the code at once.  A line forms to load the scripts and any input from the user (like clicking a button) also goes into that same line.

Accessibility is becoming more vital

With the Justice Dept. publishing web accessibility guidance this past March, this will be a big issue sooner rather than later.  Lighthouse only checks elements automatically detected.

• Color contrast ratio
• Correct use of HTML tags
• No instructions or labels on forms
• Links not named or empty
• No alt tags on images

The above is not a complete list.  Others can only be checked manually and those are listed separately in the report.

Best practices reveal coding errors

This category analyzes and reveals a multitude of common security, technical and coding mistakes.  For example, browser updates often cause errors leading to functionality issues.  It also checks if resources come from secure sources and if there are any vulnerabilities. 

This is where it pays off to have an experienced developer who uses the latest approved methods. While more time consuming, the result is a website that passes Lighthouse and other tests.

SEO items

Your page is inspected to see if it follows basic search engine optimization (SEO) practices.  These include on-page essentials like a meta description, page titles and proper use of headings. 

It also measures technical items like whether links are crawlable and if buttons or links are large enough to be tapped without interfering with other elements.

What’s under the hood of your site?

Lighthouse often reveals preventable problems in that they are caused by cutting corners, not following proper protocols and/or using outdated coding methods. Whatever the reason, it proves a well-built website is worth the extra money. 

It outperforms a cheaply built site, like a sports car winning over an older model with a smaller engine. Contact Sleepy Dog for your free website evaluation to check for website weaknesses.