# Netlify Performance Optimization Agent ## Context You're analyzing a pull request to ensure it doesn't degrade website performance. You have access to Netlify's deployment system and GitHub. ## Step-by-Step Process ### 1. Retrieve Deployment Information ```bash # Get PR deploy preview URL netlify deploy:list --site $NETLIFY_SITE_ID --json | jq -r '.[] | select(.context=="deploy-preview") | .url' # Get production URL netlify site:info --json | jq -r '.url' ``` ### 2. Run Lighthouse Audits For both URLs, run comprehensive Lighthouse tests: ```bash # Install lighthouse-cli if needed lighthouse <URL> \ --output=json \ --output-path=./lighthouse-<branch>.json \ --only-categories=performance,accessibility,best-practices,seo \ --chrome-flags="--headless --no-sandbox" ``` ### 3. Compare Results Calculate deltas for: - **Performance Score** (0-100) - **First Contentful Paint** (FCP) - **Largest Contentful Paint** (LCP) - **Total Blocking Time** (TBT) - **Cumulative Layout Shift** (CLS) - **Speed Index** ### 4. Analyze Bundle Impact ```bash # Check bundle sizes curl -s <preview-url>/_next/static/ | grep -o '[0-9]*\.js' | xargs -I {} du -h {} ``` ### 5. Generate GitHub Comment Format your comment as follows: #### 📊 Performance Impact Analysis | Metric | Production | PR Preview | Change | |--------|-----------|------------|--------| | Performance | 95 | 87 | 🔴 -8 | | Accessibility | 100 | 100 | ✅ 0 | | Best Practices | 92 | 92 | ✅ 0 | | SEO | 100 | 100 | ✅ 0 | #### 🎯 Core Web Vitals | Metric | Production | PR Preview | Change | Status | |--------|-----------|------------|--------|--------| | LCP | 1.2s | 2.8s | +1.6s | ❌ Regression | | CLS | 0.05 | 0.05 | 0 | ✅ Good | | TBT | 150ms | 450ms | +300ms | ⚠️ Warning | #### 🔍 Issues Detected **🔴 Critical (2)** 1. **Large JavaScript bundle** - File: `src/components/Dashboard.tsx` - Size increase: +245KB - Recommendation: Code-split the dashboard component ```tsx // Use dynamic imports const Dashboard = dynamic(() => import('./Dashboard'), { loading: () => <DashboardSkeleton /> }) ``` 2. **Unoptimized images** - Files: `public/hero-*.jpg` (3 images) - Total: 2.4MB uncompressed - Recommendation: Use Next.js Image with WebP format ```tsx import Image from 'next/image' <Image src="/hero-main.jpg" width={1920} height={1080} quality={85} priority /> ``` **⚠️ Warnings (1)** 3. **Render-blocking CSS** - File: `styles/animations.css` (124KB) - Recommendation: Move critical CSS inline or defer non-critical styles #### 📈 Recommendations 1. **Immediate Actions:** - Lazy-load off-screen components - Compress images using WebP/AVIF - Remove unused CSS (estimated 40KB savings) 2. **Bundle Optimization:** ```bash # Analyze bundle composition npm run analyze # Consider removing heavy dependencies: - moment.js → date-fns (saves 67KB) - lodash → lodash-es with tree-shaking ``` 3. **Caching Strategy:** ```js // netlify.toml [[headers]] for = "/*.js" [headers.values] Cache-Control = "public, max-age=31536000, immutable" ``` #### 🎯 Overall Impact: ❌ Performance Regression (-8 points) **Verdict:** This PR introduces performance regressions that should be addressed before merging. The primary concerns are increased bundle size and unoptimized images. --- *Powered by Continuous AI • [View detailed report](./performance-report.json)* ``` ### 6. Save Artifacts ```bash # Create JSON report cat > performance-report.json << EOF { "pr_number": "${PR_NUMBER}", "commit_sha": "${COMMIT_SHA}", "timestamp": "$(date -u +%Y-%m-%dT%H:%M:%SZ)", "scores": { "production": { ... }, "preview": { ... }, "deltas": { ... } }, "recommendations": [ ... ] } EOF # Upload as GitHub artifact gh pr comment $PR_NUMBER --body-file comment.md ``` ## Decision Logic **Merge Recommendation:** - ✅ **Approve:** Performance delta < -5 OR improvements > +5 - ⚠️ **Review:** Performance delta between -5 and -15 - ❌ **Block:** Performance delta > -15 OR Critical accessibility issues ## Error Handling If Lighthouse fails: 1. Retry up to 3 times with exponential backoff 2. If preview deploy isn't ready, wait up to 5 minutes 3. Post a comment explaining the failure and manual testing steps ``` ## Example Usage Script ```bash scripts/run-performance-check.sh #!/bin/bash set -e PR_NUMBER=$1 PREVIEW_URL=$(netlify deploy:list --site $NETLIFY_SITE_ID --json | \ jq -r ".[] | select(.context==\"deploy-preview/$PR_NUMBER\") | .url") echo "🔍 Running performance analysis for PR #$PR_NUMBER" echo "Preview: $PREVIEW_URL" # Run lighthouse lighthouse $PREVIEW_URL \ --output=json \ --output-path=./preview-lighthouse.json \ --chrome-flags="--headless" # Parse and analyze results node scripts/analyze-lighthouse.js \ --preview ./preview-lighthouse.json \ --production ./baseline-lighthouse.json \ --output ./performance-report.json # Post to GitHub gh pr comment $PR_NUMBER \ --body-file ./performance-comment.md