원클릭으로
performance-optimization
Web performance optimization including bundle analysis, lazy loading, caching strategies, and Core Web Vitals
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Web performance optimization including bundle analysis, lazy loading, caching strategies, and Core Web Vitals
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Route broad or ambiguous AgentKit SEO work to the right module while keeping context scoped. Use when a request spans multiple surfaces, asks for overall digital-presence strategy, involves provider or install architecture, needs agent-context planning, or the correct platform skill is unclear.
Persistent memory system for Claude Code. Two-layer architecture (hot cache + knowledge wiki), safety hooks, /close-day end-of-day synthesis. Zero external dependencies.
Claude-native deep research using DAG-based query planning, parallel subagent execution, and gap-driven iteration. No external API needed.
Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing
Authentication and authorization patterns including OAuth2, JWT, RBAC, session management, and PKCE flows
AWS cloud patterns for Lambda, ECS, S3, DynamoDB, and Infrastructure as Code with CDK/Terraform
| name | performance-optimization |
| description | Web performance optimization including bundle analysis, lazy loading, caching strategies, and Core Web Vitals |
// Dynamic import for route-level code splitting
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
function App() {
return (
<Suspense fallback={<PageSkeleton />}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
);
}
// vite.config.ts - manual chunk splitting
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ["react", "react-dom"],
charts: ["recharts", "d3"],
editor: ["@monaco-editor/react"],
},
},
},
},
});
# Analyze bundle composition
npx vite-bundle-visualizer
npx source-map-explorer dist/assets/*.js
import Image from "next/image";
function ProductImage({ src, alt }: { src: string; alt: string }) {
return (
<Image
src={src}
alt={alt}
width={800}
height={600}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
placeholder="blur"
blurDataURL={generateBlurHash(src)}
loading="lazy"
/>
);
}
<!-- Native lazy loading with aspect ratio -->
<img
src="product.webp"
alt="Product photo"
width="800"
height="600"
loading="lazy"
decoding="async"
fetchpriority="low"
/>
<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
function setCacheHeaders(res: Response, options: CacheOptions) {
if (options.immutable) {
res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
return;
}
if (options.revalidate) {
res.setHeader("Cache-Control", `public, max-age=0, s-maxage=${options.revalidate}, stale-while-revalidate=${options.staleWhileRevalidate ?? 86400}`);
return;
}
res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
}
app.use("/assets", (req, res, next) => {
setCacheHeaders(res, { immutable: true });
next();
});
app.use("/api", (req, res, next) => {
setCacheHeaders(res, { revalidate: 60, staleWhileRevalidate: 3600 });
next();
});
import { useVirtualizer } from "@tanstack/react-virtual";
function VirtualList({ items }: { items: Item[] }) {
const parentRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 50,
overscan: 5,
});
return (
<div ref={parentRef} style={{ height: "600px", overflow: "auto" }}>
<div style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}>
{virtualizer.getVirtualItems().map((virtualRow) => (
<div
key={virtualRow.key}
style={{
position: "absolute",
top: 0,
transform: `translateY(${virtualRow.start}px)`,
height: `${virtualRow.size}px`,
width: "100%",
}}
>
<ItemRow item={items[virtualRow.index]} />
</div>
))}
</div>
</div>
);
}
import { onCLS, onINP, onLCP } from "web-vitals";
function sendMetric(metric: { name: string; value: number; id: string }) {
navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
}
onCLS(sendMetric);
onINP(sendMetric);
onLCP(sendMetric);
requestIdleCallback.width and height on images (causes layout shift)Cache-Control: no-cache on static assets with content hashesimport() and Suspensesizes attributefetchpriority="high"