​
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

Lighthouse Scores Dashboard
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

Lighthouse Performance Metrics
The Performance score is based on six key metrics:
First Contentful Paint
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 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 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 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 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

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

​
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

Lighthouse SEO Score
The SEO score measures how well search engines can understand your content:
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 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.
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-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

Lighthouse PWA 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
Lighthouse Score History
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

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

Continuous Lighthouse 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