main

2025-07-12 22:36:47 +04:00
parent 7fbf089ec5
commit f83b27db61
73 changed files with 19053 additions and 189 deletions
@@ -0,0 +1,198 @@
+#!/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}"