Agent Skills
› cosmicstack-labs/mercury-agent-skills
› web-performance
web-performance
GitHub提供Web性能优化系统方案，涵盖Core Web Vitals指标监控、JS代码分割、图片懒加载与响应式处理、Service Worker缓存策略及常见误区规避。
Trigger Scenarios
用户询问如何提升网页加载速度或渲染性能
需要配置Core Web Vitals优化目标
请求实施图片懒加载或代码分割策略
咨询前端缓存机制或服务Worker配置
Install
npx skills add cosmicstack-labs/mercury-agent-skills --skill web-performance -g -y
SKILL.md
Frontmatter
{
"name": "web-performance",
"metadata": {
"tags": [
"performance",
"web-vitals",
"lighthouse",
"optimization",
"caching",
"core-web-vitals"
],
"author": "cosmicstack-labs",
"version": "1.0.0",
"category": "frontend"
},
"description": "Web performance optimization patterns, Core Web Vitals, lazy loading, code splitting, caching strategies, and monitoring"
}
Web Performance
Systematic approach to measuring, analyzing, and optimizing web application performance.
Core Web Vitals
| Metric | Target | What It Measures |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | Loading performance |
| FID (First Input Delay) | < 100ms | Interactivity |
| CLS (Cumulative Layout Shift) | < 0.1 | Visual stability |
| INP (Interaction to Next Paint) | < 200ms | Responsiveness |
Optimization Strategies
1. JavaScript Optimization
// Dynamic imports — code splitting
const Chart = dynamic(() => import('./Chart'), {
loading: () => <ChartSkeleton />,
ssr: false, // If chart needs browser APIs
});
// Bundle analysis
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
2. Image Optimization
// Next.js Image component
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // Above-the-fold images
placeholder="blur"
blurDataURL="data:image/webp;base64,..."
/>
// Responsive images with srcSet
<picture>
<source media="(min-width: 1024px)" srcSet="/hero-lg.webp" />
<source media="(min-width: 640px)" srcSet="/hero-md.webp" />
<img src="/hero-sm.webp" alt="Hero" loading="lazy" />
</picture>
3. Caching Strategy
// Service Worker caching strategies
// Cache-First for static assets
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/static/')) {
event.respondWith(cacheFirst(event.request));
}
// Network-First for API calls
if (event.request.url.includes('/api/')) {
event.respondWith(networkFirst(event.request));
}
});
Common Mistakes
- Optimizing before measuring: Always measure first. Use Lighthouse, WebPageTest, and RUM data.
- Ignoring mobile performance: Test on real mobile devices, not just desktop DevTools.
- Blocking rendering with JavaScript: Defer non-critical JS. Use
async/deferon scripts. - Not optimizing images: Use WebP/AVIF, responsive images, and lazy loading.
- Missing performance budgets: Set budgets in your CI pipeline and fail builds that exceed them.
Version History
- 38e2523 Current 2026-07-05 19:40
