Menu
Use when optimizing LCP, INP, or CLS specifically for SEO in a Lovable SPA: PageSpeed/CrUX issues, hero image too heavy, layout shift from web fonts, slow interactions on mobile. Not for backend-only perf (use performance-budget).
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.
Based on SOC occupation classification
Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits.
Use when adding product analytics (PostHog, GA4, Plausible), event tracking, funnels, or conversion measurement. Not for server logs only or A/B infra unless events are part of the task.
Use when standardizing API and edge function errors: HTTP status codes, error JSON shape, logging, or mapping Supabase/Stripe errors to client responses. Not for UI toast copy only or form field validation messages.
Use when recording audit trails: who changed what, admin action logs, compliance history, or append-only event tables. Not for product analytics (use analytics-events) or debug console logs only.
Use when scheduling background work: cron jobs, digest emails, cleanup tasks, pg_cron, Supabase scheduled edge functions, or job queues. Not for synchronous user-facing API in the request path.
Use when adding dark mode, theme toggle, system theme support, or fixing hardcoded colors that break in dark mode. Not for design-token migration unrelated to dark mode.
| name | seo-core-web-vitals |
| description | Use when optimizing LCP, INP, or CLS specifically for SEO in a Lovable SPA: PageSpeed/CrUX issues, hero image too heavy, layout shift from web fonts, slow interactions on mobile. Not for backend-only perf (use performance-budget). |
Core Web Vitals are a Google ranking signal. Each public page must pass on mobile (the harder threshold).
| Metric | Good | Poor |
|---|---|---|
| LCP — Largest Contentful Paint | ≤ 2.5 s | > 4.0 s |
| INP — Interaction to Next Paint | ≤ 200 ms | > 500 ms |
| CLS — Cumulative Layout Shift | ≤ 0.10 | > 0.25 |
Companion skills: performance-budget, seo-ssr-and-prerendering, dashboard-charts-recharts, accessibility-pass.
web-vitals package + your analytics for real-user monitoring.import { onLCP, onINP, onCLS } from "web-vitals";
onLCP((m) => track("web_vital", { name: "LCP", value: m.value }));
onINP((m) => track("web_vital", { name: "INP", value: m.value }));
onCLS((m) => track("web_vital", { name: "CLS", value: m.value }));
Almost always: the hero image is the LCP element on marketing pages.
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">.<img fetchpriority="high" loading="eager" decoding="async">, never loading="lazy".srcset for responsive sizes.width/height attributes — avoids CLS too.<img
src="/hero-960.webp"
srcSet="/hero-480.webp 480w, /hero-960.webp 960w, /hero-1440.webp 1440w"
sizes="(max-width: 768px) 100vw, 960px"
width={960}
height={540}
alt="Acme dashboard preview"
fetchPriority="high"
decoding="async"
/>
Other LCP wins:
seo-ssr-and-prerendering) — kills "white screen until JS".font-display: swap + preconnect to Google Fonts.Common culprits:
Fixes:
async or defer, load chat widgets after user intent.React.lazy + Suspense).tanstack-infinite-queries).useMemo, React.memo) only after profiling.startTransition for non-urgent updates (search filtering, tab switches).const [pending, startTransition] = useTransition();
const onFilter = (v: string) => startTransition(() => setQuery(v));
width/height (or aspect-ratio) on images, video, iframes, ads.font-display: swap + size-adjust or matching fallback metrics.@font-face {
font-family: "Inter";
src: url(/Inter.woff2) format("woff2");
font-display: swap;
size-adjust: 107%; /* match fallback metrics */
}
For shadcn projects, the default next/font or local font setup typically handles this — verify with Lighthouse.
Most SPAs ship with: PostHog, GA4, Stripe.js, Sentry, Intercom, Hotjar, Crisp. Each blocks the main thread.
/checkout).<head>: every <script> should justify its bytes.PageSpeed runs on a throttled 4G mobile. Your dev MacBook is not the customer.
loading="lazy" on the hero image (it's the LCP element, must load immediately).useMemo/useCallback "for safety" — they cost too.loading="lazy" on LCP element.font-display: swap.