菜单
Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Git-on-my-level/agent-nexus --skill optimize命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | optimize |
| description | Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother. |
Identify and fix performance issues to create faster, smoother user experiences.
Understand current performance and identify problems:
Measure current state:
Identify bottlenecks:
CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters.
Create systematic improvement plan:
Optimize Images:
srcset, picture element)
Reduce JavaScript Bundle:
// Lazy load heavy component
const HeavyChart = lazy(() => import('./HeavyChart'));
Optimize CSS:
Optimize Fonts:
font-display: swap or optional@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap; /* Show fallback immediately */
unicode-range: U+0020-007F; /* Basic Latin only */
}
Optimize Loading Strategy:
Avoid Layout Thrashing:
// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
const height = el.offsetHeight; // Read (forces layout)
el.style.height = height * 2; // Write
});
// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
el.style.height = heights[i] * 2; // All writes
});
Optimize Rendering:
contain property for independent regionscontent-visibility: auto for long listsReduce Paint & Composite:
transform and opacity for animations (GPU-accelerated)will-change sparingly for known expensive operationsGPU Acceleration:
/* ✅ GPU-accelerated (fast) */
.animated {
transform: translateX(100px);
opacity: 0.5;
}
/* ❌ CPU-bound (slow) */
.animated {
left: 100px;
width: 300px;
}
Smooth 60fps:
requestAnimationFrame for JS animationsIntersection Observer:
// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is visible, lazy load or animate
}
});
});
React-specific:
memo() for expensive componentsuseMemo() and useCallback() for expensive computationsFramework-agnostic:
Reduce Requests:
Optimize APIs:
Optimize for Slow Connections:
aspect-ratio CSS property/* Reserve space for image */
.image-container {
aspect-ratio: 16 / 9;
}
Tools to use:
Key metrics:
IMPORTANT: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.
NEVER:
will-change everywhere (creates new layers, uses memory)Test that optimizations worked:
Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.