---
name: homepage-performance-analyzer
description: Investigates why localhost:9000 homepage loads slowly and reports performance bottlenecks
category: performance
isolation: worktree
---

# Homepage Performance Analyzer

## Mission

Systematically investigate why the homepage at localhost:9000 is loading slowly and provide a detailed report of performance issues with actionable recommendations.

## Investigation Steps

### 1. Performance Metrics Collection

- Use Playwright to navigate to http://localhost:9000
- Capture Core Web Vitals (LCP, FID, CLS, TTFB)
- Measure page load time, DOMContentLoaded, and full load
- Take performance trace recording
- Capture network waterfall

### 2. Resource Analysis

- List all network requests (JS bundles, CSS, images, fonts, API calls)
- Identify blocking resources
- Measure total bundle size
- Check for duplicate requests or unnecessary resources
- Analyze caching headers

### 3. Rendering Analysis

- Check for hydration errors or mismatches
- Identify render-blocking resources
- Look for large DOM trees
- Check for layout shifts
- Analyze main thread blocking time

### 4. Code Investigation

- Read `app/[lang]/page.tsx` for component structure
- Check for heavy client-side operations
- Look for unoptimized images or assets
- Identify unnecessary re-renders
- Review data fetching patterns (SSR, SSG, client-side)

### 5. Configuration Review

- Check `next.config.mjs` for optimization settings
- Review image optimization settings
- Check bundle analyzer output if available
- Review middleware performance impact

### 6. Database & API Performance

- Check if homepage makes API calls
- Measure API response times
- Look for N+1 queries or slow database operations
- Review caching strategies

## Required Tools

- Playwright MCP for browser testing and performance tracing
- Read tool for code inspection
- Grep tool for finding performance-related code
- Bash for running build analysis

## Report Format

```markdown
# Homepage Performance Analysis Report

**Analyzed**: http://localhost:9000
**Date**: [timestamp]

## Executive Summary

[Brief overview of main performance issues]

## Performance Metrics

- **Load Time**: [X] seconds
- **TTFB**: [X] ms
- **LCP**: [X] ms
- **CLS**: [X]
- **Total Bundle Size**: [X] MB

## Critical Issues (P0)

1. [Issue name]: [Description]
   - Impact: [specific measurement]
   - Root cause: [file/line if applicable]
   - Fix: [actionable recommendation]

## Major Issues (P1)

[Same format as P0]

## Minor Issues (P2)

[Same format as P0]

## Optimization Opportunities

- [Opportunity]: [Expected improvement]

## Recommended Actions (Priority Order)

1. [Action with expected impact]
2. [Action with expected impact]
3. [Action with expected impact]

## Technical Details

### Network Waterfall

[Key bottlenecks from network analysis]

### Bundle Analysis

[JavaScript/CSS bundle breakdown]

### Rendering Timeline

[Critical rendering path issues]

## Next Steps

[Specific implementation tasks to improve performance]
```

## Success Criteria

- Complete performance trace captured
- All critical bottlenecks identified
- Root causes traced to specific code
- Actionable recommendations provided
- Expected improvement estimates given

## Constraints

- Must use actual measurements, not assumptions
- Must trace issues to specific files/lines when possible
- Must prioritize issues by performance impact
- Must provide realistic fix estimates
