Netlify Performance Optimization Cookbook

<Steps>
  <Step title="Add the Pre-Built Agent">
    Visit the [Netlify Continuous AI Agent](https://continue.dev/continuedev/netlify-continuous-ai-agent) on Continue Mission Control and click **"Install Agent"** or run:
    
    ```bash
    cn --agent continuedev/netlify-continuous-ai-agent
    ```

    This agent includes:
    - **Built-in rules** for consistent formatting and error handling
    - **Netlify MCP** for more reliable API interactions
  </Step>

  <Step title="Verify Your Setup">
    The agent uses the Netlify MCP automatically and includes best practice rules for deployment and performance optimization.
  </Step>

  <Step title="Run Performance Analysis">
    From your project directory, run:
    ```bash
    cn "Analyze my Netlify site's performance and optimize it for better Core Web Vitals."
    ```

    That's it! The agent handles everything automatically.
  </Step>
</Steps>

<Info>
  **Why Use the Agent?** Results are more consistent and debugging is easier thanks to the Netlify MCP integration and pre-tested prompts. You can remix the agent later to customize it to your needs.
</Info>

1. Visit the bundle page on Continue Mission Control
2. Click **"Install Rules"**
3. Rules automatically apply to your agent

```bash
cn
# Then in TUI mode:
"Check my Netlify auth and list sites"
```

# Start cn in TUI mode
cn

# Then ask:
"Show my site's Core Web Vitals and build times"

Netlify automatically tracks: 
- **Build Performance**: Compile times, cache
hits 
- **Runtime Performance**: Core Web Vitals, Time to Interactive 
-  **Resource Usage**: Bandwidth, function execution times

# In cn TUI mode:
"Set up A/B test between main and feature branch on Netlify:
- Split traffic 50/50 between branches
- Track Core Web Vitals for each variant
- Monitor conversion metrics and bounce rate
- Enable analytics to measure performance impact
- Configure cookie-based visitor persistence
- Set test duration for 1000 unique visitors
- Auto-conclude test when statistical significance reached
Report winner based on performance + conversion metrics"

# In cn TUI mode:
"Optimize my Netlify build performance using these features:

1. Enable Netlify Cache Plugin for dependency caching
   - Configure @netlify/plugin-cache for node_modules
   - Set up custom cache directories for .next/cache or .nuxt
   - Enable Gatsby's incremental builds if applicable

2. Set up Build Plugins from Netlify's ecosystem:
   - Install @netlify/plugin-lighthouse for performance monitoring
   - Add netlify-plugin-checklinks to prevent broken links
   - Configure netlify-plugin-submit-sitemap for SEO

3. Implement Conditional Builds:
   - Skip builds when only docs change (ignore: /docs/**)
   - Use build.ignore script for custom logic
   - Set up monorepo-specific build triggers

4. Configure concurrent builds for monorepos
   - Set base directory per package
   - Use pnpm workspaces or yarn workspaces

Show me the netlify.toml configuration and explain each optimization"

# In cn TUI mode:
"Analyze and optimize my bundle using Netlify's tools:

1. Enable Netlify Bundle Analyzer:
   - Add @netlify/plugin-bundle-analyzer to plugins
   - Configure size thresholds in netlify.toml
   - Generate visual bundle reports

2. Set up Asset Optimization:
   - Enable automatic JS minification
   - Configure CSS optimization
   - Turn on HTML minification
   - Set up image processing pipeline

3. Implement Smart Code Splitting:
   - Analyze current chunks with the bundle analyzer
   - Identify components over 50KB for splitting
   - Configure webpack/vite for optimal chunking
   - Set up route-based code splitting

4. Configure Netlify's CDN for optimal delivery:
   - Set cache headers for static assets
   - Enable Brotli compression
   - Configure edge caching rules

Generate a full report with before/after bundle sizes"

**Features Available Through Netlify MCP**: 
- [Bundle
Analyzer](https://docs.netlify.com/configure-builds/build-plugins/bundle-analyzer/): Visualize your JavaScript bundles 
- [Asset
Optimization](https://docs.netlify.com/configure-builds/post-processing/):
Automatic minification and compression 
- [Edge
Network](https://docs.netlify.com/platform/edge-network/): Global CDN with
smart caching 
- [Deploy
Previews](https://docs.netlify.com/site-deploys/deploy-previews/): Test
optimizations before production

# In cn TUI mode:
"Set up Cloudinary image optimization for my Netlify site:
- Install @cloudinary/netlify-plugin via MCP
- Auto-convert images to WebP with fallbacks
- Generate responsive sizes (320w, 640w, 1024w, 1920w)
- Add lazy loading for all images
- Configure blur-up placeholders
- Update netlify.toml with Cloudinary settings
Target: Reduce image payload by 60-80% and improve LCP"

# In cn TUI mode:
"Set up Lighthouse CI with performance budgets for my Netlify site:

Requirements:
- LCP must be < 2.5 seconds
- JavaScript bundle must be < 200KB
- Total size < 500KB
- Performance score >= 90

Setup needed:
1. Install @lhci/cli and @netlify/plugin-lighthouse
2. Create lighthouserc.js with these budget assertions
3. Configure netlify.toml to run checks on all deploys
4. Add GitHub status checks to block PRs that exceed budgets
5. Create performance dashboard at /lighthouse-reports

Please configure the complete Lighthouse CI setup with these budgets."

# In cn TUI mode:
"Set up comprehensive Real User Monitoring for my Netlify site:

1. Configure Netlify Analytics Pro (requires Pro account):
   - Set up server-side analytics (no JS required)
   - Track Core Web Vitals (LCP, FID, CLS, INP)
   - Monitor top pages by performance score
   - Create custom performance alerts
   - Configure weekly performance reports

2. Integrate Web Vitals tracking:
   - Install web-vitals library for detailed metrics
   - Send metrics to Netlify Functions endpoint
   - Store performance data in Netlify Blobs
   - Create performance dashboard at /metrics

3. Set up Performance Alerts:
   - Alert when P75 LCP > 3 seconds
   - Notify if CLS increases by 20%
   - Monitor JavaScript error rates
   - Track 404s and broken resources
   - Send alerts to Slack via Netlify Functions

4. Configure Geographic Performance Monitoring:
   - Use Netlify Edge Functions to track region-specific metrics
   - Identify slow regions with Edge geo data
   - Compare performance across CDN nodes
   - Optimize edge caching for slow regions

5. Create Custom Performance Dashboard:
   - Build dashboard page using Netlify Functions
   - Display real-time Core Web Vitals
   - Show performance trends over time
   - Include browser and device breakdowns

Show me the complete implementation with all code and configurations"

**Pro Tip**
Combine Netlify Analytics with Edge Functions to create a
powerful RUM solution that: 
- Tracks performance by user segment 
- A/B tests
performance optimizations 
- Personalizes content based on connection speed 
- Automatically serves lighter assets to slow connections

name: Performance Check

on:
  pull_request:

jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "22"

      - name: Install Continue CLI
        run: |
          npm install -g @continuedev/cli
          echo "✅ Continue CLI installed"

      - name: Authenticate Continue CLI
        env:
          CONTINUE_API_KEY: ${{ secrets.CONTINUE_API_KEY }}
        run: |
          cn auth login --api-key "$CONTINUE_API_KEY"
          echo "✅ Continue CLI authenticated"

      - name: Deploy and Test Performance
        id: perf
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        run: |
          echo "🚀 Deploying PR preview and analyzing performance..."
          cn -p "Deploy PR preview and run Lighthouse.
                 Compare scores with main branch.
                 Output JSON with score deltas." > performance.json

      - name: Comment Performance Results
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const perf = JSON.parse(fs.readFileSync('performance.json'));

            const emoji = perf.score_delta < -10 ? '🔴' :
                         perf.score_delta < 0 ? '🟡' : '🟢';

            const comment = `## ${emoji} Performance Impact

            | Metric | Main | PR | Delta |
            |--------|------|----|---------|
            | Performance Score | ${perf.main_score} | ${perf.pr_score} | ${perf.score_delta > 0 ? '+' : ''}${perf.score_delta} |
            | LCP | ${perf.main_lcp}s | ${perf.pr_lcp}s | ${perf.lcp_delta > 0 ? '+' : ''}${perf.lcp_delta}s |
            | Bundle Size | ${perf.main_bundle}KB | ${perf.pr_bundle}KB | ${perf.bundle_delta > 0 ? '+' : ''}${perf.bundle_delta}KB |

            ${perf.score_delta < -10 ? '⚠️ **This PR significantly degrades performance. Please optimize before merging.**' : ''}

            [View Full Report](${perf.report_url})`;

            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: comment
            });

            // Fail check if performance degrades significantly
            if (perf.score_delta < -10) {
              core.setFailed('Performance degraded by more than 10 points');
            }

# In cn TUI mode:
"Run production build and measure bundle sizes"

# In cn TUI mode:
"Add pre-commit hooks for bundle size limits"

# In cn TUI mode:
"Why did my performance score drop?"

You've built an AI-powered performance optimization system that: 
- Automatically monitors Core Web Vitals 
- Runs A/B tests between branches 
- Blocks deployments that degrade performance 
- Provides actionable optimization
suggestions

  **[Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/)**
  - Run code at the edge, closer to users
  - Transform responses on-the-fly
  - A/B test at the edge level
  - Personalize content without client-side JS

**[Netlify Graph](https://docs.netlify.com/graph/overview/)** 
- Unified GraphQL gateway for all your APIs 
- Automatic TypeScript generation 
- Built-in authentication handling 
- Zero client-side API keys needed

# Try these advanced features in cn TUI mode:
"Show me how to use Netlify Edge Functions for geo-based personalization"
"Set up On-Demand Builders for my blog with 5000 posts"
"Configure Background Functions for image processing"

# In cn TUI mode:
"Implement progressive enhancement with basic HTML first"

# In cn TUI mode:
"Test 3 bundle strategies and auto-select winner"

# In cn TUI mode:
"Analyze navigation patterns and prefetch next pages"