#!/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}"