Lighthouse
Lighthouse is an automated tool developed by Google that audits website performance across several categories, including Performance, SEO, and Accessability. It generates a score for each area and offers suggestions for improvements. The 4 Key performance-related metrics are:
- Performance
- Accessibility
- Best Practices
- SEO
Performance
The Performance score measures how fast and efficient your website is in terms of Loading Speed and Interactivity. Lighthouse assesses several metrics to calculate this score (you'll recognize these from the Web Vitals section).
Here are some of the key areas Lighthouse checks for performance:
First Contentful Paint (FCP)
FCP is the time it takes for the first piece of content to appear on the screen.***
Largest Contentful Paint (LCP)
LCP is the time it takes for the largest visible element (image or text block) to load.***
Time to Interactive (TTI)
TTI is how long it takes for the page to become fully responsive to user interactions.***
Total Blocking Time (TBT)
TBT is the amount of time the browser is blocked from responding to user input.***
Speed Index(SI)
SI is how quickly content is visually displayed during page load.Please refer to the Lighthouse Glossary for a comprehensive overview of all the recommended SEO guidelines.***
Accessibility
The Accessibility score evaluates how well your website accommodates users with disabilities. It checks for compliance with accessibility standards and ensures that your website is usable by people with visual, auditory, and motor impairments.
Here are some of the key areas Lighthouse checks for accessibility:
Color Contrast
Ensures that text is legible against background colors, which is important for users with visual impairments. Tools like Lighthouse will flag insufficient contrast ratios and suggest fixes.***
Keyboard Navigation
Tests whether users can navigate your site using only the keyboard, a crucial feature for individuals with motor impairments. Ensuring all interactive elements are accessible via keyboard is a core aspect of improving accessibility.***
ARIA Labels and Roles
These are accessibility markers that help screen readers interpret your website for visually impaired users. Proper implementation of ARIA roles and labels ensures that all users can understand the content and navigation of the site.Please refer to the Lighthouse Accessibility Checklist for a comprehensive overview of all the recommended guidelines.***
Best Practices
The Best Practices score in Lighthouse evaluates your website's adherence to modern web development standards and security practices. This score helps ensure that your site is not only functional but also secure and optimized for best performance. It highlights potential risks and outdated techniques that could expose users to vulnerabilities or lead to poor performance.
Here are some of the key areas Lighthouse checks for Best Practices:
HTTPS Usage
Lighthouse checks whether all resources on your website are served over HTTPS, which is essential for ensuring secure communication between the server and the user’s browser. HTTPS encrypts the data exchanged, protecting users from attacks like man-in-the-middle (MITM) and safeguarding sensitive information, such as login credentials or payment details. Sites that do not fully implement HTTPS may receive lower scores.***
Avoiding Deprecated APIs
Web technologies evolve quickly, and APIs that were once common may become deprecated, meaning they are no longer supported or secure. Lighthouse flags any use of deprecated or outdated APIs that could lead to security issues or poor functionality. Replacing deprecated APIs with modern alternatives ensures better compatibility and security.***
Efficient Resource Loading
The Best Practices score also checks whether resources such as images, CSS, and JavaScript files are optimized for faster loading. This includes flagging oversized images, unoptimized file formats, or resources that block the rendering of your page. Efficient resource loading ensures that users don’t experience unnecessary delays, leading to faster page performance.***
Security-Related Practices
Lighthouse evaluates several aspects of your website's security. For example, it checks for vulnerabilities such as allowing the use of outdated libraries with known security issues. It also checks for proper configurations, like Content Security Policy (CSP) headers, which help mitigate attacks such as cross-site scripting (XSS).***
Preventing Mixed Content
Mixed content occurs when a website served over HTTPS includes some resources (like images or scripts) that are served over HTTP. This compromises the security of the entire site. Lighthouse checks for any mixed content issues, ensuring all resources are served securely via HTTPS.***
Safe Cross-Origin Requests
The Best Practices audit also looks at whether cross-origin requests are securely handled. Cross-origin requests occur when a site requests resources from another domain. Lighthouse checks for vulnerabilities like improper handling of CORS (Cross-Origin Resource Sharing), which could lead to unauthorized access or data exposure.***
Avoiding Browser Vulnerabilities
Lighthouse flags any use of outdated browser features or those that could expose users to potential security issues. For example, features that are no longer considered secure, like certain types of JavaScript functions or HTML attributes, are highlighted in the report. Removing these vulnerabilities ensures that your site is using only safe and up-to-date web standards.***
Correct Use of <input> and Form Elements
Lighthouse also checks the implementation of form elements, ensuring they are properly labeled and secured. For example, it verifies that password fields are marked appropriately, and that autofill is enabled for ease of use. Correct use of form elements improves both security and user experience.Improving your best practices score ensures your website runs smoothly and safely, providing a secure experience for users.Please refer to theLighthouse Best Practices Checklist for a comprehensive overview of all the recommended guidelines.
SEO
The SEO score assesses how well your website is optimized for search engines, ensuring it is structured in a way that allows for easy crawling and indexing. Lighthouse evaluates several on-page SEO factors, including:
Here are some of the key areas Lighthouse checks for performance:
Meta tags
Ensures the presence of proper meta descriptions and titles.***
Descriptive links
Checks if links are descriptive enough for search engines and users.***
Structured data
Verifies that the site uses structured data markup to help search engines understand the content.***
Mobile-friendliness
Assesses if the site is optimized for mobile devices, a critical ranking factor in search engines.Improving your SEO score boosts your site’s visibility in search results, helping it attract more organic traffic.Please refer to the Lighthouse SEO Checklist for a comprehensive overview of all the recommended SEO guidelines.***
Updated about 1 month ago