ワンクリックで
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"