unai/lighthouse-test.sh

#!/bin/bash
set -e

echo "🚀 Running Lighthouse Performance Audit..."

# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color

# Check if Lighthouse is installed
if ! command -v lighthouse &> /dev/null; then
    echo -e "${YELLOW}⚠️  Lighthouse CLI not found. Installing...${NC}"
    npm install -g @lhci/cli lighthouse
fi

# Create reports directory
mkdir -p lighthouse-reports

# Base URL for testing
BASE_URL="http://localhost:3000"

# Check if the development server is running
echo -e "${BLUE}📡 Checking if development server is running...${NC}"
if ! curl -s "$BASE_URL" > /dev/null; then
    echo -e "${RED}❌ Development server not running. Please start with 'npm run dev' first.${NC}"
    exit 1
fi

echo -e "${GREEN}✅ Development server is running${NC}"

# Pages to test
declare -a pages=(
    "/"
    "/dashboard"
    "/accessibility"
    "/wellbeing"
    "/admin"
    "/privacy"
)

# Run Lighthouse tests for each page
for page in "${pages[@]}"; do
    echo -e "${BLUE}🔍 Testing: $BASE_URL$page${NC}"
    
    # Generate filename-safe name
    filename=$(echo "$page" | sed 's/\//_/g')
    if [ "$filename" = "_" ]; then
        filename="homepage"
    fi
    
    # Run Lighthouse audit
    lighthouse "$BASE_URL$page" \
        --output=html \
        --output-path="lighthouse-reports/${filename}.html" \
        --quiet \
        --chrome-flags="--headless --no-sandbox --disable-dev-shm-usage" \
        --throttling-method=devtools \
        --form-factor=desktop \
        --preset=desktop
    
    echo -e "${GREEN}✅ Completed: ${filename}.html${NC}"
done

# Run mobile tests for key pages
echo -e "${YELLOW}📱 Running mobile performance tests...${NC}"
declare -a mobile_pages=(
    "/"
    "/dashboard"
)

for page in "${mobile_pages[@]}"; do
    echo -e "${BLUE}🔍 Mobile Testing: $BASE_URL$page${NC}"
    
    filename=$(echo "$page" | sed 's/\//_/g')
    if [ "$filename" = "_" ]; then
        filename="homepage"
    fi
    
    lighthouse "$BASE_URL$page" \
        --output=html \
        --output-path="lighthouse-reports/${filename}-mobile.html" \
        --quiet \
        --chrome-flags="--headless --no-sandbox --disable-dev-shm-usage" \
        --throttling-method=devtools \
        --form-factor=mobile \
        --preset=mobile
    
    echo -e "${GREEN}✅ Completed: ${filename}-mobile.html${NC}"
done

# Generate summary report
echo -e "${BLUE}📊 Generating summary report...${NC}"

cat > lighthouse-reports/README.md << 'EOF'
# Lighthouse Performance Reports

This directory contains Lighthouse performance audit reports for the University Portal application.

## Reports Generated

### Desktop Reports
- `homepage.html` - Landing page performance
- `_dashboard.html` - Student dashboard performance
- `_accessibility.html` - Accessibility tools page
- `_wellbeing.html` - Mental health page
- `_admin.html` - Admin dashboard performance
- `_privacy.html` - Privacy policy page

### Mobile Reports
- `homepage-mobile.html` - Landing page mobile performance
- `_dashboard-mobile.html` - Student dashboard mobile performance

## How to View Reports

1. Open any `.html` file in your browser
2. Review the performance metrics:
   - **Performance Score**: Overall performance rating
   - **Accessibility**: WCAG compliance and accessibility features
   - **Best Practices**: Security, modern web standards
   - **SEO**: Search engine optimization
   - **PWA**: Progressive Web App features

## Key Metrics to Review

### Performance
- First Contentful Paint (FCP) - should be < 2.5s
- Largest Contentful Paint (LCP) - should be < 4.0s
- Cumulative Layout Shift (CLS) - should be < 0.25
- Time to Interactive (TTI) - should be < 5.0s

### Accessibility
- Color contrast ratios
- ARIA attributes
- Alt text for images
- Keyboard navigation

### Best Practices
- HTTPS usage
- Image optimization
- JavaScript and CSS minification
- Security headers

## Improvement Recommendations

Common optimizations based on Lighthouse findings:

1. **Image Optimization**
   - Use next/image component for automatic optimization
   - Convert to WebP format
   - Implement lazy loading

2. **JavaScript Optimization**
   - Code splitting with dynamic imports
   - Remove unused code
   - Minimize bundle size

3. **CSS Optimization**
   - Remove unused CSS
   - Minimize critical CSS
   - Use CSS variables

4. **Caching Strategy**
   - Implement service worker
   - Set appropriate cache headers
   - Use CDN for static assets

## Automated Testing

To run these tests automatically:

```bash
# Run full test suite
./lighthouse-test.sh

# Run specific page
lighthouse http://localhost:3000/dashboard --view
```

---

Generated on: $(date)
EOF

echo -e "${GREEN}🎉 Lighthouse audit complete!${NC}"
echo -e "${BLUE}📋 Reports saved to: lighthouse-reports/${NC}"
echo -e "${YELLOW}💡 Open lighthouse-reports/README.md for details${NC}"

# Display summary
echo -e "\n${BLUE}═══════════════════════════════════════${NC}"
echo -e "${BLUE}         LIGHTHOUSE AUDIT SUMMARY        ${NC}"
echo -e "${BLUE}═══════════════════════════════════════${NC}"
echo -e "${GREEN}✅ Desktop Reports: $(ls lighthouse-reports/*[!-mobile].html 2>/dev/null | wc -l | tr -d ' ')${NC}"
echo -e "${GREEN}✅ Mobile Reports: $(ls lighthouse-reports/*-mobile.html 2>/dev/null | wc -l | tr -d ' ')${NC}"
echo -e "${YELLOW}📁 Total Files: $(ls lighthouse-reports/*.html 2>/dev/null | wc -l | tr -d ' ')${NC}"
echo -e "${BLUE}═══════════════════════════════════════${NC}"