请你扮演一名网站性能优化专家。以下是我的 PageSpeed Insights 报告结果，请帮我分析导致网站速度慢的主要原因，并按照影响优先级给出优化建议。

网站类型：WordPress 内容站
主要用户：移动端用户
报告数据：
LCP：4.8s
INP：320ms
CLS：0.18
首屏图片体积：1.2MB
未使用 JavaScript：480KB
未使用 CSS：160KB
TTFB：1.1s
请给出详细优化方案。

以下是我的首页 HTML 结构，请帮我判断可能成为 LCP 的元素，并给出优化建议。

我的网站有大量产品图和文章配图，目前主要是 JPG 和 PNG，很多图片超过 500KB。请帮我制定一套适合 2026 年网站的图片优化方案，包括格式、尺寸、压缩、懒加载和 CDN。

以下是我的前端打包体积分析，请帮我找出可以优化的 JavaScript 模块，并给出拆包、懒加载和替代方案。

import Chart from './Chart';

import { lazy, Suspense } from 'react';

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

export default function Page() {
  return (
    Loading...

在 Next.js 中可以使用：

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('../components/Chart'), {
  ssr: false,
  loading: () => 
Loading chart...
,
});

这类优化可以减少首屏 JavaScript 体积，提高页面初始加载速度。

七、用 Claude 优化 CSS 加载

CSS 也会阻塞页面渲染。如果 CSS 文件过大、未使用样式过多，页面首屏显示会被延迟。

常见 CSS 问题

• 全站 CSS 一次性加载；
• 未使用 CSS 太多；
• 字体样式文件过重；
• CSS 框架引入过多；
• 首屏关键 CSS 没有内联；
• 动画和阴影造成渲染压力。

你可以让 Claude 帮你：

• 精简 CSS；
• 拆分关键 CSS；
• 识别未使用样式；
• 优化 Tailwind、Bootstrap 或自定义 CSS；
• 改写复杂选择器；
• 降低动画性能开销。

示例提示词

以下是我的 CSS 文件，请帮我找出可能影响网站速度的写法，并给出优化后的版本。重点关注首屏渲染、重复样式、未使用样式和移动端性能。

Claude 可以帮你将重复样式合并，删除无效样式，并建议哪些 CSS 可以内联到首屏，哪些可以延迟加载。

八、用 Claude 优化字体加载

字体是很多网站容易忽略的性能瓶颈。中文网站尤其明显，因为中文字体文件通常非常大。

字体优化建议

Claude 通常会建议：

• 优先使用系统字体；
• 避免加载完整中文字体；
• 使用 font-display: swap；
• 对字体进行子集化；
• 只加载需要的字重；
• 避免同时加载多个字体家族；
• 使用 woff2 格式；
• 为关键字体设置 preload；
• 防止字体切换导致布局偏移。

示例 CSS

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

如果是中文内容站，很多情况下可以直接使用系统字体栈：

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

这通常比加载外部中文字体更快。

九、用 Claude 优化缓存策略

缓存是提升网站速度最有效的手段之一。合理缓存可以显著减少重复请求，提高页面打开速度，并降低服务器压力。

1. 浏览器缓存

Claude 可以帮助你生成 Nginx 缓存配置。

例如：

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

对于带版本号的静态资源，可以设置更长缓存：

location ~* \.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

2. 页面缓存

对于 WordPress、内容站、企业官网等动态变化不频繁的网站，可以使用页面缓存。

Claude 可以根据你的环境给出建议：

• WordPress：LiteSpeed Cache、WP Rocket、W3 Total Cache；
• Nginx：FastCGI Cache；
• Cloudflare：Cache Rules；
• 静态站：直接部署到 CDN；
• Next.js：使用 ISR 或静态生成；
• Nuxt：使用 Nitro 缓存或静态预渲染。

3. CDN 缓存

使用 CDN 可以让用户从距离更近的节点获取资源，减少延迟。

Claude 可以帮助你设计 CDN 缓存规则，例如：

• 图片、CSS、JS 长缓存；
• HTML 短缓存或按需刷新；
• API 接口根据业务设置缓存；
• 登录态页面不缓存；
• 对搜索页和筛选页谨慎缓存；
• 开启 Brotli 压缩；
• 开启 HTTP/3；
• 开启图片自动 WebP/AVIF 转换。

十、用 Claude 优化服务器响应时间 TTFB

TTFB，即 Time To First Byte，表示浏览器从请求页面到收到第一个字节所花的时间。TTFB 过高，会直接拖慢 LCP。

常见原因

• 服务器配置太低；
• 数据库查询慢；
• 没有页面缓存；
• PHP 或 Node.js 应用响应慢；
• 插件过多；
• API 请求阻塞服务端渲染；
• 地理距离过远；
• DNS 解析慢；
• SSL 握手耗时；
• 后端没有压缩或缓存。

你可以把服务器环境告诉 Claude：

我的网站运行在 Ubuntu + Nginx + PHP-FPM + MySQL，使用 WordPress，TTFB 大约 1.2 秒。请帮我分析可能原因，并给出优化方案和配置示例。

Claude 可以从多个层面给出建议：

• 启用页面缓存；
• 优化数据库索引；
• 清理慢查询；
• 调整 PHP-FPM 参数；
• 开启 OPcache；
• 使用对象缓存 Redis；
• 配置 CDN；
• 减少插件数量；
• 优化主题模板查询；
• 使用更靠近用户的服务器区域。

十一、用 Claude 优化 Core Web Vitals

2026 年，网站速度优化仍然离不开 Core Web Vitals。核心指标主要包括：

• LCP：最大内容绘制，衡量主要内容加载速度；
• INP：交互到下一次绘制，衡量页面响应速度；
• CLS：累积布局偏移，衡量视觉稳定性。

1. 提升 LCP

Claude 可以帮助你从以下方面优化：

• 减少服务器响应时间；
• 优化首屏图片；
• 预加载关键资源；
• 删除阻塞渲染的 CSS 和 JS；
• 使用 CDN；
• 优化字体加载；
• 静态化首屏内容。

2. 提升 INP

INP 差通常意味着用户点击、输入、滑动时页面响应不够快。

可让 Claude 帮你分析：

• 长任务；
• 事件监听器；
• 第三方脚本；
• 大量 DOM 操作；
• 复杂动画；
• React 组件重复渲染；
• 表单校验逻辑过重；
• 客户端状态管理过度复杂。

优化方向包括：

• 拆分长任务；
• 使用 requestIdleCallback；
• 减少主线程阻塞；
• 延迟非关键 JS；
• 优化组件渲染；
• 使用 Web Worker；
• 减少不必要的事件绑定；
• 对输入操作进行 debounce 或 throttle。

3. 降低 CLS

CLS 常见问题包括：

• 图片没有设置宽高；
• 广告位没有预留空间；
• 字体加载后导致文本跳动；
• 动态插入 Banner；
• 异步内容加载导致布局变化。

Claude 可以帮你改写 HTML 和 CSS，例如：

或者为广告区域预留空间：

.ad-slot {
  min-height: 250px;
  width: 100%;
}

这样可以减少页面加载过程中的视觉跳动。

十二、用 Claude 优化 WordPress 网站速度

WordPress 网站速度问题非常常见，因为插件、主题、数据库和服务器都会影响性能。

你可以让 Claude 根据你的网站环境生成优化清单：

请为我的 WordPress 网站制定一套速度优化方案。网站是内容博客，安装了 25 个插件，使用 Elementor，图片较多，主要用户来自中国大陆和东南亚。

Claude 可能会建议：

• 删除不必要插件；
• 避免多个插件实现同一功能；
• 使用轻量主题；
• 减少 Elementor 复杂模块；
• 开启页面缓存；
• 使用对象缓存 Redis；
• 压缩并转换图片；
• 延迟加载非首屏图片；
• 延迟加载第三方脚本；
• 数据库清理；
• 开启 Brotli 或 Gzip；
• 配置 CDN；
• 使用 LiteSpeed 或 Nginx FastCGI Cache；
• 优化字体和图标库；
• 减少 Google Fonts 或外部资源请求。

对于 WordPress 来说，Claude 的优势是可以帮你判断“哪些插件可能拖慢网站”，并根据你的插件列表给出替代方案。

十三、用 Claude 优化 Next.js、Nuxt 等现代框架网站

现代框架网站虽然功能强大，但如果使用不当，也容易导致 JS 过大、服务端渲染慢、hydration 时间长等问题。

Next.js 优化方向

Claude 可以帮你检查：

• 是否能用静态生成替代 SSR；
• 是否适合 ISR；
• 是否过度使用客户端组件；
• 是否可以减少 use client；
• 是否需要 dynamic import；
• 是否合理使用 next/image；
• 是否启用路由级代码分割；
• 是否减少第三方脚本；
• 是否使用 Server Components 降低客户端 JS。

Nuxt 优化方向

Claude 可以协助：

• 开启静态预渲染；
• 优化 Nitro 缓存；
• 懒加载组件；
• 按需加载插件；
• 减少客户端 hydration；
• 优化图片模块；
• 减少全局中间件开销。

示例提示词

我的网站使用 Next.js 15，首页 LCP 较高，客户端 JS 体积较大。请帮我从 Server Components、图片优化、动态导入、缓存和路由渲染策略几个方面提出优化建议。

Claude 可以根据框架特性给出更具体的技术方案，而不是泛泛而谈。

十四、用 Claude 处理第三方脚本问题

很多网站速度慢，并不是自己代码写得差，而是第三方脚本太多。例如：

• 广告脚本；
• 统计代码；
• 在线客服；
• 热力图工具；
• A/B 测试工具；
• 社交媒体插件；
• 嵌入视频；
• 支付组件；
• 评论系统。

这些脚本往往会阻塞主线程，影响 INP 和首屏速度。

你可以让 Claude 帮你制定第三方脚本管理策略：

我的网站加载了 Google Analytics、Facebook Pixel、在线客服、热力图工具和广告脚本。请帮我判断哪些脚本应延迟加载，哪些可以按用户行为加载，如何减少它们对网站速度的影响。

常见优化方法包括：

• 使用 async 或 defer；
• 用户滚动后再加载；
• 用户点击客服按钮后再加载客服脚本；
• 延迟广告脚本；
• 使用服务端统计替代部分前端统计；
• 合并标签管理；
• 移除重复追踪代码；
• 对嵌入视频使用占位图，点击后再加载 iframe。

例如：

对于非关键脚本，可以使用延迟加载逻辑：

window.addEventListener('load', () => {
  setTimeout(() => {
    const script = document.createElement('script');
    script.src = 'https://example.com/third-party.js';
    script.async = true;
    document.body.appendChild(script);
  }, 3000);
});

十五、用 Claude 生成自动化性能检查清单

网站速度优化不是一次性工作，而是持续过程。每次上线新功能、安装插件、修改主题、增加广告脚本，都可能让网站变慢。

你可以让 Claude 帮你生成上线前性能检查清单。

示例清单

## 网站上线前性能检查清单

- [ ] 首页 Lighthouse 移动端性能分数不低于 85
- [ ] LCP 控制在 2.5 秒以内
- [ ] INP 控制在 200ms 以内
- [ ] CLS 控制在 0.1 以下
- [ ] 首屏图片已压缩并使用 WebP/AVIF
- [ ] 非首屏图片已启用懒加载
- [ ] 所有图片设置 width 和 height
- [ ] CSS 和 JS 已压缩
- [ ] 未使用 JS 已移除或延迟加载
- [ ] 第三方脚本已评估影响
- [ ] CDN 缓存规则已配置
- [ ] Brotli 或 Gzip 已开启
- [ ] 字体文件已优化
- [ ] 服务器 TTFB 已测试
- [ ] 移动端真实网络环境已测试

Claude 还可以帮你根据网站类型生成不同版本：

• 电商网站性能清单；
• WordPress 博客性能清单；
• SaaS 官网性能清单；
• 企业官网性能清单；
• 落地页性能清单；
• Web App 性能清单。

十六、用 Claude 编写性能优化脚本

Claude 还可以辅助生成一些实用脚本，比如：

• 批量压缩图片；
• 批量转换 WebP；
• 检查 HTML 中缺少 width/height 的图片；
• 分析页面资源大小；
• 检查未压缩资源；
• 自动运行 Lighthouse；
• 生成性能报告。

例如，你可以要求：

请帮我写一个 Node.js 脚本，扫描 public/images 目录下所有 JPG 和 PNG 图片，并转换为 WebP，同时保持较好的画质。

Claude 可以生成类似下面的脚本：

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

const inputDir = './public/images';

function walkDir(dir) {
  const files = fs.readdirSync(dir);

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

    if (stat.isDirectory()) {
      walkDir(fullPath);
    } else if (/\.(jpg|jpeg|png)$/i.test(file)) {
      const outputPath = fullPath.replace(/\.(jpg|jpeg|png)$/i, '.webp');

      sharp(fullPath)
        .webp({ quality: 80 })
        .toFile(outputPath)
        .then(() => {
          console.log(`Converted: ${fullPath} -> ${outputPath}`);
        })
        .catch(err => {
          console.error(`Error converting ${fullPath}:`, err);
        });
    }
  });
}

walkDir(inputDir);

这样的脚本能够帮助你批量处理资源，提高优化效率。

十七、适合复制使用的 Claude 提示词模板

下面是一组可以直接使用的提示词。

1. 综合性能诊断

请你扮演一名高级网站性能优化专家。我的网站类型是【填写类型】，主要用户是【填写地区和设备】，当前性能问题是【填写问题】。请从前端、后端、图片、缓存、CDN、第三方脚本、Core Web Vitals 和 SEO 角度，给出一套优先级明确的优化方案。

2. Lighthouse 报告分析

以下是我的 Lighthouse 报告，请帮我解释每个关键问题，并按照“影响程度、修改难度、推荐优先级”生成优化表格。

3. 代码优化

以下是我的 HTML/CSS/JS 代码，请帮我找出影响加载速度和渲染性能的问题，并给出优化后的代码。请说明每项修改的原因。

4. WordPress 优化

我的 WordPress 网站安装了以下插件：【插件列表】。请帮我判断哪些插件可能影响速度，哪些可以替代或删除，并给出缓存、图片、数据库和主题优化方案。

5. Core Web Vitals 优化

我的 Core Web Vitals 数据如下：LCP【数值】、INP【数值】、CLS【数值】。请帮我分析原因，并给出针对每个指标的具体优化方法。

十八、使用 Claude 优化网站速度时的注意事项

虽然 Claude 很强，但也不能完全替代真实测试和工程判断。

1. 不要只依赖 AI 判断

Claude 的建议需要结合真实数据验证。你应该使用 Lighthouse、WebPageTest、真实用户监控数据来确认优化效果。

2. 不要一次性修改太多

性能优化最好分批进行。一次修改太多内容，很难判断到底是哪项优化产生了效果，也容易引入新问题。

3. 优先优化影响最大的部分

不要一开始就纠结 2KB 的 CSS，而忽略 1MB 的首屏图片或 1 秒以上的 TTFB。优化要看优先级。

4. 注意兼容性

使用 AVIF、HTTP/3、现代 JS 特性时，要考虑目标用户浏览器是否支持。必要时提供兼容方案。

5. 关注真实用户体验

实验室数据很重要，但真实用户数据更重要。不同地区、不同网络、不同设备上的体验可能差异很大。

十九、推荐的 2026 网站速度优化路线图

如果你不知道从哪里开始，可以按照以下顺序执行：

1. 使用 PageSpeed Insights 和 Lighthouse 获取基础报告；
2. 将报告交给 Claude 分析瓶颈；
3. 优先优化首屏图片和 LCP 元素；
4. 开启 CDN、Brotli/Gzip 和浏览器缓存；
5. 压缩并拆分 JavaScript；
6. 删除未使用 CSS 和 JS；
7. 优化字体加载；
8. 延迟加载第三方脚本；
9. 优化服务器 TTFB；
10. 修复 CLS 问题；
11. 建立性能监控；
12. 每次上线前执行性能检查清单。

按照这个路线走，绝大多数网站都能获得明显提速。

二十、总结

Claude 提高网站速度的核心价值，并不是直接替代测速工具，而是帮助你把复杂的性能问题转化为可执行的优化方案。

你可以利用 Claude：

• 分析 PageSpeed Insights 和 Lighthouse 报告；
• 找出 LCP、INP、CLS 的主要问题；
• 优化图片、字体、CSS 和 JavaScript；
• 生成缓存、CDN、Nginx 配置；
• 辅助优化 WordPress、Next.js、Nuxt 等网站；
• 管理第三方脚本；
• 编写自动化优化脚本；
• 制定长期性能优化流程。

2026 年的网站速度优化，已经不是单纯“压缩一下图片”这么简单，而是涉及前端工程、后端架构、缓存策略、用户体验和搜索优化的系统工程。Claude 的优势在于，它能够帮助你快速理解这些复杂问题，并将它们拆解成清晰、可执行、可验证的步骤。

如果你希望网站更快、更稳定、更利于 SEO，也更容易获得用户信任，那么从今天开始，可以把 Claude 纳入你的性能优化工作流中：用工具检测，用 Claude 分析，用数据验证，用持续迭代提升速度。