Lighthouse Scores

Understand and improve your website’s performance with Google Lighthouse metrics

Lighthouse Scores

CodeNull’s Lighthouse Scores dashboard helps you monitor and optimize your application’s performance, accessibility, best practices, and SEO using Google’s industry-standard metrics.

Overview

The Lighthouse Scores dashboard provides:

• Comprehensive performance metrics for your application
• Detailed analysis of each performance category
• Historical tracking of score changes
• Actionable recommendations for improvement
• Competitive benchmarking against industry standards
• Automated performance regression detection

Understanding Lighthouse Metrics

Performance

Measures how quickly your application loads and becomes interactive

Accessibility

Evaluates how well your site works for users with disabilities

Best Practices

Checks for modern web development best practices

SEO

Assesses how well search engines can understand your site

PWA

Evaluates Progressive Web App capabilities

Performance Score Breakdown

The Performance score is based on six key metrics:

First Contentful Paint (FCP)

FCP measures when the browser renders the first piece of content from the DOM:

• Good: 0-1.8 seconds
• Needs Improvement: 1.8-3.0 seconds
• Poor: Over 3.0 seconds

Common improvement strategies:

• Eliminate render-blocking resources
• Minimize critical request chains
• Preload key requests
• Reduce server response times (TTFB)

This metric is weighted at 10% of the overall Performance score.

Largest Contentful Paint (LCP)

LCP measures when the largest content element becomes visible:

• Good: 0-2.5 seconds
• Needs Improvement: 2.5-4.0 seconds
• Poor: Over 4.0 seconds

Common improvement strategies:

• Optimize images and media
• Implement resource prioritization
• Use responsive image techniques
• Improve server response times
• Enable text compression

This Core Web Vital is weighted at 25% of the overall Performance score.

Total Blocking Time (TBT)

TBT measures the total time when the main thread was blocked enough to prevent input responsiveness:

• Good: 0-200 milliseconds
• Needs Improvement: 200-600 milliseconds
• Poor: Over 600 milliseconds

Common improvement strategies:

• Break up long JavaScript tasks
• Optimize JavaScript execution
• Reduce JavaScript payload
• Remove unused JavaScript
• Minimize main thread work

This metric correlates with First Input Delay (FID) and is weighted at 30% of the overall Performance score.

Cumulative Layout Shift (CLS)

CLS measures visual stability by quantifying unexpected layout shifts:

• Good: 0-0.1
• Needs Improvement: 0.1-0.25
• Poor: Over 0.25

Common improvement strategies:

• Include size attributes on images and videos
• Reserve space for dynamic content
• Avoid inserting content above existing content
• Preload fonts to prevent layout shifts
• Use transform animations instead of those triggering layout changes

This Core Web Vital is weighted at 15% of the overall Performance score.

Speed Index

Speed Index measures how quickly content is visually displayed during page load:

• Good: 0-3.4 seconds
• Needs Improvement: 3.4-5.8 seconds
• Poor: Over 5.8 seconds

Common improvement strategies:

• Optimize critical rendering path
• Reduce render-blocking resources
• Minimize request counts and sizes
• Implement efficient caching policies

This metric is weighted at 10% of the overall Performance score.

Time to Interactive (TTI)

TTI measures how long it takes for the page to become fully interactive:

• Good: 0-3.8 seconds
• Needs Improvement: 3.8-7.3 seconds
• Poor: Over 7.3 seconds

Common improvement strategies:

• Minimize JavaScript execution time
• Defer non-critical JavaScript
• Reduce main thread work
• Optimize component initialization

This metric is weighted at 10% of the overall Performance score.

Accessibility Score Breakdown

The Accessibility score evaluates how well your site works for users with disabilities:

Navigation

Navigation accessibility ensures all users can navigate your site:

• Proper heading structure and hierarchy
• Keyboard navigability without traps
• Skip navigation links
• ARIA landmarks for screen readers
• Descriptive link text

CodeNull checks for these issues and provides instant fixes for common problems.

Navigation accessibility ensures all users can navigate your site:

• Proper heading structure and hierarchy
• Keyboard navigability without traps
• Skip navigation links
• ARIA landmarks for screen readers
• Descriptive link text

CodeNull checks for these issues and provides instant fixes for common problems.

Content accessibility makes your information perceivable to all users:

• Sufficient color contrast
• Appropriate text sizes
• Alt text for images
• Captions for video content
• Avoidance of images of text

The dashboard identifies content issues and suggests specific improvements.

Form accessibility ensures everyone can input information:

• Properly associated labels
• Clear error messages
• Logical tab order
• No time constraints where avoidable
• Form validation feedback

CodeNull provides form-specific accessibility recommendations.

ARIA implementation brings additional accessibility features:

• Correct usage of ARIA attributes
• Complementary (not contradictory) ARIA roles
• ARIA attributes with valid values
• No duplicate IDs
• Proper parent-child relationships

The dashboard helps identify and fix ARIA-related issues.

Best Practices Score

HTTPS Usage

Ensure secure connections for all resources

Browser Errors

Check for console errors and exceptions

Deprecated APIs

Identify usage of outdated browser features

Image Optimization

Verify proper image formats and sizes

Security Issues

Check for potential security vulnerabilities

User Experience

Evaluate popups, notifications, and intrusive elements

SEO Score Analysis

The SEO score measures how well search engines can understand your content:

Content Best Practices

Ensure your content is search engine friendly:

• Descriptive page titles
• Meta descriptions
• Crawlable links and resources
• Structured data (Schema.org)
• Mobile-friendly design

Content optimizations directly impact your search engine visibility.

Technical SEO

Technical aspects that affect search engine indexing:

• Proper HTTP status codes
• Robots.txt configuration
• XML sitemap availability
• Canonical URLs
• hreflang for international sites

The dashboard identifies technical SEO issues that might be hurting your rankings.

Crawlability

Ensure search engines can properly explore your site:

• No indexing blockers
• Proper link structure
• Manageable page depth
• Avoidance of redirect chains
• Performance optimization

Crawlability improvements help search engines discover and index your content.

Mobile Optimization

Mobile-specific SEO factors:

• Viewport configuration
• Content sizing for mobile
• Tap target sizing
• Legible font sizes
• Intrusive interstitials avoidance

Mobile optimization is critical for SEO since Google uses mobile-first indexing.

Progressive Web App Assessment

The PWA category evaluates if your application meets Progressive Web App standards:

Installability

Check if your app can be installed on devices

Service Worker

Verify offline functionality and caching

Manifest

Assess your web app manifest configuration

HTTPS

Confirm secure serving of all app resources

Splash Screen

Check for proper app loading experience

Offline Support

Validate functionality without internet connection

Score History and Trending

CodeNull tracks your Lighthouse scores over time to help you:

• Monitor the impact of changes and optimizations
• Identify performance regressions
• Set improvement targets and track progress
• Compare multiple deployment environments
• Benchmark against previous versions

The historical view provides valuable context for performance trends and improvements.

Competitive Benchmarking

Compare your application’s performance against:

• Industry averages for your type of application
• Top competitors in your market
• Previous versions of your own application
• Different pages within your application
• Mobile vs. desktop performance

This benchmarking helps you understand where you stand and where to focus improvements.

Automated Improvement Suggestions

Quick Wins

High-impact improvements with minimal effort

Critical Issues

Problems significantly affecting your scores

Resource Optimization

Suggestions for improved asset delivery

Code Improvement

JavaScript and CSS optimization recommendations

Each suggestion includes:

• Detailed explanation of the issue
• Potential impact on performance
• Step-by-step implementation instructions
• Code examples and best practices
• Estimated difficulty level

Continuous Monitoring

CodeNull automatically monitors your Lighthouse scores:

• After each deployment
• On a regular schedule (daily, weekly)
• Across different devices and connection types
• For critical user flows and pages
• With alerts for significant regressions

This continuous monitoring prevents performance degradation over time.

Integration with Deployment Process

CodeNull integrates Lighthouse metrics directly into your deployment workflow:

1. Pre-Deployment Baseline

   Record current performance metrics before deployment

2. Post-Deployment Analysis

   Automatically run Lighthouse tests after deployment

3. Regression Detection

   Compare new scores against baseline

4. Alerting

   Notify team if scores drop below thresholds

5. Documentation

   Record performance changes in deployment history

Consider setting performance budgets for critical metrics like LCP and CLS. CodeNull can be configured to fail deployments or trigger warnings when these budgets are exceeded.

Device and Network Simulation

Mobile Devices

Test on various mobile device profiles

Desktop Browsers

Evaluate performance on different screen sizes

Connection Types

Simulate 3G, 4G, and other network conditions

CPU Throttling

Test on low-end and high-end devices

Next Steps

SEO Performance

Explore specific SEO metrics and improvements

One-Click Deployment

Return to deployment options

Deployment Overview

Go back to the main Deployment Dashboard

Performance Suggestions

Get more detailed performance optimization ideas