Improve website loading and responsiveness by optimizing images, fonts, scripts, and caching. Identify priorities, reduce JavaScript download size, split code into smaller loads, and verify changes through a structured performance improvement workflow.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Systematic approach: Measure → Identify → Prioritize → Implement → Verify.
| Metric | Good | Needs Work | Poor |
|---|---|---|---|
| LCP | < 2.5s | 2.5-4s | > 4s |
| INP | < 200ms | 200-500ms | > 500ms |
| CLS | < 0.1 | 0.1-0.25 | > 0.25 |
| TTFB | < 800ms | 800ms-1.8s | > 1.8s |
<!-- Hero/LCP image: eager + high priority -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />
<!-- Below fold: lazy load -->
<img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />
Always set width and height to prevent CLS.
<!-- Preconnect to font origin -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Non-blocking font load -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
media="print"
onload="this.media='all'"
/>
<!-- Defer to user interaction -->
<script>
function loadThirdParty() {
// Load analytics, chat widgets, etc.
}
;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
setTimeout(loadThirdParty, 5000)
</script>
Inline critical CSS in <head>, defer the rest:
<style>
/* critical styles */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />
# Webpack
npx webpack-bundle-analyzer dist/stats.json
# Vite
npx vite-bundle-visualizer
# Check package size before installing
npx bundlephobia <package-name>
Common heavy packages to replace:
moment (67KB) → date-fns (12KB) or dayjs (2KB)lodash (72KB) → cherry-pick imports or native methods// React lazy
const Chart = lazy(() => import('./Chart'))
// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })
// Vite/Rollup manual chunks
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom']
}
}
}
}
# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable
# HTML (revalidate)
Cache-Control: no-cache
# API responses
Cache-Control: private, max-age=0, must-revalidate
For running audits, reading reports, and setting budgets, use the perf-lighthouse skill.
srcsetwidth/height attributesloading="lazy" below foldfetchpriority="high" on LCP imagefont-display: swapFor in-depth optimization patterns, see:
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Audit and improve website accessibility using WCAG 2.1, guidelines for making web content usable by people with disabilities. Check image descriptions, contrast, forms, keyboard controls, and screen reader support with automated and manual testing.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan personalized sales emails to prospects you have not contacted before. This skill covers prospect selection, contact research, email drafts, follow-up sequences, inbox delivery, and reply handling, with guidance on tools and campaign improvements.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan pricing for AI products by comparing charges based on usage, tasks, or results. Use customer value and computing costs to shape pricing tiers, usage limits, hybrid plans, and margin improvement strategies.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan AI sales development systems that qualify prospects, organize outreach, classify replies, and hand opportunities to people. Use customer criteria, budget, CRM setup, and sales goals to shape platform choices and a four-week rollout plan.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan AI-assisted SEO, from keyword research and competitor comparison pages to content production using data and templates. It also guides content changes for AI search citations, tool selection, quality checks, and ongoing performance tracking.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Plan UGC campaigns, ads built around user-style content, from creator recruitment and production briefs to AI video variations. Organize organic testing, paid promotion, and creative refreshes for TikTok, Meta, and YouTube Shorts.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.