We can’t send you updates from Justia Onward without your email.
Unsubscribe at any time.
Web Vitals is here! Besides "unique and relevant content," how you deliver it (user experience) is now playing a significant role in Google Search rankings, meaning that Google will prioritize pages with an excellent page experience. This article discusses Google Lighthouse, a neat tool designed to audit, analyze, and improve web pages' quality.
Web optimization is no longer just about speed. Google has started the rollout of its new “page experience update,” designed to “highlight pages that offer great user experiences.” Additionally, Google will use the results of its user experience report as a ranking factor.
A quick Google search offers countless tools designed to analyze websites and provide feedback for enhancing and improving the overall user experience. Among these tools, you will find the ones developed and maintained by Google: PageSpeed Insights and Google Lighthouse.
Google Lighthouse is a great, open-source tool that can help analyze any website. It provides an audit report assessing the following metrics that, according to Google, are necessary for a great user experience:
- Performance
- Accessibility (A11y)
- Best Practices
- SEO
- Progressive Web Apps (PWA) – if available
The report helps identify a website’s weak areas and provides feedback for applying the necessary changes. The user experience update was initially mobile-only, but during the 2021 Google I/O event, Google announced that the update is also coming to Desktop soon.
Related article: Google’s Core Web Vitals Measures the Speed of the Web.
How Do I Use Google Lighthouse?
You can run Lighthouse audits using different methods:
- Chrome developer tools [ source ]
- As a Chrome/Firefox Extension [ Chrome source | Firefox source ]
- A CLI tool to be run on your local/server machine [ source ]
- Lighthouse as Continuous Integration (CI) [ source ]
For non-developers, we recommend using the Chrome/Firefox extension. Just install the extension and enable it. Then, you’ll be able to audit any website by simply clicking on the Lighthouse extension icon.
The Google Lighthouse report
Consider Google’s example, a shop website. Using the extension method, we just visited the webpage and ran the Lighthouse report by clicking the extension icon. The results were as follows:
Google’s Example Lighthouse Score
Overall, the results are great. However, the report shows Performance as an area of opportunity:
- Performance (Score: 70)
To get more details about an area of opportunity, you can simply click on the Performance category to be directed to the metrics results, where the report offers additional details and feedback on areas that need improvement, including diagnostics and suggested solutions (Opportunities) when available.
These are the Lighthouse score ranges:
- 0 to 49 (red): Poor
- 50 to 89 (orange): Needs Improvement
- 90 to 100 (green): Good
You should aim for a 90-100 “Good” score in each of the categories. The Google Lighthouse team doesn’t expect a website to reach the full 100 on each category.
It is also important to note that these report results are what Google calls, “synthetic, or lab data results“. Google uses the “field data results” as a ranking factor. What is the difference between these types of data?
- Lab data (synthetic results): The Lighthouse and WebPageTest tools collect this type of data. It is not used as a ranking factor because these results are gathered via controlled factors.
- Field data: These metrics are gathered via the Chrome User Experience Report and performance tools like PageSpeed Insights.
Watch this clip to learn more about the PageSpeed Insights tool.
Don’t worry if you don’t get a perfect score on your website. Even Google websites don’t always perform very well.
Google developers lighthouse score
Should you get a perfect score, the Lighthouse tool congratulates you with a dark theme and fireworks. However, as mentioned above, Google doesn’t expect you to have a perfect score, and any score between 90-100 is considered a good result.
Google Lighthouse Perfect Score
Performance Score
The performance score currently returns the measurement of the following performance-related metrics:
| Audit | Description | Weight |
|---|---|---|
| First Contentful Paint | Marks the time at which the first text or image is painted. | 10% |
| Speed Index | Shows how quickly the contents of a page are visibly populated. | 10% |
| Largest Contentful Paint | Marks the time at which the largest text or image is painted. | 25% |
| Time to Interactive | The amount of time it takes for the page to become fully interactive. | 10% |
| Total Blocking Time | Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. | 30% |
| Cumulative Layout Shift | Quantifies how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful. | 15% |
Source: How the Performance score is weighted (Lighthouse 8)
The performance score also displays the “Opportunities” section. Addressing the listed items can help your website load faster. Although Google has stated items in the diagnostics section do not impact the Performance score, addressing any issues identified in this area can also help your website load faster. The last section lists all the Passed audits.
Source: Performance scoring
Accessibility (A11y)
Lighthouse also helps identify whether a website needs any accessibility adjustments. However, the tool only identifies a subset of accessibility issues and encourages the use of manual testing.
Lighthouse audit weights match the axe scoring system of minor, moderate, serious, and critical.
See the audits listed at dequeuniversity.com/rules/axe/3.2
Best Practices
The best practices report identifies problems related to web security. It ensures a website uses HTTPS and doesn’t log any JS errors on the console. It also analyzes possible XSS vulnerabilities.
| Best Practice Category | Weight |
|---|---|
| appcache-manifest | 1 |
| is-on-https | 1 |
| uses-http2 | 1 |
| uses-passive-event-listeners | 1 |
| no-document-write | 1 |
| external-anchors-use-rel-noopener | 1 |
| geolocation-on-start | 1 |
| doctype | 1 |
| charset | 1 |
| no-vulnerable-libraries | 1 |
| js-libraries | 0 |
| notification-on-start | 1 |
| deprecations | 1 |
| password-inputs-can-be-pasted-into | 1 |
| errors-in-console | 1 |
| image-aspect-ratio | 1 |
| image-size-responsive | 1 |
Source: Lighthouse – Best Practices
SEO
This very important category is the Lighthouse Search Engine Optimization check. Here, Lighthouse checks whether the webpage passes certain validations for search engine results ranking. However, it is important to remember that there are additional factors Lighthouse does not check that may affect your search ranking, such as the structured data of your website.
How is the SEO score calculated?
| SEO Category | Group | Weight |
|---|---|---|
| viewport | seo-mobile | 1 |
| document-title | seo-content | 1 |
| meta-description | seo-content | 1 |
| http-status-code | seo-crawl | 1 |
| link-text | seo-content | 1 |
| is-crawlable | seo-crawl | 1 |
| robots-txt | seo-crawl | 1 |
| image-alt | seo-content | 1 |
| hreflang | seo-content | 1 |
| canonical | seo-content | 1 |
| font-size | seo-mobile | 1 |
| plugins | seo-content | 1 |
| tap-targets | seo-mobile | 1 |
| structured-data | N/A | 0 |
Source: Lighthouse – SEO Scoring
Progressive Web Apps (PWA)
This check validates the aspects of a Progressive Web App and is only valid if your website owns such capabilities.
Recommendations for Using Google Lighthouse
- Run several audits at different times and on different days of the week. This way, you can have an average metric of your website performance. At any given time, metrics can be affected by your website traffic, third-party services, internet speed, and other factors.
- Try running the audits in incognito mode. Your Chrome or Firefox extensions may have an impact on the audit results. Why? Some extensions modify the DOM and inject additional elements to the webpage, which will cause slowness and incorrect audit results.
Related Tools & Resources
- Lighthouse Report Viewer
- Lighthouse Scoring Calculator
- WebPageTest
- TestMySite
- PageSpeed Insights
- Speed Scorecard
- Impact Calculator
Final Thoughts: Why Do You Care?
Striving for a high-quality website is a constant task. With the Google Lighthouse application, you can find areas of opportunity for your site and track your progress while applying the necessary changes. Thus, it is essential to integrate the Lighthouse report into your website development lifecycle.
Check out this related post: Harvesting the Rewards of the Optimization You’ve Sown
