Menu
Audit and optimize website performance / speed
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Fetch transcripts from YouTube videos (urls)
Create a blog post
Web search
Interactive browser automation for testing and scraping
Check domain name availability
Optimize UI and UX design
Based on SOC occupation classification
| name | optimize-website |
| description | Audit and optimize website performance / speed |
Systematic checklist for auditing and optimizing web performance. Focuses on Core Web Vitals — LCP, CLS, INP — and general asset/network efficiency.
Before optimizing, establish a baseline:
Work through each section top-to-bottom. Items are ordered by typical impact.
The single most impactful metric. Target: < 2.5s.
<head> with fetchpriority="high"
<link rel="preload" href="/hero.webp" as="image" type="image/webp" fetchpriority="high" />
Images are usually the largest payload. Optimize aggressively.
width and height on all <img> tags (prevents CLS)loading="lazy" (never lazy-load the LCP image)srcset for varying viewport sizes<Image>, SvelteKit enhanced images, etc.)Web fonts are a common source of render-blocking and layout shift.
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-display: swap or optional to prevent invisible text<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin />Target: < 0.1. Prevent elements from moving after render.
transform animations instead of layout-triggering properties (top, left, width, height)overflow-y: scroll on <html> to prevent scrollbar-induced shiftposition: sticky on hero sections that cause jump on scrollrollup-plugin-visualizer, webpack-bundle-analyzer)<script defer> or dynamic import()package.json@import chains in CSS (each is a serial request)// Example: simple TTL cache
const CACHE_TTL_MS = 30_000;
let cached: Data | null = null;
let cacheTime = 0;
function getData(): Data {
if (cached && Date.now() - cacheTime < CACHE_TTL_MS) return cached;
cached = readFromSource();
cacheTime = Date.now();
return cached;
}
<link rel="preconnect"> / <link rel="dns-prefetch"> for essential third-party originsnpm ci --omit=dev in production to minimize server footprintStrict-Transport-Security avoids HTTP→HTTPS redirects)Target: < 200ms. Ensure the page responds quickly to user input.
requestAnimationFrame or scheduler.yield() for heavy computationcontent-visibility: auto for off-screen sections| Action | Typical Impact |
|---|---|
| Preload LCP resource | LCP -0.5–2s |
| Convert images to WebP/AVIF | 50-90% smaller |
| Switch to system fonts | LCP -0.3–1s |
| Enable Brotli compression | 15-25% smaller |
| Add Cache-Control headers | Repeat visits |
| Remove unused JS/CSS | Varies widely |