Performance Testing

Lighthouse Scores

The Solar Flare website consistently achieves exceptional Lighthouse scores:

Current Scores

-- Performance: 96 ⚡

Accessibility: 100 ♿
Best Practices: 100 🔒
SEO: 100 🎯

Core Web Vitals

All metrics are in the "Good" range:

First Contentful Paint (FCP): < 400ms
Largest Contentful Paint (LCP): ~1.2s
Cumulative Layout Shift (CLS): < 0.01
Total Blocking Time (TBT): < 300ms
Time to Interactive (TTI): < 3.5s

What This Means

Fast: Content appears almost instantly
Smooth: No layout shifts or janky interactions
Accessible: Works perfectly for all users
Optimized: Best-in-class search engine visibility

Tested and verified for excellence ✓

Performance metrics (FCP, LCP, TTI, TBT, CLS)
Accessibility compliance (WCAG standards)
SEO best practices
Security best practices
Progressive Web App capabilities

Common Issues and Solutions

Issue: "NO_FCP" Error (No First Contentful Paint)

Symptoms:

Lighthouse fails with NO_FCP error
Performance score shows as 0 or very low (< 50)
Page appears to not render in headless Chrome

Causes:

Missing Chrome system dependencies
Incorrect Chrome flags for headless mode
Server not starting properly
Build artifacts missing or incorrect

Solutions:

1. Missing System Dependencies (CI/CD)

The GitHub Actions workflow automatically installs these dependencies:

bash

sudo apt-get install -y \
  libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 \
  libcups2 libdrm2 libdbus-1-3 libxkbcommon0 \
  libxcomposite1 libxdamage1 libxfixes3 libxrandr2 \
  libgbm1 libpango-1.0-0 libcairo2 libasound2t64 \
  libatspi2.0-0 fonts-liberation

Note: On Ubuntu 24.04+, use libasound2t64 instead of libasound2 (time64 ABI transition).

2. Chrome Flags Configuration

The lighthouserc.json includes critical flags for headless Chrome:

json

"chromeFlags": [
  "--headless=new",        // Use new headless mode
  "--no-sandbox",          // Required for CI/CD
  "--disable-dev-shm-usage",  // Prevent /dev/shm issues
  "--disable-gpu",         // Disable GPU hardware acceleration
  "--disable-software-rasterizer"  // Prevent software rendering issues
]

3. Server Startup Issues

If the server doesn't start properly:

Check startServerReadyPattern matches server output
Increase startServerReadyTimeout if needed
Verify dist/ folder exists and contains built files
Check that node server.js starts correctly

4. Build Issues

Ensure the build completes successfully:

bash

# Build the application
npm run build

# Verify dist folder exists
ls -la dist/

# Check that index.html exists
cat dist/index.html

# Verify assets are present
ls -la dist/assets/

Issue: Low Performance Score (< 85)

Common Causes:

Large JavaScript bundles
- Solution: Use code splitting, lazy loading
- Check bundle analysis: npm run build:analyze
Unoptimized images
- Solution: Use WebP format, proper sizing, lazy loading
- Tools: imagemin, sharp
Too many requests
- Solution: Combine resources, use HTTP/2
- Review network waterfall in Lighthouse report
Render-blocking resources
- Solution: Inline critical CSS, defer non-critical JS
- Use async or defer for scripts
Third-party scripts
- Solution: Lazy load analytics, ads
- Use requestIdleCallback for non-critical scripts

Issue: Low Accessibility Score (< 95)

Common Causes:

Missing alt text on images
- Solution: Add descriptive alt attributes
Poor color contrast
- Solution: Use WCAG AA compliant colors (4.5:1 ratio)
- Tool: Chrome DevTools Contrast Checker
Missing ARIA labels
- Solution: Add aria-label or aria-labelledby
Improper heading hierarchy
- Solution: Use proper h1 → h6 order
Form inputs without labels
- Solution: Associate <label> with inputs

Issue: Flaky Scores (Inconsistent Results)

Causes:

Network variability
CPU throttling differences
Background processes
Cache state

Solutions:

Increase number of runs in lighthouserc.json:
json
```
"numberOfRuns": 5
```
1
Use consistent testing environment:
- Desktop settings for development
- Mobile settings for production validation
Check for race conditions:
- Ensure all resources load deterministically
- Avoid time-based animations during page load

Disable animations during Lighthouse:

css

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

Local Debugging

View Detailed Reports

After running Lighthouse locally:

bash

# View the HTML report
open .lighthouseci/lhr-*.html

# View JSON results
cat .lighthouseci/lhr-*.json | jq .

Test Specific URLs

Modify lighthouserc.json temporarily:

json

"url": [
  "http://localhost:3001",
  "http://localhost:3001/about",
  "http://localhost:3001/music"
]

Debug Server Issues

bash

# Start the server manually
npm run build
node server.js

# In another terminal, test the endpoint
curl http://localhost:3001
curl http://localhost:3001/health

# Check Chrome can access it
google-chrome-stable --headless --disable-gpu --dump-dom http://localhost:3001

Verify Chrome Installation

bash

# Check Chrome version
google-chrome-stable --version

# Test headless mode
google-chrome-stable --headless --disable-gpu --screenshot http://localhost:3001

# Check for missing dependencies
ldd $(which google-chrome-stable) | grep "not found"

Configuration Files

lighthouserc.json

Main configuration file for Lighthouse CI:

collect: How to gather data (URLs, Chrome flags, server settings)
assert: Performance thresholds and assertions
upload: Where to store results

GitHub Actions Workflow

Location: .github/workflows/ci-cd.yml

The lighthouse job:

Installs system dependencies
Builds the application
Runs Lighthouse CI
Uploads results

Performance Optimization Tips

1. Code Splitting

javascript

// Use dynamic imports
const Component = lazy(() => import('./Component'));

2. Image Optimization

html

<!-- Use WebP with fallback -->
<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

3. Lazy Loading

javascript

// Lazy load components
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

4. Resource Hints

html

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

5. Critical CSS

Inline critical CSS in the <head> and defer non-critical styles:

html

<style>
  /* Critical CSS here */
</style>
<link
  rel="preload"
  href="/styles/non-critical.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>

Monitoring and Alerts

GitHub PR Comments

Lighthouse CI automatically posts results to pull requests with:

Score comparison vs. base branch
Link to detailed report
Warning/error indicators

Temporary Public Storage

Results are uploaded to temporary public storage:

Accessible for 7 days
Shareable link for team review
No authentication required

Setting Up LHCI Server (Optional)

For persistent storage and historical trends:

bash

# Install LHCI server
npm install -g @lhci/server

# Initialize database
lhci server --storage.sqlDatabasePath=./lhci.db

# Configure in lighthouserc.json
{
  "ci": {
    "upload": {
      "target": "lhci",
      "serverBaseUrl": "https://your-lhci-server.com"
    }
  }
}

Resources

Troubleshooting Checklist

Before raising an issue, verify:

[ ] Build completes successfully (npm run build)
[ ] Server starts correctly (node server.js)
[ ] Chrome dependencies installed (CI/CD only)
[ ] Environment variables set correctly
[ ] dist/ folder contains built assets
[ ] No JavaScript errors in browser console
[ ] Network requests complete successfully
[ ] Lighthouse version is up to date

Getting Help

If you're still experiencing issues:

Check the Lighthouse CI GitHub Issues
Review recent commits for configuration changes
Compare with successful runs in CI/CD history
Run locally to isolate CI/CD-specific issues
Check Chrome version compatibility

Maintenance

Updating Lighthouse

bash

# Update to latest version
npm update @lhci/cli

# Verify version
npx lhci --version

Updating Chrome Flags

Chrome flags change over time. Stay updated:

Review Chrome Release Notes
Test new headless mode features
Remove deprecated flags

Adjusting Thresholds

As the site improves, increase thresholds:

json

{
  "assert": {
    "assertions": {
      "categories:performance": ["error", { "minScore": 0.9 }],
      "categories:accessibility": ["error", { "minScore": 0.98 }]
    }
  }
}

Performance Testing ​

Lighthouse Scores ​

Current Scores ​

Core Web Vitals ​

What This Means ​

Common Issues and Solutions ​

Issue: "NO_FCP" Error (No First Contentful Paint) ​

1. Missing System Dependencies (CI/CD) ​

2. Chrome Flags Configuration ​

3. Server Startup Issues ​

4. Build Issues ​

Issue: Low Performance Score (< 85) ​

Issue: Low Accessibility Score (< 95) ​

Issue: Flaky Scores (Inconsistent Results) ​

Local Debugging ​

View Detailed Reports ​

Test Specific URLs ​

Debug Server Issues ​

Verify Chrome Installation ​

Configuration Files ​

lighthouserc.json ​

GitHub Actions Workflow ​

Performance Optimization Tips ​

1. Code Splitting ​

2. Image Optimization ​

3. Lazy Loading ​

4. Resource Hints ​

5. Critical CSS ​

Monitoring and Alerts ​

GitHub PR Comments ​

Temporary Public Storage ​

Setting Up LHCI Server (Optional) ​

Resources ​

Troubleshooting Checklist ​

Getting Help ​

Maintenance ​

Updating Lighthouse ​

Updating Chrome Flags ​

Adjusting Thresholds ​

Performance Testing

Lighthouse Scores

Current Scores

Core Web Vitals

What This Means

Common Issues and Solutions

Issue: "NO_FCP" Error (No First Contentful Paint)

1. Missing System Dependencies (CI/CD)

2. Chrome Flags Configuration

3. Server Startup Issues

4. Build Issues

Issue: Low Performance Score (< 85)

Issue: Low Accessibility Score (< 95)

Issue: Flaky Scores (Inconsistent Results)

Local Debugging

View Detailed Reports

Test Specific URLs

Debug Server Issues

Verify Chrome Installation

Configuration Files

lighthouserc.json

GitHub Actions Workflow

Performance Optimization Tips

1. Code Splitting

2. Image Optimization

3. Lazy Loading

4. Resource Hints

5. Critical CSS

Monitoring and Alerts

GitHub PR Comments

Temporary Public Storage

Setting Up LHCI Server (Optional)

Resources

Troubleshooting Checklist

Getting Help

Maintenance

Updating Lighthouse

Updating Chrome Flags

Adjusting Thresholds