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

网站速度，正在从“锦上添花”的优化项，变成影响业务增长的核心指标。

对于一个电商网站来说，页面多慢 1 秒，可能意味着转化率下降；对于内容网站来说，首屏加载慢，会直接增加跳出率；对于 SaaS 产品来说，后台响应迟钝，会让用户觉得产品“不专业”。更重要的是，Google、百度等搜索引擎也越来越重视页面体验，网站速度已经与 SEO、用户体验和商业价值紧密绑定。

过去，我们优化网站速度，通常依赖人工排查：打开 Lighthouse、看瀑布图、分析接口、压缩图片、优化缓存、改造前端代码。这些工作有效，但有两个问题：

1. 重复性高：很多问题都是固定模式，例如图片太大、JS 阻塞、缓存缺失。
2. 定位成本高：非专业人员很难从一堆性能指标中判断优先级。

而 AI Agent 的出现，提供了一种新的思路：
让 AI 不只是“回答问题”，而是像一个性能优化工程师一样，自动检测网站、分析瓶颈、生成优化建议，甚至自动修改部分代码。

本文将介绍：如何用 AI Agent 提高网站速度，并提供一个可运行的源码示例。

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

在正式进入 AI Agent 之前，我们先明确：网站速度到底影响什么？

1. 用户体验

用户访问网站时，第一感受往往不是内容，而是速度。

如果一个页面打开需要 5 秒以上，很多用户甚至不会等待页面完全加载。尤其是在移动端、弱网环境下，速度问题会被进一步放大。

常见体验问题包括：

• 页面白屏时间过长；
• 图片加载缓慢；
• 按钮点击后无响应；
• 页面滚动卡顿；
• 表单提交等待时间太久。

这些问题都会让用户对网站产生“不可靠”的印象。

2. SEO 排名

搜索引擎非常关注页面体验。Google 提出的 Core Web Vitals 核心指标包括：

如果网站速度长期较差，即使内容质量不错，也可能影响搜索排名。

3. 转化率

网站速度直接影响商业转化。

例如：

• 电商详情页加载慢，用户可能直接关闭；
• 落地页首屏慢，广告预算会被浪费；
• SaaS 后台操作慢，用户续费意愿下降；
• 内容平台加载慢，阅读完成率降低。

因此，优化速度不是纯技术行为，而是业务增长手段。

二、AI Agent 能做什么？

传统 AI 聊天机器人通常是被动回答问题，例如你问：“网站慢怎么办？”它给你一些建议。

而 AI Agent 更进一步，它可以具备以下能力：

1. 主动执行任务
2. 调用外部工具
3. 读取网站数据
4. 分析性能瓶颈
5. 生成优化方案
6. 执行部分自动化修复
7. 持续监控优化效果

换句话说，AI Agent 可以被设计成一个“自动化性能优化助手”。

三、AI Agent 优化网站速度的典型流程

一个完整的 AI 性能优化 Agent，通常可以分成以下几个步骤。

第一步：采集网站性能数据

AI Agent 首先需要知道网站到底哪里慢。

它可以采集的数据包括：

• Lighthouse 分数；
• 页面加载时间；
• 静态资源大小；
• JS / CSS 文件数量；
• 图片体积；
• 接口响应时间；
• 缓存头信息；
• DOM 节点数量；
• Web Vitals 数据；
• 服务器 TTFB。

这些数据可以通过多种方式获取，例如：

• Chrome Lighthouse；
• PageSpeed Insights API；
• Puppeteer；
• Playwright；
• WebPageTest；
• 自定义埋点；
• Nginx 日志；
• APM 系统。

第二步：识别性能瓶颈

采集到数据之后，AI Agent 需要判断问题优先级。

例如：

• 如果 LCP 很慢，可能是首屏图片太大；
• 如果 TTFB 很慢，可能是服务端响应慢；
• 如果 JS 执行时间过长，可能是前端包过大；
• 如果 CLS 很高，可能是图片没有设置宽高；
• 如果接口慢，可能是数据库查询未优化；
• 如果缓存命中率低，可能是静态资源缓存策略不合理。

AI Agent 可以将指标与规则结合，生成判断结果。

第三步：生成优化建议

发现问题之后，AI Agent 会输出可执行建议，例如：

• 将 JPG / PNG 转换为 WebP 或 AVIF；
• 对首屏图片添加 preload；
• 使用 CDN；
• 开启 Brotli 或 Gzip 压缩；
• 拆分 JavaScript 包；
• 延迟加载非关键 JS；
• 给图片添加明确宽高；
• 开启浏览器缓存；
• 减少第三方脚本；
• 优化数据库索引；
• 对接口增加缓存；
• 使用服务端渲染或静态生成；
• 对长列表进行虚拟滚动。

第四步：自动修复部分问题

一些低风险、规则明确的问题可以自动修复，例如：

• 压缩图片；
• 生成 WebP 图片；
• 添加 lazy loading；
• 检查缺失的 width / height；
• 生成 Nginx 缓存配置；
• 检查资源是否启用压缩；
• 输出代码修改建议；
• 自动生成性能报告。

当然，并不是所有问题都适合 AI 自动修改。比如数据库结构优化、业务接口重构、复杂前端架构调整，仍然需要工程师确认。

第五步：持续监控

网站速度不是优化一次就结束。

随着功能增加、第三方脚本变多、图片资源堆积，网站速度会再次变慢。因此 AI Agent 最好具备持续监控能力。

可以设置：

• 每天定时检测首页；
• 每次发布后自动跑性能测试；
• Lighthouse 分数低于阈值时报警；
• LCP 超过 2.5 秒时生成报告；
• 新增资源体积超过限制时阻止发布。

四、AI Agent 优化网站速度的核心策略

下面从前端、后端、资源、缓存和监控几个方面说明 AI Agent 能如何发挥作用。

1. 图片优化

图片通常是网页中体积最大的资源之一。很多网站速度慢，本质上就是图片没有优化。

AI Agent 可以自动检查：

• 图片是否过大；
• 图片格式是否合理；
• 是否使用 WebP / AVIF；
• 是否设置懒加载；
• 是否缺少宽高属性；
• 是否使用响应式图片；
• 是否对首屏大图预加载。

优化建议示例

对于非首屏图片，可以使用懒加载：

AI Agent 可以自动扫描 HTML，找出未设置 loading、width、height 的图片，并生成修复建议。

2. JavaScript 优化

现代网站越来越依赖 JavaScript，但 JS 也是导致页面慢的重要原因。

AI Agent 可以分析：

• JS 包是否过大；
• 是否存在未使用代码；
• 是否可以拆包；
• 是否存在阻塞渲染脚本；
• 第三方脚本是否过多；
• 是否有长任务；
• 是否可以延迟加载。

优化前

优化后

defer 适合依赖 DOM 的脚本，async 适合不依赖执行顺序的第三方脚本。

AI Agent 可以基于页面结构判断哪些脚本适合加 defer，哪些脚本适合加 async。

3. CSS 优化

CSS 会影响首屏渲染。如果 CSS 文件过大，浏览器必须下载并解析后才能渲染页面。

AI Agent 可以检查：

• CSS 是否过大；
• 是否存在未使用 CSS；
• 是否可以提取关键 CSS；
• 是否有多个阻塞 CSS 文件；
• 是否可以合并或拆分；
• 是否存在复杂选择器。

示例：预加载 CSS

对于首屏关键 CSS，可以直接内联：

AI Agent 可以结合 Lighthouse 报告，判断哪些 CSS 属于阻塞资源。

4. 缓存优化

缓存是提升网站速度最有效、成本最低的方式之一。

AI Agent 可以检查响应头：

• 是否设置 Cache-Control；
• 静态资源是否长期缓存；
• HTML 是否短缓存；
• API 是否有缓存策略；
• 是否开启 CDN 缓存；
• 是否设置 ETag；
• 是否使用版本号或 hash 文件名。

推荐缓存策略

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

对于 HTML 页面：

location / {
    add_header Cache-Control "public, max-age=60";
}

对于静态资源，如果文件名带 hash，例如：

main.8f3a2c.js
style.91ab7.css

则可以使用更长时间缓存：

add_header Cache-Control "public, max-age=31536000, immutable";

AI Agent 可以根据资源类型自动生成不同的缓存规则。

5. 服务端优化

如果 TTFB 很高，说明用户请求发出后，服务器迟迟没有返回第一个字节。

可能原因包括：

• 数据库查询慢；
• 后端接口逻辑复杂；
• 没有缓存；
• 服务器资源不足；
• 网络链路较慢；
• SSR 渲染耗时过长；
• 第三方服务阻塞。

AI Agent 可以通过日志、接口耗时和数据库慢查询来分析问题。

例如，对于接口响应慢，可以建议：

// 优化前：每次请求都查询数据库
app.get('/api/products', async (req, res) => {
  const products = await db.query('SELECT * FROM products');
  res.json(products);
});

使用缓存优化：

const NodeCache = require('node-cache');
const cache = new NodeCache({ stdTTL: 60 });

app.get('/api/products', async (req, res) => {
  const cacheKey = 'products:list';

  const cached = cache.get(cacheKey);
  if (cached) {
    return res.json(cached);
  }

  const products = await db.query('SELECT * FROM products');
  cache.set(cacheKey, products);

  res.json(products);
});

对于高访问量网站，还可以使用 Redis：

const redis = require('redis');
const client = redis.createClient();

app.get('/api/products', async (req, res) => {
  const cacheKey = 'products:list';

  const cached = await client.get(cacheKey);
  if (cached) {
    return res.json(JSON.parse(cached));
  }

  const products = await db.query('SELECT * FROM products');
  await client.setEx(cacheKey, 60, JSON.stringify(products));

  res.json(products);
});

五、源码：一个简单的网站速度优化 AI Agent

下面我们实现一个简化版 AI Agent。它可以完成以下任务：

1. 输入网站 URL；
2. 使用 Lighthouse 检测性能；
3. 分析关键指标；
4. 生成优化建议；
5. 输出 Markdown 格式报告。

注意：这个示例为了方便演示，主要使用规则引擎模拟 AI Agent 的决策逻辑。实际项目中，你可以接入 OpenAI、Claude、通义千问、DeepSeek 等大模型，让它根据检测结果生成更自然、更完整的报告。

1. 项目结构

speed-ai-agent/
├── package.json
├── index.js
├── analyzer.js
├── reporter.js
└── reports/

2. 安装依赖

mkdir speed-ai-agent
cd speed-ai-agent
npm init -y
npm install lighthouse chrome-launcher

如果你使用的是 Node.js 18 或更高版本即可。

3. package.json

{
  "name": "speed-ai-agent",
  "version": "1.0.0",
  "description": "AI Agent for website speed optimization",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "chrome-launcher": "^1.1.2",
    "lighthouse": "^12.0.0"
  }
}

4. analyzer.js

该文件负责根据 Lighthouse 数据分析性能问题。

// analyzer.js

export function analyzeLighthouseResult(lhr) {
  const audits = lhr.audits;
  const categories = lhr.categories;

  const performanceScore = Math.round(
    categories.performance.score * 100
  );

  const metrics = {
    performanceScore,
    firstContentfulPaint: getDisplayValue(audits, 'first-contentful-paint'),
    largestContentfulPaint: getDisplayValue(audits, 'largest-contentful-paint'),
    speedIndex: getDisplayValue(audits, 'speed-index'),
    totalBlockingTime: getDisplayValue(audits, 'total-blocking-time'),
    cumulativeLayoutShift: getDisplayValue(audits, 'cumulative-layout-shift'),
    serverResponseTime: getDisplayValue(audits, 'server-response-time')
  };

  const suggestions = [];

  if (performanceScore < 90) {
    suggestions.push({
      level: 'high',
      title: '整体性能分数偏低',
      reason: `当前性能分数为 ${performanceScore}，建议优先优化首屏资源、缓存和 JavaScript 执行时间。`,
      action: [
        '压缩并转换图片为 WebP 或 AVIF',
        '减少首屏 JavaScript 体积',
        '开启 Gzip 或 Brotli 压缩',
        '配置浏览器缓存和 CDN 缓存'
      ]
    });
  }

  const lcp = audits['largest-contentful-paint'];
  if (lcp && lcp.numericValue > 2500) {
    suggestions.push({
      level: 'high',
      title: 'LCP 过慢',
      reason: `LCP 当前为 ${lcp.displayValue}，超过推荐值 2.5 秒。`,
      action: [
        '优化首屏最大图片或最大文本块',
        '对首屏大图使用 preload',
        '减少阻塞渲染的 CSS 和 JS',
        '提升服务器 TTFB'
      ]
    });
  }

  const tbt = audits['total-blocking-time'];
  if (tbt && tbt.numericValue > 200) {
    suggestions.push({
      level: 'medium',
      title: '主线程阻塞时间较长',
      reason: `Total Blocking Time 当前为 ${tbt.displayValue}，说明 JavaScript 执行可能过重。`,
      action: [
        '拆分 JavaScript 包',
        '移除未使用代码',
        '延迟加载非关键脚本',
        '减少第三方脚本'
      ]
    });
  }

  const cls = audits['cumulative-layout-shift'];
  if (cls && cls.numericValue > 0.1) {
    suggestions.push({
      level: 'medium',
      title: '页面布局偏移较高',
      reason: `CLS 当前为 ${cls.displayValue}，可能影响用户体验。`,
      action: [
        '为图片和视频设置 width 与 height',
        '避免在页面顶部动态插入内容',
        '为广告位预留固定空间',
        '避免字体加载导致页面抖动'
      ]
    });
  }

  const server = audits['server-response-time'];
  if (server && server.numericValue > 600) {
    suggestions.push({
      level: 'high',
      title: '服务器响应时间过长',
      reason: `服务器响应时间为 ${server.displayValue}，可能拖慢首屏加载。`,
      action: [
        '检查数据库慢查询',
        '对接口增加 Redis 或内存缓存',
        '使用 CDN 或边缘缓存',
        '优化 SSR 渲染逻辑'
      ]
    });
  }

  const unusedJs = audits['unused-javascript'];
  if (unusedJs && unusedJs.score !== null && unusedJs.score < 1) {
    suggestions.push({
      level: 'medium',
      title: '存在未使用 JavaScript',
      reason: unusedJs.displayValue || '页面可能加载了不必要的 JavaScript 代码。',
      action: [
        '启用 Tree Shaking',
        '使用动态 import 拆分页面代码',
        '移除未使用的第三方库',
        '按路由加载组件'
      ]
    });
  }

  const modernImage = audits['modern-image-formats'];
  if (modernImage && modernImage.score !== null && modernImage.score < 1) {
    suggestions.push({
      level: 'medium',
      title: '图片未使用现代格式',
      reason: modernImage.displayValue || '部分图片可以转换为 WebP 或 AVIF。',
      action: [
        '将 JPG/PNG 转换为 WebP',
        '为支持的浏览器提供 AVIF',
        '使用 picture 标签做格式兼容',
        '通过 CDN 自动转换图片格式'
      ]
    });
  }

  return {
    url: lhr.finalDisplayedUrl,
    fetchedAt: new Date().toISOString(),
    metrics,
    suggestions
  };
}

function getDisplayValue(audits, key) {
  return audits[key]?.displayValue || 'N/A';
}

5. reporter.js

该文件负责把分析结果输出成 Markdown 报告。

// reporter.js

import fs from 'fs';
import path from 'path';

export function generateMarkdownReport(result) {
  const levelText = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  };

  const markdown = `# 网站速度优化报告

## 基本信息

- 检测网址：${result.url}
- 检测时间：${result.fetchedAt}
- 性能得分：${result.metrics.performanceScore}

## 核心指标

| 指标 | 当前值 |
|---|---|
| FCP | ${result.metrics.firstContentfulPaint} |
| LCP | ${result.metrics.largestContentfulPaint} |
| Speed Index | ${result.metrics.speedIndex} |
| TBT | ${result.metrics.totalBlockingTime} |
| CLS | ${result.metrics.cumulativeLayoutShift} |
| Server Response Time | ${result.metrics.serverResponseTime} |

## AI Agent 优化建议

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

- 优先级：${levelText[item.level] || item.level}
- 原因：${item.reason}

建议操作：

${item.action.map(action => `- ${action}`).join('\n')}
`).join('\n')}

## 推荐优化顺序

1. 先处理高优先级问题，例如 LCP、TTFB 和首屏资源。
2. 再处理 JavaScript 体积、未使用代码和第三方脚本。
3. 然后优化图片格式、懒加载和缓存策略。
4. 最后建立持续监控机制，避免后续版本再次变慢。

---

由 Speed AI Agent 自动生成。
`;

  return markdown;
}

export function saveReport(markdown, fileName = 'report.md') {
  const reportDir = path.resolve(process.cwd(), 'reports');

  if (!fs.existsSync(reportDir)) {
    fs.mkdirSync(reportDir);
  }

  const filePath = path.join(reportDir, fileName);
  fs.writeFileSync(filePath, markdown, 'utf-8');

  return filePath;
}

6. index.js

该文件负责启动 Chrome、运行 Lighthouse，并调用分析和报告模块。

// index.js

import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';
import { analyzeLighthouseResult } from './analyzer.js';
import { generateMarkdownReport, saveReport } from './reporter.js';

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

  if (!url) {
    console.error('请传入要检测的网站 URL，例如：');
    console.error('npm start https://example.com');
    process.exit(1);
  }

  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless']
  });

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

  try {
    const runnerResult = await lighthouse(url, options);
    const lhr = runnerResult.lhr;

    const analysis = analyzeLighthouseResult(lhr);
    const markdown = generateMarkdownReport(analysis);

    const fileName = `report-${Date.now()}.md`;
    const filePath = saveReport(markdown, fileName);

    console.log('检测完成！');
    console.log(`性能得分：${analysis.metrics.performanceScore}`);
    console.log(`报告路径：${filePath}`);
  } catch (error) {
    console.error('检测失败：', error);
  } finally {
    await chrome.kill();
  }
}

run();

7. 运行项目

npm start https://example.com

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

示例输出：

检测完成！
性能得分：78
报告路径：/your-path/speed-ai-agent/reports/report-1710000000000.md

六、如何接入真正的大模型？

上面的示例使用规则引擎生成建议。如果你希望 AI Agent 更智能，可以将 Lighthouse 结果发给大模型，让它生成更具体的优化方案。

下面是一个伪代码示例：

async function askLLM(performanceData) {
  const prompt = `
你是一个资深网站性能优化工程师。
请根据下面 Lighthouse 数据，分析网站速度瓶颈，并给出可执行优化建议。

要求：
1. 按优先级排序；
2. 给出具体原因；
3. 给出代码级优化建议；
4. 输出 Markdown 格式。

性能数据：
${JSON.stringify性能数据, null, 2)}
`;

  const response = await callLLMApi(prompt);
  return response;
}

如果使用 OpenAI API，结构大致如下：

import OpenAI from 'openai';

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

async function askAIAgent(data) {
  const response = await client.chat.completions.create({
    model: 'gpt-4.1-mini',
    messages: [
      {
        role: 'system',
        content: '你是一个资深网站性能优化专家，擅长 Lighthouse、Web Vitals、前端工程化和服务端优化。'
      },
      {
        role: 'user',
        content: `
请分析以下网站性能数据，并生成优化报告：

${JSON.stringify(data, null, 2)}
`
      }
    ]
  });

  return response.choices[0].message.content;
}

这样，AI Agent 就可以从“规则检测工具”升级为“智能分析助手”。

七、进一步增强：让 Agent 自动修改代码

如果你的项目是前端工程，例如 Next.js、Vue、React 或 Nuxt，可以让 AI Agent 做更多事情。

例如：

1. 自动扫描图片标签

Agent 可以扫描项目中的 .html、.vue、.jsx、.tsx 文件，找出没有 loading 属性的图片。

import fs from 'fs';
import path from 'path';

function scanImages(dir) {
  const files = fs.readdirSync(dir);
  const results = [];

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

    if (stat.isDirectory()) {
      results.push(...scanImages(fullPath));
    } else if (/\.(html|jsx|tsx|vue)$/.test(file)) {
      const content = fs.readFileSync(fullPath, 'utf-8');
      const imgMatches = content.match(/]*>/g) || [];

      imgMatches.forEach(img => {
        if (!img.includes('loading=')) {
          results.push({
            file: fullPath,
            issue: '图片缺少 loading 属性',
            code: img
          });
        }
      });
    }
  }

  return results;
}

2. 自动提示 JS 拆包

对于 React 项目，可以建议将大型组件改成动态加载：

import React, { lazy, Suspense } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

export default function Dashboard() {
  return (
    加载中...