Back to Details

perf

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Performance Measurement Skill

性能测量技能

Quick Lighthouse audit for web applications.
为Web应用快速执行Lighthouse审计。

Usage

使用方法

Commands

命令

bash
/perf                      # Audit current/main page
/perf /about               # Audit specific path
/perf https://example.com  # Audit full URL
/perf --all                # Audit all key pages
bash
/perf                      # 审计当前/主页面
/perf /about               # 审计特定路径
/perf https://example.com  # 审计完整URL
/perf --all                # 审计所有关键页面

Korean Triggers

韩文触发词

  • "성능 측정"
  • "라이트하우스 돌려"
  • "페이지 속도 확인"
  • "성능 측정"
  • "라이트하우스 돌려"
  • "페이지 속도 확인"

Workflow

工作流程

1. Identify Target URLs

1. 确定目标URL

If 
--all
or batch mode:
Scan for key pages:
  • Homepage (
    /
    )
  • Main feature pages
  • High-traffic routes
如果使用
--all
或批量模式：
扫描关键页面：
  • 首页 (
    /
    )
  • 主要功能页面
  • 高流量路由

2. Run Lighthouse

2. 运行Lighthouse

For each URL, invoke 
web-perf-ux
skill or run directly:
bash
lighthouse <url> --output=json --chrome-flags="--headless"
对每个URL，调用
web-perf-ux
技能或直接运行：
bash
lighthouse <url> --output=json --chrome-flags="--headless"

3. Collect Metrics

3. 收集指标

Focus on Core Web Vitals:
MetricGoodNeeds WorkPoor
LCP (Largest Contentful Paint)<2.5s2.5-4.0s>4.0s
CLS (Cumulative Layout Shift)<0.10.1-0.25>0.25
INP (Interaction to Next Paint)<200ms200-500ms>500ms
Additional metrics:
  • FCP (First Contentful Paint)
  • TTFB (Time to First Byte)
  • Total Blocking Time
  • Speed Index
重点关注Core Web Vitals：
指标良好需要改进较差
LCP（最大内容绘制）<2.5s2.5-4.0s>4.0s
CLS（累积布局偏移）<0.10.1-0.25>0.25
INP（交互到下一次绘制）<200ms200-500ms>500ms
额外指标：
  • FCP（首次内容绘制）
  • TTFB（首字节时间）
  • 总阻塞时间（Total Blocking Time）
  • 速度指数（Speed Index）

4. Generate Report

4. 生成报告

Summary format:
Performance Report
==================
/ (Homepage)
  LCP: 1.8s    CLS: 0.05   INP: 120ms   Score: 92

/dashboard
  LCP: 3.2s    CLS: 0.08   INP: 180ms   Score: 74
  Issues: LCP needs improvement

/products
  LCP: 2.1s    CLS: 0.02   INP: 95ms    Score: 89

Top Issues:
1. /dashboard - Large images not optimized
2. /dashboard - Render-blocking JavaScript
摘要格式：
性能报告
==================
/（首页）
  LCP: 1.8s    CLS: 0.05   INP: 120ms   得分: 92

/dashboard
  LCP: 3.2s    CLS: 0.08   INP: 180ms   得分: 74
  问题: LCP需要改进

/products
  LCP: 2.1s    CLS: 0.02   INP: 95ms    得分: 89

主要问题:
1. /dashboard - 大图片未优化
2. /dashboard - 渲染阻塞型JavaScript

Common Optimizations

常见优化方案

Based on results, suggest:
IssueSolution
High LCPOptimize images, preload critical assets
High CLSSet image dimensions, avoid dynamic content insertion
High INPReduce JavaScript, use code splitting
High TTFBCheck server response, use CDN
根据结果，建议：
问题解决方案
LCP值过高优化图片，预加载关键资源
CLS值过高设置图片尺寸，避免动态插入内容
INP值过高减少JavaScript代码，使用代码分割
TTFB值过高检查服务器响应，使用CDN

Integration

集成

This skill works best with 
web-perf-ux
plugin for detailed analysis.
bash
undefined
该技能与
web-perf-ux
插件配合使用可获得最佳详细分析效果。
bash
undefined

For detailed analysis

用于详细分析

/web-perf-ux https://example.com
/web-perf-ux https://example.com

For quick check

用于快速检查

/perf https://example.com
undefined
/perf https://example.com
undefined

Batch Mode

批量模式

When running 
--all
:
  1. Discover routes from sitemap or router config
  2. Queue pages for measurement
  3. Run sequentially (avoid overwhelming server)
  4. Aggregate results into single report
运行
--all
时：
  1. 从站点地图或路由配置中发现路由
  2. 将页面加入测量队列
  3. 按顺序运行（避免服务器过载）
  4. 将结果汇总为单个报告