メニュー
Web performance optimization — invoked when diagnosing slow pages, improving Core Web Vitals, optimizing bundles, images, caching, or server rendering strategy.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when working with Apache Pulsar — designing topic hierarchies, configuring subscriptions, implementing geo-replication, deploying BookKeeper, writing Pulsar Functions, or deciding between Pulsar and Kafka
Expert Iggy message streaming — architecture, Rust SDK producers/consumers, consumer groups, offset management, server config, CLI, and production tuning. Trigger on Iggy setup questions, Rust streaming code, Iggy vs Kafka decisions, partition/offset strategy, or deployment config.
Use when working with MQTT for IoT, mobile, or real-time applications — topic design, QoS levels, broker selection, device shadows, security, or MQTT 5.0 features
Use when working with NATS messaging or JetStream persistence — pub/sub, streams, consumers, KV store, object store, clustering, or leaf nodes
Use when working with Redpanda — setting up clusters, configuring topics, tuning performance, migrating from Kafka, or integrating Redpanda Connect pipelines
Expert RobustMQ skill — multi-protocol cloud-native message queue (MQTT, Kafka-compat, AMQP) built in Rust. Trigger on RobustMQ setup, MQTT IoT streaming, Kafka-compatible migration, AMQP/RabbitMQ replacement, multi-protocol broker architecture, or RobustMQ vs alternatives decisions.
| name | web-performance |
| description | Web performance optimization — invoked when diagnosing slow pages, improving Core Web Vitals, optimizing bundles, images, caching, or server rendering strategy. |
LCP (Largest Contentful Paint) — perceived load speed
INP (Interaction to Next Paint) — responsiveness
CLS (Cumulative Layout Shift) — visual stability
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
LCP element is usually: hero image, <h1>, or large text block.
<!-- 1. Preload the LCP image — biggest single win -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- 2. Mark LCP image as high priority -->
<img src="/hero.webp" fetchpriority="high" loading="eager" alt="Hero">
<!-- 3. Preconnect to image CDN -->
<link rel="preconnect" href="https://cdn.example.com">
LCP optimization hierarchy:
1. Eliminate render-blocking resources (CSS, sync scripts)
2. Reduce server response time (TTFB) — target < 600ms
3. Preload LCP resource
4. Optimize LCP resource (compress image, use WebP/AVIF)
5. Prioritize LCP resource in CDN cache
INP replaced FID in March 2024. It measures the worst interaction latency (p98) during page visit.
Interaction lifecycle:
User input → [Input delay] → Event handlers → [Processing time] → Render → [Presentation delay] → Frame
Target: total < 200ms
↑ ↑ ↑
< 50ms < 100ms < 50ms
(no long tasks) (yield to browser) (no large DOM)
Breaking up long tasks:
// BAD: 300ms synchronous task blocks input
function processAllItems(items) {
items.forEach(item => heavyProcess(item)); // blocks for 300ms
}
// GOOD: yield to browser between chunks
async function processAllItems(items) {
for (let i = 0; i < items.length; i++) {
heavyProcess(items[i]);
// Yield every 50 items
if (i % 50 === 0) {
await scheduler.yield(); // or: await new Promise(r => setTimeout(r, 0));
}
}
}
// BETTER: scheduler.postTask() with priority
await scheduler.postTask(() => heavyWork(), { priority: 'background' });
<!-- BAD: image without dimensions causes layout shift -->
<img src="/product.jpg" alt="Product">
<!-- GOOD: explicit dimensions reserve space -->
<img src="/product.jpg" width="400" height="300" alt="Product">
<!-- GOOD: aspect-ratio in CSS also works -->
<style>
.product-image {
aspect-ratio: 4 / 3;
width: 100%;
}
</style>
/* Reserve space for lazy-loaded content */
.ad-slot {
min-height: 250px; /* know the expected size */
}
/* Font swap causes shift; preload fonts to minimize */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap; /* show fallback, swap when loaded */
/* font-display: optional — don't swap if not loaded fast */
}
HTML parse → DOM
CSS parse → CSSOM
↓
DOM + CSSOM = Render Tree
↓
Layout
↓
Paint
↓
Composite
What blocks rendering:
<!-- render-blocking: browser pauses HTML parse until CSS loads -->
<link rel="stylesheet" href="styles.css">
<!-- render-blocking: browser pauses until script executes -->
<script src="app.js"></script>
<!-- non-blocking: parsed after HTML; order not guaranteed -->
<script async src="analytics.js"></script>
<!-- non-blocking: parsed after HTML; in order; better for deps -->
<script defer src="app.js"></script>
Optimized <head>:
<head>
<!-- 1. Inline critical CSS (above-fold styles only, < 14KB) -->
<style>/* critical CSS inlined here */</style>
<!-- 2. Preconnect to required origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<!-- 3. Preload critical resources -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<link rel="preload" as="font" href="/fonts/inter.woff2" crossorigin>
<!-- 4. Non-critical CSS loaded async -->
<link rel="preload" href="/styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles.css"></noscript>
<!-- 5. Scripts deferred -->
<script defer src="/app.js"></script>
</head>
<!-- Responsive images with srcset -->
<img
src="/hero-800.webp"
srcset="/hero-400.webp 400w,
/hero-800.webp 800w,
/hero-1600.webp 1600w"
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
800px"
width="800"
height="450"
alt="Hero image"
loading="lazy" <!-- lazy for below-fold -->
decoding="async"
>
<!-- LCP image: eager + high priority -->
<img
src="/hero.webp"
fetchpriority="high"
loading="eager"
decoding="sync"
width="1200"
height="600"
alt="Hero"
>
Image format decision:
PNG → WebP: ~30% smaller, same quality, broad support
JPG → WebP: ~25-35% smaller
Any → AVIF: ~50% smaller vs WebP, but encoding is slow; use for hero images
Use <picture> for format negotiation:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero">
</picture>
<!-- 1. Preload the most important font file -->
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" crossorigin>
<!-- 2. Self-host fonts (avoid Google Fonts round-trip) -->
<style>
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
/* Subset: only include characters you use */
unicode-range: U+0000-00FF; /* Latin */
}
</style>
# Vite
npx vite build --report
# Opens rollup-plugin-visualizer treemap in browser
# Webpack
npx webpack-bundle-analyzer stats.json
# Quick size check
npx bundlephobia lodash # check a package before installing
// BAD: imports entire lodash (500KB+)
import _ from 'lodash';
const result = _.groupBy(items, 'category');
// GOOD: import only what you need (tree-shakeable)
import { groupBy } from 'lodash-es'; // ESM version required
// BETTER: write it yourself — groupBy is 4 lines
const result = Object.groupBy(items, item => item.category); // native ES2024
// Split large features
async function handleExport() {
// Only loads when user clicks Export
const { exportToPDF } = await import('./utils/pdf-export');
await exportToPDF(data);
}
// Split large libraries
async function renderChart(data: ChartData) {
const { Chart } = await import('chart.js/auto');
new Chart(canvas, { type: 'line', data });
}
// worker.ts
self.addEventListener('message', (e: MessageEvent) => {
const { data, threshold } = e.data;
const result = heavyDataProcessing(data, threshold); // runs off main thread
self.postMessage(result);
});
// main thread
const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
function processData(data: unknown[], threshold: number): Promise<unknown> {
return new Promise((resolve, reject) => {
worker.postMessage({ data, threshold });
worker.onmessage = e => resolve(e.data);
worker.onerror = e => reject(e);
});
}
Cache hierarchy:
Browser Memory Cache (fastest, session-only)
↓
Browser Disk Cache (fast, controlled by Cache-Control)
↓
Service Worker Cache (programmable, offline support)
↓
CDN Edge Cache (global, fast)
↓
Origin Server (slowest)
# Content-hashed assets (JS/CSS bundles, fonts, images with hash in name)
Cache-Control: max-age=31536000, immutable
# Browser caches for 1 year; immutable = skip revalidation
# HTML documents (never cache aggressively)
Cache-Control: no-cache
# Or: Cache-Control: max-age=0, must-revalidate
# Forces revalidation on every request (ETag comparison)
# API responses
Cache-Control: private, max-age=60
# 60 seconds, not shared in CDN
// sw.js — using Workbox (generated by vite-plugin-pwa or similar)
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies';
// Static assets: cache-first (they have content hashes)
registerRoute(
({ request }) => request.destination === 'script' || request.destination === 'style',
new CacheFirst({ cacheName: 'static-assets' })
);
// Images: cache-first, expire after 30 days
registerRoute(
({ request }) => request.destination === 'image',
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({ maxAgeSeconds: 30 * 24 * 60 * 60 })]
})
);
// API: network-first, fall back to cache when offline
registerRoute(
({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api-cache', networkTimeoutSeconds: 3 })
);
// HTML: stale-while-revalidate
registerRoute(
({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'html-cache' })
);
Rendering strategy decision:
Is content the same for every user?
YES → SSG (Astro, Next.js static)
Does it update?
RARELY (< once/hour) → SSG with rebuild on publish
PERIODICALLY → ISR (Next.js, revalidate: 3600)
NO → Is fast TTFB critical?
YES → SSR (Next.js, streaming)
NO → CSR (Vite SPA)
// app/dashboard/page.tsx (Next.js App Router)
import { Suspense } from 'react';
export default function DashboardPage() {
return (
<main>
{/* Shell renders immediately */}
<DashboardHeader />
{/* Streams in as data resolves */}
<Suspense fallback={<MetricsSkeleton />}>
<MetricsPanel /> {/* async Server Component */}
</Suspense>
<Suspense fallback={<TableSkeleton />}>
<OrdersTable /> {/* async Server Component */}
</Suspense>
</main>
);
}
// Async Server Component — data fetched on server, no client JS needed
async function MetricsPanel() {
const metrics = await fetchMetrics(); // direct DB/API call
return <MetricsDisplay data={metrics} />;
}
// Next.js: revalidate every hour
export const revalidate = 3600;
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await fetchPost(params.slug);
return <Article post={post} />;
}
// On-demand revalidation via webhook
// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
export async function POST(req: Request) {
const { slug, secret } = await req.json();
if (secret !== process.env.REVALIDATE_SECRET) return new Response('Unauthorized', { status: 401 });
revalidatePath(`/blog/${slug}`);
return Response.json({ revalidated: true });
}
# Lighthouse CLI — test production URL
npx lighthouse https://example.com --output html --output-path ./report.html
# WebPageTest — detailed waterfall, filmstrip, multiple locations
# https://webpagetest.org
# Chrome DevTools workflow:
# 1. Performance panel → Record → Interact → Stop
# Look for: long tasks (red triangles), layout/paint (purple/green blocks)
# 2. Network panel → Sort by size; look for uncompressed assets
# 3. Coverage panel → Find unused JS/CSS bytes
Performance budget example:
{
"resourceSizes": [
{ "resourceType": "script", "budget": 200 },
{ "resourceType": "stylesheet", "budget": 50 },
{ "resourceType": "image", "budget": 500 },
{ "resourceType": "total", "budget": 900 }
],
"timings": [
{ "metric": "first-contentful-paint", "budget": 1500 },
{ "metric": "largest-contentful-paint", "budget": 2500 },
{ "metric": "cumulative-layout-shift", "budget": 0.1 }
]
}
loading="lazy" on the LCP image — delays the most important resource; use loading="eager" + fetchpriority="high"width/height — causes CLS when images loadimport moment from 'moment' (300KB) — use date-fns tree-shakeable functionssetTimeout for animations — use requestAnimationFrame; browser paints once per rAFtop/left/width — triggers layout; use transform and opacityCache-Control on static assets — every page load re-downloads assetslocalStorage in render — blocks main thread; read once in useState initializerLCP:
<link rel="preload" fetchpriority="high">INP:
await scheduler.yield()CLS:
width + height attributesfont-display: swap with preloaded WOFF2Assets:
max-age=31536000, immutablesrcsetReact.lazy + SuspenseRendering:
Suspense boundaries for async data