> ## Documentation Index
> Fetch the complete documentation index at: https://shivamgoyal.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lighthouse-dashboard.png" alt="Lighthouse Scores Dashboard" />
</Frame>

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

<CardGroup cols={2}>
  <Card title="Performance" icon="gauge-high">
    Measures how quickly your application loads and becomes interactive
  </Card>

  <Card title="Accessibility" icon="universal-access">
    Evaluates how well your site works for users with disabilities
  </Card>

  <Card title="Best Practices" icon="code">
    Checks for modern web development best practices
  </Card>

  <Card title="SEO" icon="magnifying-glass">
    Assesses how well search engines can understand your site
  </Card>

  <Card title="PWA" icon="mobile-screen">
    Evaluates Progressive Web App capabilities
  </Card>
</CardGroup>

## Performance Score Breakdown

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lighthouse-performance.png" alt="Lighthouse Performance Metrics" />
</Frame>

The Performance score is based on six key metrics:

<AccordionGroup>
  <Accordion title="First Contentful Paint (FCP)">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/fcp-metric.png" alt="First Contentful Paint" />
    </Frame>

    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.
  </Accordion>

  <Accordion title="Largest Contentful Paint (LCP)">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lcp-metric.png" alt="Largest Contentful Paint" />
    </Frame>

    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.
  </Accordion>

  <Accordion title="Total Blocking Time (TBT)">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/tbt-metric.png" alt="Total Blocking Time" />
    </Frame>

    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.
  </Accordion>

  <Accordion title="Cumulative Layout Shift (CLS)">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/cls-metric.png" alt="Cumulative Layout Shift" />
    </Frame>

    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.
  </Accordion>

  <Accordion title="Speed Index">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/speed-index-metric.png" alt="Speed Index" />
    </Frame>

    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.
  </Accordion>

  <Accordion title="Time to Interactive (TTI)">
    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/tti-metric.png" alt="Time to Interactive" />
    </Frame>

    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.
  </Accordion>
</AccordionGroup>

## Accessibility Score Breakdown

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lighthouse-accessibility.png" alt="Lighthouse Accessibility Score" />
</Frame>

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

<Tabs>
  <Tab title="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.
  </Tab>

  <Tab title="Content">
    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.
  </Tab>

  <Tab title="Forms">
    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.
  </Tab>

  <Tab title="ARIA">
    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.
  </Tab>
</Tabs>

## Best Practices Score

<CardGroup cols={2}>
  <Card title="HTTPS Usage" icon="lock">
    Ensure secure connections for all resources
  </Card>

  <Card title="Browser Errors" icon="browser">
    Check for console errors and exceptions
  </Card>

  <Card title="Deprecated APIs" icon="code">
    Identify usage of outdated browser features
  </Card>

  <Card title="Image Optimization" icon="image">
    Verify proper image formats and sizes
  </Card>

  <Card title="Security Issues" icon="shield">
    Check for potential security vulnerabilities
  </Card>

  <Card title="User Experience" icon="user">
    Evaluate popups, notifications, and intrusive elements
  </Card>
</CardGroup>

## SEO Score Analysis

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lighthouse-seo.png" alt="Lighthouse SEO Score" />
</Frame>

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

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

## Progressive Web App Assessment

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lighthouse-pwa.png" alt="Lighthouse PWA Assessment" />
</Frame>

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

<CardGroup cols={2}>
  <Card title="Installability" icon="download">
    Check if your app can be installed on devices
  </Card>

  <Card title="Service Worker" icon="gears">
    Verify offline functionality and caching
  </Card>

  <Card title="Manifest" icon="file-code">
    Assess your web app manifest configuration
  </Card>

  <Card title="HTTPS" icon="lock">
    Confirm secure serving of all app resources
  </Card>

  <Card title="Splash Screen" icon="mobile-screen">
    Check for proper app loading experience
  </Card>

  <Card title="Offline Support" icon="wifi-slash">
    Validate functionality without internet connection
  </Card>
</CardGroup>

## Score History and Trending

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/lighthouse-history.png" alt="Lighthouse Score History" />
</Frame>

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

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/competitive-benchmarking.png" alt="Competitive Benchmarking" />
</Frame>

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

<CardGroup cols={2}>
  <Card title="Quick Wins" icon="bolt">
    High-impact improvements with minimal effort
  </Card>

  <Card title="Critical Issues" icon="triangle-exclamation">
    Problems significantly affecting your scores
  </Card>

  <Card title="Resource Optimization" icon="server">
    Suggestions for improved asset delivery
  </Card>

  <Card title="Code Improvement" icon="code">
    JavaScript and CSS optimization recommendations
  </Card>
</CardGroup>

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

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/shivamgoyal/images/continuous-monitoring.png" alt="Continuous Lighthouse Monitoring" />
</Frame>

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:

<Steps>
  <Step title="Pre-Deployment Baseline">
    Record current performance metrics before deployment
  </Step>

  <Step title="Post-Deployment Analysis">
    Automatically run Lighthouse tests after deployment
  </Step>

  <Step title="Regression Detection">
    Compare new scores against baseline
  </Step>

  <Step title="Alerting">
    Notify team if scores drop below thresholds
  </Step>

  <Step title="Documentation">
    Record performance changes in deployment history
  </Step>
</Steps>

<Tip>
  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.
</Tip>

## Device and Network Simulation

<CardGroup cols={2}>
  <Card title="Mobile Devices" icon="mobile">
    Test on various mobile device profiles
  </Card>

  <Card title="Desktop Browsers" icon="desktop">
    Evaluate performance on different screen sizes
  </Card>

  <Card title="Connection Types" icon="wifi">
    Simulate 3G, 4G, and other network conditions
  </Card>

  <Card title="CPU Throttling" icon="microchip">
    Test on low-end and high-end devices
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="SEO Performance" icon="magnifying-glass" href="/deployment-dashboard/seo-performance">
    Explore specific SEO metrics and improvements
  </Card>

  <Card title="One-Click Deployment" icon="rocket" href="/deployment-dashboard/oneclick-deployment">
    Return to deployment options
  </Card>

  <Card title="Deployment Overview" icon="gauge-high" href="/deployment-dashboard/overview">
    Go back to the main Deployment Dashboard
  </Card>

  <Card title="Performance Suggestions" icon="bolt" href="/frontend-dashboard/performance-suggestions">
    Get more detailed performance optimization ideas
  </Card>
</CardGroup>