mcpField
W
web-performance

web-performance

github.com/alphaonedev开发44 次安装
代码仓库

关于 web-performance

web-performance 是用于审查和改进网站性能的技能，面向开发人员。它涵盖 Core Web Vitals 分析、打包优化、延迟加载、CDN 资源分发和缓存策略。

主要功能

  1. 01Lighthouse 审计与 Core Web Vitals
  2. 02Webpack 打包压缩与拆分
  3. 03HTML 和 React 延迟加载
  4. 04静态资源 CDN 配置
  5. 05HTTP 标头与 Service Worker 缓存

适用场景

  1. 01在发布前审计网站
  2. 02排查页面加载缓慢问题
  3. 03缩减大型 JavaScript 包
  4. 04配置缓存和 CDN 资源分发

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill web-performance

安装后在 Claude Code 中输入/web-performance确认已加载。

详细介绍

用途

此技能专注于通过利用 Core Web Vitals、用于审计的 Lighthouse、使用 Webpack 优化 bundle、在 HTML/JS 中进行懒加载、配置 CDN 以及缓存策略等工具和方法，提升 Web 性能，缩短加载时间并改善用户体验。

适用场景

在分析和提升网站性能时使用此技能，例如处理加载缓慢的页面、针对 Core Web Vitals 带来的 SEO 影响进行准备、优化大型 JavaScript bundle，或在生产环境中实施高效的资源交付。

核心能力

  • 运行 Lighthouse 审计，测量 Core Web Vitals（LCP、FID、CLS），以及首字节时间等指标。
  • 使用 Webpack 的 TerserPlugin 进行压缩和代码拆分，优化 bundle。
  • 通过 HTML 属性（例如，在图片上使用 loading="lazy"）或 React 的 lazy() 函数实现懒加载。
  • 使用 Cloudflare 等服务提供商配置 CDN，以交付静态资源。
  • 使用 HTTP 标头（例如，Cache-Control: max-age=3600）或 service worker 应用缓存策略。

使用模式

若要完成任务，请通过 OpenClaw 的 API 或 CLI 调用此技能，并传入 URL 或配置文件等参数。进行审计时，提供 URL 和选项；进行优化时，提供代码片段或构建配置。始终使用 try-catch 包装调用以处理错误。示例模式：在 CI/CD 工作流中使用此技能，自动审计 PR 构建。

常用命令/API

使用 OpenClaw 的 CLI 或 API 端点 /api/skills/web-performance/execute，并传入 JSON 负载。认证需要在标头中提供 $OPENCLAW_API_KEY。

  • CLI：openclaw execute web-performance --url https://example.com --audit-type full --output json
  • API：向 /api/skills/web-performance/execute 发送 POST 请求，请求体为：{"url": "https://example.com", "options": {"chromeFlags": "--headless"}}
  • 懒加载代码片段： 
    import React, { lazy, Suspense } from 'react';
const LazyImage = lazy(() => import('./ImageComponent'));
<Suspense fallback={<div>Loading...</div>}><LazyImage /></Suspense>;
  • 用于 bundle 优化的 Webpack 配置： 
    { "optimization": { "minimizer": ["terser-webpack-plugin"], "splitChunks": { "chunks": "all" } } }
  • CDN 配置示例：在 Nginx 中，添加 location /static/ { proxy_pass https://cdn.example.com; expires 1d; }

集成说明

通过导入 OpenClaw SDK 并使用所需参数调用技能函数进行集成。对于身份验证，请在运行前设置环境变量 $OPENCLAW_API_KEY。结合其他技能使用，例如监控工具：将 Lighthouse 结果传递给日志服务。使用 JSON 配置文件执行多步优化，例如：{"steps": ["audit", "optimize-bundle", "apply-caching"]}。确保 Webpack 集成与 Node.js 14+ 兼容。

错误处理

通过检查 API 调用的响应代码来处理错误（例如，URL 无效时返回 400，身份验证问题时返回 401）。在代码中，使用 try-catch 包装技能调用，例如：

try {
  const result = await openclaw.execute('web-performance', { url: 'https://example.com' });
  console.log(result);
} catch (error) {
  if (error.code === 'AUTH_ERROR') process.env.OPENCLAW_API_KEY = 'new-key';
  else console.error(error.message);
}

常见问题：无效 URL 会返回 "Invalid input"；网络错误则应使用指数退避重试。调用前务必验证 URL 等输入。

具体使用示例

  1. 使用 Lighthouse 审计网站：运行 openclaw execute web-performance --url https://example.com --report-path ./report.json，生成包含 Core Web Vitals 得分的 JSON 报告，然后将 LCP > 2.5s 作为失败阈值进行分析。
  2. 使用 CDN 进行优化和部署：在构建脚本中，使用 openclaw execute web-performance --action optimize-bundle --config webpack.config.js，然后使用 openclaw execute web-performance --action setup-cdn --provider cloudflare --assets /static/，以启用缓存并将加载时间缩短 30-50%。

图谱关系

  • 关联至：web-dev 集群
  • 相关技能：seo-optimization（用于以性能为导向的 SEO）、frontend-dev（用于 bundle 和懒加载集成）
  • 依赖项：monitoring-tools（用于审计后的分析）

评论

支持 Markdown