--- name: seo-performance description: Enforces Core Web Vitals optimization, semantic HTML, structured data, and technical SEO best practices for maximum search visibility and page speed. --- # SEO & Performance Skill This skill ensures the site is fast, discoverable, and technically sound. A $10K website that loads slowly or doesn't rank is a waste of money. Performance IS a feature. ## Core Rules for Performance ### 1. Core Web Vitals Targets - **LCP (Largest Contentful Paint):** < 2.5 seconds. The hero image or headline must render within this window. - **FID/INP (Interaction to Next Paint):** < 200ms. No janky button clicks or delayed form responses. - **CLS (Cumulative Layout Shift):** < 0.1. No elements jumping around after load. ### 2. Image Optimization - **Always use Next.js `` component** — it handles lazy loading, responsive sizing, and WebP/AVIF format conversion automatically. - **Set explicit `width` and `height`** on all images to prevent CLS. - **Hero images:** Use `priority={true}` and `fetchPriority="high"` to preload. - **Below-fold images:** Default `loading="lazy"` (Next.js default). - **Avoid raw `` tags** unless there's a specific technical reason. ### 3. Font Loading Strategy - Use `next/font/google` for all Google Fonts — it self-hosts and eliminates render-blocking network requests. - Load only the weights you actually use (e.g., `weight: ['400', '600', '800']`), not the full family. - Always set `display: 'swap'` to prevent FOIT (Flash of Invisible Text). - Define font variables in the layout and apply via CSS custom properties. ### 4. Bundle Size & Code Splitting - **Dynamic imports:** Use `next/dynamic` with `ssr: false` for heavy client-only components (charts, maps, rich text editors, animation-heavy sections). - **Tree shaking:** Import MUI components individually (`import Button from '@mui/material/Button'`), not from the barrel export (`import { Button } from '@mui/material'`). - **No unnecessary dependencies:** Before adding a library, check if the functionality can be achieved with native APIs or existing deps. - **Analyze:** Periodically run `npx @next/bundle-analyzer` to identify bloat. ### 5. Semantic HTML & Accessibility - **Heading hierarchy:** Exactly one `

` per page. Then `

` for sections, `

` for subsections. Never skip levels. - **Landmarks:** Use `
`, `
`, `
`, `