Menü
Audit and optimize website performance / speed
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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
| 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 |