AI Agent 如何提高网站速度｜附源码

在过去，网站性能优化往往依赖工程师手动排查：打开 Lighthouse、查看 Network 面板、分析瀑布图、定位慢接口、压缩图片、调整缓存策略……这些工作并不复杂，但非常琐碎，而且容易因为业务迭代被忽视。

随着 AI Agent 的出现，网站性能优化正在从“人工经验驱动”逐渐走向“智能自动化驱动”。AI Agent 不只是回答问题的聊天机器人，它可以调用工具、读取页面、分析数据、生成报告，甚至自动提交优化建议和代码补丁。

本文将围绕一个实际问题展开：如何使用 AI Agent 提高网站速度？
我们会从原理、优化方向、系统架构、核心源码到落地建议进行完整讲解，并提供一个可运行的简化版源码示例。

一、为什么网站速度如此重要？

网站速度不仅影响用户体验，也直接影响业务指标。

对于一个普通网站来说，页面加载时间每增加 1 秒，可能带来以下问题：

• 用户跳出率上升；
• 转化率下降；
• 搜索引擎排名下降；
• 移动端访问体验变差；
• 服务端资源浪费增加；
• 广告、支付、注册等关键流程完成率降低。

以电商网站为例，如果首页打开时间从 2 秒增加到 5 秒，用户可能还没看到商品就已经关闭页面。对于内容网站来说，首屏加载太慢会导致用户还没阅读文章就离开。

常见的网站性能指标包括：

传统性能优化依赖人工分析，而 AI Agent 可以帮助我们持续发现问题、定位原因并提出自动化优化方案。

二、AI Agent 在网站性能优化中的作用

AI Agent 可以理解为一个具备以下能力的智能执行体：

1. 感知能力：读取网站页面、性能报告、接口耗时、日志数据；
2. 分析能力：判断性能瓶颈来自前端、后端、网络还是资源加载；
3. 决策能力：根据规则和模型选择优化策略；
4. 执行能力：调用脚本、生成代码、修改配置、提交报告；
5. 迭代能力：对比优化前后结果，持续改进。

举个例子，一个网站首页加载很慢，AI Agent 可以自动完成以下流程：

访问目标 URL
        ↓
运行 Lighthouse 性能检测
        ↓
分析性能指标和资源加载情况
        ↓
识别问题：图片过大、JS 阻塞、接口慢、未启用缓存
        ↓
生成优化建议
        ↓
输出可执行代码或配置
        ↓
再次检测并对比结果

这意味着，AI Agent 不再只是“告诉你应该优化”，而是可以成为一个自动化性能工程师。

三、网站速度慢的常见原因

在设计 AI Agent 之前，我们需要先明确常见性能瓶颈。通常网站变慢有以下几类原因。

1. 图片资源过大

图片往往是页面体积最大的部分。常见问题包括：

• 使用 PNG/JPG 原图直接上线；
• 没有使用 WebP、AVIF 等现代格式；
• 没有按设备尺寸加载不同大小图片；
• 首屏大图未做预加载；
• 非首屏图片未做懒加载。

2. JavaScript 体积过大

现代前端项目中，JS 包体积过大非常常见，尤其是 React、Vue、Angular 项目。

常见问题包括：

• 打包文件过大；
• 第三方依赖过多；
• 没有按路由拆包；
• 首屏加载了非必要逻辑；
• 未启用 Tree Shaking；
• 同步脚本阻塞页面渲染。

3. CSS 阻塞渲染

CSS 是渲染阻塞资源。如果 CSS 文件过大或加载太慢，会延迟首屏渲染。

常见问题包括：

• 全站 CSS 一次性加载；
• 未提取关键 CSS；
• 未移除未使用样式；
• 字体文件阻塞渲染。

4. 服务端响应慢

服务端性能差会导致 TTFB 升高。常见原因包括：

• 数据库查询慢；
• 接口没有缓存；
• 服务端渲染耗时过高；
• 上游接口响应慢；
• 没有使用 CDN 或边缘缓存。

5. 缓存策略不合理

如果静态资源没有正确缓存，每次访问都需要重新下载，速度自然变慢。

常见问题包括：

• 未配置 Cache-Control；
• 静态资源没有 hash 文件名；
• HTML 和静态资源缓存策略混乱；
• CDN 回源频率过高。

四、AI Agent 的性能优化架构设计

一个用于网站速度优化的 AI Agent，可以设计为以下模块：

┌───────────────────────────┐
│        用户输入 URL         │
└─────────────┬─────────────┘
              ↓
┌───────────────────────────┐
│       性能检测模块          │
│ Lighthouse / Puppeteer     │
└─────────────┬─────────────┘
              ↓
┌───────────────────────────┐
│       数据分析模块          │
│ 指标解析 / 资源分类 / 规则匹配 │
└─────────────┬─────────────┘
              ↓
┌───────────────────────────┐
│       AI 推理模块           │
│ LLM 生成优化建议与代码       │
└─────────────┬─────────────┘
              ↓
┌───────────────────────────┐
│       执行模块              │
│ 压缩图片 / 修改配置 / 生成补丁 │
└─────────────┬─────────────┘
              ↓
┌───────────────────────────┐
│       报告模块              │
│ Markdown / JSON / HTML     │
└───────────────────────────┘

为了便于理解，本文提供一个简化版 AI Agent，实现以下能力：

• 输入网站 URL；
• 使用 Lighthouse 检测网站性能；
• 提取核心指标；
• 分析常见性能问题；
• 生成 Markdown 优化报告；
• 给出 Nginx 缓存配置、前端懒加载示例等源码建议。

五、项目准备

本文示例使用 Node.js 实现。你需要先安装以下环境：

• Node.js 18+
• Chrome 或 Chromium
• npm / pnpm / yarn

创建项目：

mkdir ai-speed-agent
cd ai-speed-agent
npm init -y

安装依赖：

npm install lighthouse chrome-launcher fs-extra

为了让 Node.js 支持 ES Module，在 package.json 中加入：

{
  "type": "module",
  "scripts": {
    "start": "node src/index.js"
  },
  "dependencies": {
    "chrome-launcher": "^1.1.2",
    "fs-extra": "^11.2.0",
    "lighthouse": "^12.0.0"
  }
}

创建目录：

mkdir src reports

六、核心源码：运行 Lighthouse 检测

新建文件：src/lighthouse-runner.js

import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

export async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless', '--no-sandbox']
  });

  const options = {
    logLevel: 'info',
    output: 'json',
    onlyCategories: ['performance'],
    port: chrome.port
  };

  try {
    const runnerResult = await lighthouse(url, options);
    const report = runnerResult.lhr;
    return report;
  } finally {
    await chrome.kill();
  }
}

这段代码做了三件事：

1. 启动一个无头 Chrome；
2. 使用 Lighthouse 访问目标网站；
3. 返回 Lighthouse JSON 报告。

Lighthouse 报告非常详细，里面包含性能评分、资源请求、诊断结果、优化建议等信息。AI Agent 的下一步就是从报告中提取关键指标。

七、核心源码：解析性能指标

新建文件：src/analyzer.js

export function analyzeReport(lhr) {
  const audits = lhr.audits;

  const metrics = {
    performanceScore: Math.round(lhr.categories.performance.score * 100),
    firstContentfulPaint: audits['first-contentful-paint']?.displayValue,
    largestContentfulPaint: audits['largest-contentful-paint']?.displayValue,
    totalBlockingTime: audits['total-blocking-time']?.displayValue,
    cumulativeLayoutShift: audits['cumulative-layout-shift']?.displayValue,
    speedIndex: audits['speed-index']?.displayValue,
    timeToInteractive: audits['interactive']?.displayValue
  };

  const opportunities = [];

  const rules = [
    {
      key: 'uses-optimized-images',
      title: '图片未充分优化',
      suggestion: '建议将 JPG/PNG 转换为 WebP 或 AVIF，并根据设备尺寸输出多规格图片。'
    },
    {
      key: 'uses-responsive-images',
      title: '未使用响应式图片',
      suggestion: '建议使用 srcset 和 sizes，让浏览器根据屏幕宽度选择合适图片。'
    },
    {
      key: 'offscreen-images',
      title: '非首屏图片未懒加载',
      suggestion: '建议为非首屏图片添加 loading="lazy"，减少首屏加载压力。'
    },
    {
      key: 'render-blocking-resources',
      title: '存在阻塞渲染资源',
      suggestion: '建议提取关键 CSS，延迟加载非关键 CSS 和 JS。'
    },
    {
      key: 'unused-javascript',
      title: '存在未使用 JavaScript',
      suggestion: '建议进行代码拆分、Tree Shaking，并移除不必要的第三方依赖。'
    },
    {
      key: 'uses-long-cache-ttl',
      title: '静态资源缓存时间不足',
      suggestion: '建议为带 hash 的静态资源配置长期缓存。'
    },
    {
      key: 'server-response-time',
      title: '服务端响应时间较慢',
      suggestion: '建议优化数据库查询、增加接口缓存，并考虑使用 CDN 或边缘渲染。'
    }
  ];

  for (const rule of rules) {
    const audit = audits[rule.key];

    if (!audit) continue;

    if (audit.score !== null && audit.score < 1) {
      opportunities.push({
        title: rule.title,
        score: audit.score,
        displayValue: audit.displayValue || '',
        suggestion: rule.suggestion
      });
    }
  }

  return {
    finalUrl: lhr.finalDisplayedUrl,
    fetchTime: lhr.fetchTime,
    metrics,
    opportunities
  };
}

这里我们通过规则匹配 Lighthouse 中的 audit 结果。当某项分数低于 1 时，就认为它存在优化空间。

当然，真实项目中可以做得更复杂，例如：

• 根据资源大小排序；
• 找出最大的 JS、CSS、图片文件；
• 结合服务端日志分析慢接口；
• 连接 Git 仓库自动定位源码文件；
• 让大模型根据上下文生成更精准的修改建议。

八、核心源码：生成优化建议

新建文件：src/recommender.js

export function generateRecommendations(analysis) {
  const recommendations = [];

  const score = analysis.metrics.performanceScore;

  if (score < 50) {
    recommendations.push({
      level: 'high',
      title: '整体性能较差，需要优先处理首屏资源和服务端响应',
      detail: '建议从图片压缩、JS 拆包、缓存配置、接口响应时间四个方向同时优化。'
    });
  } else if (score < 80) {
    recommendations.push({
      level: 'medium',
      title: '整体性能一般，存在明显优化空间',
      detail: '建议优先处理 Lighthouse 中影响 LCP 和 TBT 的问题。'
    });
  } else {
    recommendations.push({
      level: 'low',
      title: '整体性能较好，可以进行精细化优化',
      detail: '建议关注 CLS、字体加载、缓存命中率和边缘加速。'
    });
  }

  for (const item of analysis.opportunities) {
    recommendations.push({
      level: item.score < 0.5 ? 'high' : 'medium',
      title: item.title,
      detail: item.suggestion
    });
  }

  return recommendations;
}

这一层负责将检测结果转化为可读的优化建议。
如果你接入大语言模型，可以把 analysis 作为上下文传给模型，让它生成更细致的报告。

例如 Prompt 可以这样设计：

你是一个资深前端性能优化专家。
请根据以下 Lighthouse 分析结果，输出网站性能优化方案。
要求：
1. 按优先级排序；
2. 给出问题原因；
3. 给出可执行的代码示例；
4. 区分短期优化和长期优化；
5. 输出 Markdown 格式。

分析结果：
{{analysis_json}}

九、核心源码：生成 Markdown 报告

新建文件：src/report-generator.js

import fs from 'fs-extra';
import path from 'path';

export async function generateMarkdownReport(analysis, recommendations) {
  const fileName = `report-${Date.now()}.md`;
  const filePath = path.resolve('reports', fileName);

  const markdown = `# 网站性能优化报告

## 一、检测目标

- URL：${analysis.finalUrl}
- 检测时间：${analysis.fetchTime}

## 二、核心性能指标

| 指标 | 数值 |
|---|---|
| Performance Score | ${analysis.metrics.performanceScore} |
| First Contentful Paint | ${analysis.metrics.firstContentfulPaint || '-'} |
| Largest Contentful Paint | ${analysis.metrics.largestContentfulPaint || '-'} |
| Total Blocking Time | ${analysis.metrics.totalBlockingTime || '-'} |
| Cumulative Layout Shift | ${analysis.metrics.cumulativeLayoutShift || '-'} |
| Speed Index | ${analysis.metrics.speedIndex || '-'} |
| Time To Interactive | ${analysis.metrics.timeToInteractive || '-'} |

## 三、发现的问题

${analysis.opportunities.length === 0
  ? '暂未发现明显问题。'
  : analysis.opportunities.map((item, index) => {
    return `### ${index + 1}. ${item.title}

- 当前表现：${item.displayValue || '无'}
- 建议：${item.suggestion}
`;
  }).join('\n')}

## 四、优化建议

${recommendations.map((item, index) => {
  return `### ${index + 1}. ${item.title}

- 优先级：${item.level}
- 说明：${item.detail}
`;
}).join('\n')}

## 五、可参考代码

### 1. 图片懒加载

\`\`\`html

\`\`\`

### 2. 响应式图片

\`\`\`html

\`\`\`

### 3. 延迟加载 JavaScript

\`\`\`html

\`\`\`

### 4. Nginx 静态资源缓存配置

\`\`\`nginx
location ~* \\.(js|css|png|jpg|jpeg|gif|svg|webp|avif|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, max-age=31536000, immutable";
}
\`\`\`

### 5. Gzip 压缩配置

\`\`\`nginx
gzip on;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_types
  text/plain
  text/css
  application/javascript
  application/json
  application/xml
  image/svg+xml;
\`\`\`
`;

  await fs.ensureDir('reports');
  await fs.writeFile(filePath, markdown, 'utf-8');

  return filePath;
}

十、核心源码：入口文件

新建文件：src/index.js

import { runLighthouse } from './lighthouse-runner.js';
import { analyzeReport } from './analyzer.js';
import { generateRecommendations } from './recommender.js';
import { generateMarkdownReport } from './report-generator.js';

async function main() {
  const url = process.argv[2];

  if (!url) {
    console.error('请传入目标 URL，例如：npm start https://example.com');
    process.exit(1);
  }

  console.log(`开始检测网站：${url}`);

  const lhr = await runLighthouse(url);

  console.log('Lighthouse 检测完成，开始分析报告...');

  const analysis = analyzeReport(lhr);
  const recommendations = generateRecommendations(analysis);
  const reportPath = await generateMarkdownReport(analysis, recommendations);

  console.log('性能优化报告已生成：');
  console.log(reportPath);
}

main().catch(error => {
  console.error('运行失败：', error);
  process.exit(1);
});

运行：

npm start https://example.com

执行完成后，会在 reports 目录下生成 Markdown 报告。

十一、AI Agent 可以自动执行哪些优化？

上面的示例主要实现了“检测 + 分析 + 报告”。如果进一步扩展，AI Agent 可以真正参与到代码优化中。

1. 自动压缩图片

可以使用 sharp 批量转换图片格式：

npm install sharp

示例代码：

import sharp from 'sharp';
import fs from 'fs-extra';
import path from 'path';

export async function convertToWebp(inputDir, outputDir) {
  await fs.ensureDir(outputDir);

  const files = await fs.readdir(inputDir);

  for (const file of files) {
    const ext = path.extname(file).toLowerCase();

    if (!['.jpg', '.jpeg', '.png'].includes(ext)) {
      continue;
    }

    const inputPath = path.join(inputDir, file);
    const outputPath = path.join(
      outputDir,
      `${path.basename(file, ext)}.webp`
    );

    await sharp(inputPath)
      .webp({ quality: 80 })
      .toFile(outputPath);

    console.log(`已转换：${inputPath} -> ${outputPath}`);
  }
}

AI Agent 可以在检测到图片过大时，自动调用这个工具完成转换。

2. 自动检查大体积资源

可以让 Agent 读取构建产物目录，找出过大的 JS/CSS 文件：

import fs from 'fs-extra';
import path from 'path';

export async function findLargeFiles(dir, limitKB = 300) {
  const result = [];

  async function walk(currentDir) {
    const files = await fs.readdir(currentDir);

    for (const file of files) {
      const fullPath = path.join(currentDir, file);
      const stat = await fs.stat(fullPath);

      if (stat.isDirectory()) {
        await walk(fullPath);
      } else {
        const sizeKB = stat.size / 1024;

        if (sizeKB > limitKB) {
          result.push({
            file: fullPath,
            sizeKB: Number(sizeKB.toFixed(2))
          });
        }
      }
    }
  }

  await walk(dir);

  return result.sort((a, b) => b.sizeKB - a.sizeKB);
}

输出结果可以作为 AI Agent 的输入，让它判断哪些文件可能需要拆包、压缩或替换依赖。

3. 自动生成缓存配置

如果检测到静态资源缓存不足，Agent 可以自动生成 Nginx、Apache、Node.js 或 CDN 配置建议。

以 Express 为例：

import express from 'express';

const app = express();

app.use('/static', express.static('public/static', {
  maxAge: '365d',
  immutable: true
}));

app.get('/', (req, res) => {
  res.setHeader('Cache-Control', 'no-cache');
  res.sendFile('index.html', { root: 'public' });
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

这里需要注意：

• HTML 文件不要长期强缓存；
• 带 hash 的 JS/CSS/图片可以长期缓存；
• API 接口缓存要根据业务数据实时性决定；
• CDN 缓存策略需要配合版本发布机制。

十二、在真实项目中的 Agent 工作流

在生产环境中，AI Agent 不建议直接修改线上代码，而应该走规范化流程。

推荐工作流如下：

定时触发 / PR 触发
        ↓
Agent 运行性能检测
        ↓
生成性能报告
        ↓
判断是否低于性能预算
        ↓
如果低于阈值，则生成优化建议
        ↓
可选：自动创建 Git 分支和 Pull Request
        ↓
人工 Review
        ↓
合并上线
        ↓
再次检测并生成对比报告

可以设置性能预算，例如：

{
  "performanceScore": 85,
  "largestContentfulPaint": 2500,
  "totalBlockingTime": 200,
  "cumulativeLayoutShift": 0.1,
  "javascriptBundleKB": 300,
  "imageTotalKB": 800
}

当检测结果低于预算时，CI/CD 直接失败：

if performanceScore < 85:
  exit 1

这样可以防止网站速度在长期迭代中逐渐变差。

十三、不同类型网站的优化重点

1. 企业官网

企业官网通常页面较少，但图片、视频和动画较多。优化重点是：

• 图片压缩；
• 视频延迟加载；
• 首屏 CSS 优化；
• CDN 加速；
• 静态化部署。

2. 电商网站

电商网站对速度非常敏感。优化重点是：

• 商品图多规格裁剪；
• 首页推荐接口缓存；
• 搜索接口性能优化；
• 骨架屏；
• 关键路径预加载；
• 支付流程稳定性。

3. 内容网站

内容网站重视 SEO 和阅读体验。优化重点是：

• 服务端渲染或静态生成；
• 图片懒加载；
• 字体优化；
• 广告脚本延迟加载；
• Core Web Vitals 优化。

4. SaaS 后台系统

后台系统首屏可能加载大量 JS。优化重点是：

• 路由级代码分割；
• 组件按需加载；
• 图表库按需引入；
• 权限数据缓存；
• Web Worker 处理重计算任务。

十四、AI Agent 优化网站速度的局限性

虽然 AI Agent 很有价值，但它不是万能的。

1. 不能完全替代工程判断

有些性能问题和业务强相关。例如，一个接口慢可能是因为需要实时计算复杂数据，不能简单缓存。

2. 自动修改代码存在风险

Agent 自动提交代码前，必须经过测试和 Review。尤其是涉及缓存策略、接口逻辑、支付流程时，更不能盲目自动化。

3. Lighthouse 数据不等于真实用户体验

Lighthouse 是实验室数据，真实用户环境更复杂。最好结合 RUM 数据，例如：

• 用户真实网络情况；
• 不同设备性能；
• 不同地区访问延迟；
• CDN 命中率；
• 页面真实交互耗时。

4. 优化目标需要业务定义

不是所有页面都需要追求极限性能。比如后台管理页面和广告落地页的优化优先级完全不同。

十五、进一步升级：接入大模型

如果希望 Agent 更智能，可以接入大模型 API。整体流程如下：

Lighthouse JSON
      ↓
提取关键信息
      ↓
发送给 LLM
      ↓
生成详细优化方案
      ↓
结合工具执行
      ↓
生成 PR 或报告

伪代码如下：

async function askLLM(analysis) {
  const prompt = `
你是资深 Web 性能优化专家，请根据以下数据生成优化方案：

${JSON.stringify(analysis, null, 2)}

要求：
1. 按高、中、低优先级排序；
2. 说明每个问题的原因；
3. 给出可执行代码示例；
4. 输出 Markdown；
`;

  const result = await callLLMApi({
    model: 'your-model',
    messages: [
      {
        role: 'user',
        content: prompt
      }
    ]
  });

  return result.content;
}

在真实使用中，建议不要把完整 Lighthouse JSON 直接传给模型，因为数据量很大。更好的方式是先做结构化提取，只保留关键指标和主要问题。

十六、总结

AI Agent 提高网站速度的核心价值，不在于“知道几个优化技巧”，而在于把性能优化变成一个持续、自动、可度量的工程流程。

它可以帮助团队完成：

• 自动检测网站性能；
• 自动识别图片、JS、CSS、缓存、服务端问题；
• 自动生成优化报告；
• 自动输出代码示例和配置建议；
• 接入 CI/CD 做性能预算；
• 在条件允许时自动创建优化 PR。

本文提供的源码虽然是简化版，但已经具备一个性能优化 Agent 的基本雏形：

输入 URL
  → Lighthouse 检测
  → 指标解析
  → 规则分析
  → 优化建议
  → Markdown 报告

如果继续扩展，可以加入图片压缩、构建产物分析、真实用户性能数据、Git 自动提交、大模型推理等能力，逐步演进为一个真正可用于团队研发流程的 AI 性能工程师。

最终，网站速度优化不应该是上线前的临时补救，而应该成为持续交付体系中的一部分。AI Agent 的价值，正是让这件事更自动、更稳定、更可复制。