Back to Details

performance-analyzer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Performance Analyzer

性能分析器

Automatically analyze and suggest performance improvements for specific code.
自动分析特定代码并提出性能改进建议。

Philosophy

核心理念

Fast code is user-friendly code. Every millisecond counts.
高效的代码就是对用户友好的代码，每一毫秒都至关重要。

Core Beliefs

核心原则

  1. Measure Before Optimizing: Profile to find actual bottlenecks, don't guess
  2. User Perception Matters Most: A 100ms delay feels instant, 1s feels slow
  3. Progressive Enhancement: Start fast (mobile), enhance for desktop
  4. Performance is a Feature: Users notice and appreciate speed
  1. 优化前先测量：通过性能分析找到实际瓶颈，不要凭猜测
  2. 用户感知是重中之重：100毫秒的延迟用户感觉不到，1秒的延迟就会觉得慢
  3. 渐进式增强：先保证移动端加载快速，再针对桌面端增强功能
  4. 性能是一项功能：用户会注意到并重视速度优势

Why Performance Matters

性能的重要性

  • User Experience: Fast sites feel professional and responsive
  • Conversion Rates: Every 100ms delay costs conversions
  • SEO Rankings: Core Web Vitals directly impact search visibility
  • Accessibility: Performance improvements help users on slow connections/devices
  • 用户体验：加载快的网站给人专业、响应及时的感觉
  • 转化率：每延迟100毫秒都会导致转化率下降
  • SEO排名：Core Web Vitals 直接影响搜索可见性
  • 可访问性：性能优化有助于网络缓慢或设备性能差的用户访问

When to Use This Skill

何时使用此技能

Activate this skill when the user:
  • Says "this is slow" or "performance issue"
  • Shows code and asks "how can I optimize this?"
  • Mentions "page speed", "load time", or "Core Web Vitals"
  • Asks "why is this query slow?"
  • References "N+1 problem", "caching", or "optimization"
  • Shows performance profiler output
当用户出现以下情况时，激活此技能：
  • 说“这个很慢”或“性能问题”
  • 展示代码并询问“如何优化这个？”
  • 提及“页面速度”“加载时间”或“Core Web Vitals”
  • 询问“为什么这个查询这么慢？”
  • 提到“N+1问题”“缓存”或“优化”
  • 展示性能分析器的输出结果

Decision Framework

决策框架

Before analyzing performance, determine:
在分析性能之前，先明确：

What's Slow?

哪里慢？

  1. Page load → Check Core Web Vitals (LCP, INP, CLS)
  2. Database queries → Check query count, N+1 problems
  3. API calls → Check response times, external dependencies
  4. Asset loading → Check CSS/JS/image sizes
  5. Server processing → Check PHP/Node execution time
  1. 页面加载 → 检查 Core Web Vitals（LCP、INP、CLS）
  2. 数据库查询 → 检查查询数量、N+1问题
  3. API调用 → 检查响应时间、外部依赖
  4. 资源加载 → 检查CSS/JS/图片大小
  5. 服务器处理 → 检查PHP/Node执行时间

What's the Baseline?

基准线是什么？

Measure first:
  • Run Lighthouse for Core Web Vitals
  • Profile with browser DevTools
  • Check database query logs
  • Measure actual load times
Don't optimize without data - Profile to find real bottlenecks
先测量：
  • 运行Lighthouse检测Core Web Vitals
  • 使用浏览器开发者工具进行性能分析
  • 检查数据库查询日志
  • 测量实际加载时间
没有数据不要盲目优化——通过性能分析找到真正的瓶颈

What's the Target?

目标是什么？

Core Web Vitals targets:
  • LCP (Largest Contentful Paint): < 2.5s (good), < 4.0s (needs improvement)
  • INP (Interaction to Next Paint): < 200ms (good), < 500ms (needs improvement)
  • CLS (Cumulative Layout Shift): < 0.1 (good), < 0.25 (needs improvement)
General targets:
  • Page load: < 3s ideal, < 5s acceptable
  • API response: < 100ms ideal, < 500ms acceptable
  • Database query: < 50ms ideal, < 200ms acceptable
Core Web Vitals 目标：
  • LCP（最大内容绘制）：<2.5秒（良好），<4.0秒（需要改进）
  • INP（下一次绘制的交互延迟）：<200毫秒（良好），<500毫秒（需要改进）
  • CLS（累积布局偏移）：<0.1（良好），<0.25（需要改进）
通用目标：
  • 页面加载：理想<3秒，可接受<5秒
  • API响应：理想<100毫秒，可接受<500毫秒
  • 数据库查询：理想<50毫秒，可接受<200毫秒

What's the Impact?

影响有多大？

Prioritize fixes by impact:
  1. High - Affects all users on every page load
  2. Medium - Affects specific user flows or features
  3. Low - Edge cases or infrequent operations
根据影响程度优先修复：
  1. 高影响 - 影响所有用户的每次页面加载
  2. 中影响 - 影响特定用户流程或功能
  3. 低影响 - 边缘情况或不频繁的操作

What Optimizations Apply?

适用哪些优化方案？

Common patterns:
  • N+1 queries → Add eager loading
  • Large assets → Compress, lazy load, CDN
  • No caching → Add caching layers
  • Blocking resources → Async/defer scripts
  • Unoptimized images → Compress, WebP, responsive images
  • Too many HTTP requests → Combine, bundle
  • Slow external APIs → Cache, background jobs
常见优化场景：
  • N+1查询 → 添加预加载
  • 大体积资源 → 压缩、懒加载、使用CDN
  • 无缓存 → 添加缓存层
  • 阻塞资源 → 异步/延迟加载脚本
  • 未优化图片 → 压缩、使用WebP格式、响应式图片
  • HTTP请求过多 → 合并、打包
  • 外部API缓慢 → 缓存、使用后台任务

Decision Tree

决策树

User reports performance issue
    ↓
Measure baseline (Lighthouse, profiler)
    ↓
Identify bottleneck (queries/assets/processing)
    ↓
Assess impact (all users vs. edge case)
    ↓
Recommend specific optimizations
    ↓
Provide before/after metrics
用户反馈性能问题
    ↓
测量基准线（Lighthouse、性能分析器）
    ↓
定位瓶颈（查询/资源/处理过程）
    ↓
评估影响范围（所有用户 vs 边缘情况）
    ↓
推荐特定优化方案
    ↓
提供优化前后指标对比

Quick Analysis Types

快速分析类型

1. Database Query Analysis

1. 数据库查询分析

What to check:
  • N+1 queries
  • Missing indexes
  • SELECT * instead of specific fields
  • Unnecessary JOINs
  • Large result sets without pagination
Example Response:
markdown
undefined
检查要点：
  • N+1查询
  • 缺失索引
  • 使用SELECT *而非指定字段
  • 不必要的JOIN操作
  • 未分页的大数据集结果
示例响应：
markdown
undefined

Query Performance Issue: N+1 Problem

查询性能问题：N+1问题

Current Code:
php
$users = User::loadMultiple();
foreach ($users as $user) {
  $profile = $user->get('field_profile')->entity; // N+1!
}
Problem: Loading 100 users triggers 101 queries (1 + 100)
Solution: Use EntityQuery with eager loading
php
$query = \Drupal::entityQuery('user')
  ->accessCheck(TRUE);
$uids = $query->execute();
$users = User::loadMultiple($uids);

// Preload profiles in one query
$profile_ids = [];
foreach ($users as $user) {
  $profile_ids[] = $user->get('field_profile')->target_id;
}
$profiles = Profile::loadMultiple($profile_ids);
Impact: Reduces queries from 101 to 2 (~98% improvement)
undefined
当前代码：
php
$users = User::loadMultiple();
foreach ($users as $user) {
  $profile = $user->get('field_profile')->entity; // N+1!
}
问题：加载100个用户会触发101次查询（1+100）
解决方案：使用EntityQuery并添加预加载
php
$query = \Drupal::entityQuery('user')
  ->accessCheck(TRUE);
$uids = $query->execute();
$users = User::loadMultiple($uids);

// 一次查询预加载所有用户资料
$profile_ids = [];
foreach ($users as $user) {
  $profile_ids[] = $user->get('field_profile')->target_id;
}
$profiles = Profile::loadMultiple($profile_ids);
优化效果：查询次数从101次减少到2次（约98%的提升）
undefined

2. Asset Optimization

2. 资源优化

What to check:
  • Large unoptimized images
  • Unminified CSS/JS
  • Blocking resources
  • Missing lazy loading
  • No CDN usage
检查要点：
  • 未优化的大体积图片
  • 未压缩的CSS/JS
  • 阻塞资源
  • 未启用懒加载
  • 未使用CDN

3. Caching Analysis

3. 缓存分析

What to check:
  • Missing cache tags
  • Cache invalidation issues
  • No page cache
  • Expensive uncached operations
检查要点：
  • 缺失缓存标签
  • 缓存失效问题
  • 无页面缓存
  • 未缓存的高开销操作

4. Core Web Vitals

4. Core Web Vitals 分析

Quick checks:
  • LCP (Largest Contentful Paint): Target < 2.5s
  • INP (Interaction to Next Paint): Target < 200ms
  • CLS (Cumulative Layout Shift): Target < 0.1
快速检查要点：
  • LCP（最大内容绘制）：目标<2.5秒
  • INP（下一次绘制的交互延迟）：目标<200毫秒
  • CLS（累积布局偏移）：目标<0.1

Response Format

响应格式

markdown
undefined
markdown
undefined

Performance Analysis

性能分析

Component: [What was analyzed] Issue: [Performance problem] Impact: [How it affects users]
分析组件：[分析的对象] 问题：[性能问题描述] 影响：[对用户的影响]

Current Performance

当前性能

  • Metric: [value]
  • Grade: [A-F]
  • 指标：[数值]
  • 评级：[A-F]

Optimization Recommendations

优化建议

  1. [Recommendation] (Priority: High)
    • Current: [problem]
    • Improved: [solution]
    • Expected gain: [percentage/time]
  2. [Next recommendation] ...
  1. [建议内容]（优先级：高）
    • 当前情况：[问题详情]
    • 优化方案：[解决方案]
    • 预期收益：[百分比/时间]
  2. [下一条建议] ...

Code Example

代码示例

[Provide optimized code]
undefined
[提供优化后的代码]
undefined

Common Performance Patterns

常见性能优化模式

Drupal

Drupal 相关

Problem: Lazy loading causing N+1
php
// Bad
foreach ($nodes as $node) {
  $author = $node->getOwner()->getDisplayName(); // N+1
}

// Good
$nodes = \Drupal::entityTypeManager()
  ->getStorage('node')
  ->loadMultiple($nids);
User::loadMultiple(array_column($nodes, 'uid')); // Preload
问题：懒加载导致N+1问题
php
// 不良写法
foreach ($nodes as $node) {
  $author = $node->getOwner()->getDisplayName(); // N+1
}

// 优化写法
$nodes = \Drupal::entityTypeManager()
  ->getStorage('node')
  ->loadMultiple($nids);
User::loadMultiple(array_column($nodes, 'uid')); // 预加载

WordPress

WordPress 相关

Problem: Inefficient WP_Query
php
// Bad
$posts = new WP_Query(['posts_per_page' => -1]); // Loads everything

// Good
$posts = new WP_Query([
  'posts_per_page' => 20,
  'fields' => 'ids', // Only IDs
  'no_found_rows' => true, // Skip counting
  'update_post_meta_cache' => false,
  'update_post_term_cache' => false,
]);
问题：低效的WP_Query
php
// 不良写法
$posts = new WP_Query(['posts_per_page' => -1]); // 加载所有内容

// 优化写法
$posts = new WP_Query([
  'posts_per_page' => 20,
  'fields' => 'ids', // 仅加载ID
  'no_found_rows' => true, // 跳过计数
  'update_post_meta_cache' => false,
  'update_post_term_cache' => false,
]);

Integration with /audit-perf Command

与/audit-perf 命令的集成

  • This Skill: Focused code-level analysis
    • "This query is slow"
    • "Optimize this function"
    • Single component performance
  • /audit-perf
    Command    : Comprehensive site audit
    • Full performance analysis
    • Core Web Vitals testing
    • Lighthouse reports
  • 本技能：专注于代码级别的分析
    • “这个查询很慢”
    • “优化这个函数”
    • 单个组件的性能
  • /audit-perf
    命令    ：全面的站点审计
    • 完整的性能分析
    • Core Web Vitals 测试
    • Lighthouse 报告

Quick Tips

快速提示

💡 Database: Index foreign keys, avoid SELECT * 💡 Caching: Cache expensive operations, use cache tags 💡 Assets: Optimize images, minify CSS/JS, lazy load 💡 Queries: Limit results, use eager loading, avoid N+1
💡 数据库：为外键创建索引，避免使用SELECT * 💡 缓存：缓存高开销操作，使用缓存标签 💡 资源：优化图片，压缩CSS/JS，启用懒加载 💡 查询：限制结果集，使用预加载，避免N+1问题