메뉴
Diagnoses and fixes Core Web Vitals (LCP, INP, CLS) and Lighthouse failures via image/font/JS strategy in the browser; used when pages are slow, janky, or failing a Lighthouse/PageSpeed audit.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Sir-chawakorn/sanook-cli --skill optimize-core-web-vitals명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Gets machine-parseable JSON out of an LLM reliably — prefer provider-enforced grammar (OpenAI `response_format:{type:"json_schema",strict:true}`, Anthropic tool-calling / `tool_choice:{type:"tool"}`, Gemini `responseSchema`) over a "respond in JSON" prompt, define the contract once as a Pydantic/Zod model and validate every response (never trust the string), use constrained decoding / grammars for open weights (Outlines, llguidance, llama.cpp GBNF, vLLM `guided_json`), keep schemas SHALLOW with required fields + enums + `additionalProperties:false`, and build a repair-and-retry loop that handles refusals, `length`/`max_tokens` truncation, and streaming partial JSON (`partial-json-parser`). Schema-guided generation eliminates parse-error retries; validate-and-repair is the backstop, not the primary mechanism.
Builds production data grids that stay fast and accessible at 10k–1M+ rows — decide server-side vs client-side sort/filter/paginate by the dataset-fits-in-memory test (client only under ~10k rows, otherwise push to the API and treat the table as a controlled view of server state), ROW-VIRTUALIZE with TanStack Virtual or react-window so only the visible window mounts (fixed estimateSize, overscan 5–10, measureElement for dynamic rows, contain:strict, and a real scroll container — never table-layout:auto over thousands of rows), build the headless logic with TanStack Table v8 (or AG Grid when you need pinning/grouping/enterprise out of the box), add column resize/reorder/pin, inline edit with optimistic update + rollback on error, row selection with a stable rowId, full keyboard nav with roving tabindex over an ARIA grid (role=grid/row/gridcell, aria-sort, aria-rowcount/aria-rowindex so virtualization stays announced), position:sticky headers, streaming CSV export that doesn't block the main thread, and explici
Builds semantic/vector search — pick an embedding model + dimensionality (and whether to truncate Matryoshka dims) and the matching distance metric (cosine/dot/L2, normalize to unit length so cosine == dot and IP is correct), an ANN index with the recall/latency/memory tradeoff understood (HNSW M/efConstruction/efSearch for low-latency RAM-resident; IVF-PQ nlist/nprobe/PQ for billion-scale compressed; flat/exact for <100k) in pgvector/Qdrant/Milvus/FAISS/Pinecone, chunking + overlap + per-chunk metadata for filtering, HYBRID retrieval fusing BM25 + dense by Reciprocal Rank Fusion (RRF, k≈60) not score addition, a cross-encoder/Cohere reranker over the top-50→k, correct pre-filter-vs-ANN interaction (filterable HNSW, not post-filter that starves k), and offline eval with recall@k / nDCG@10 / MRR against a labeled qrels set. Quantize (scalar/PQ) only after measuring recall loss; tune efSearch/nprobe to a recall target, not a guess.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | optimize-core-web-vitals |
| description | Diagnoses and fixes Core Web Vitals (LCP, INP, CLS) and Lighthouse failures via image/font/JS strategy in the browser; used when pages are slow, janky, or failing a Lighthouse/PageSpeed audit. |
| when_to_use | When the user reports slow page load, layout shift, sluggish interactions, poor Lighthouse/PageSpeed scores, or asks to improve LCP/INP/CLS or Core Web Vitals — frontend/browser-side specifically. Not for backend/server query latency (that is performance-profiling). |
Use when a page is slow to render, shifts layout, or feels laggy on interaction — and the fix lives in the browser (HTML/CSS/JS/assets), not the server query path.
| Symptom | Metric | This skill |
|---|---|---|
| Hero/main content paints late | LCP | yes |
| Content jumps after load | CLS | yes |
| Click/typing feels frozen | INP | yes |
| Lighthouse/PageSpeed score red | all | yes |
| API/DB response is the bottleneck | TTFB-backend | no → backend profiling |
Targets (pass = 75th percentile): LCP ≤ 2.5s · INP ≤ 200ms · CLS ≤ 0.1. TTFB ≤ 800ms is a precondition for LCP — if TTFB alone blows the budget, stop and route to backend.
1. Baseline before touching anything. Run a trace + audit on the real URL so you have a before/after diff.
chrome-devtools.performance_start_trace (with reload: true, autoStop: true) → load → performance_stop_trace.chrome-devtools.lighthouse_audit (categories ["performance"], mobile preset — mobile is what fails first).performance_analyze_insight on the flagged insights (e.g. LCPBreakdown, RenderBlocking, CLSCulprits, DocumentLatency). Record the LCP element, INP target, CLS shifters, and TTFB. Do not guess which image/script is the problem — read it from the trace.2. Identify the LCP element and attack its critical path. LCP = TTFB + resource load delay + load time + render delay. Fix the dominant segment:
fetchpriority="high" to that one <img>, and <link rel="preload" as="image" fetchpriority="high" imagesrcset=...> in <head>. Remove loading="lazy" from it (lazy on the LCP image is a top regression).<picture>; provide srcset/sizes so mobile downloads a small file, not the desktop original.3. Kill render-blocking resources. From the RenderBlocking insight:
media swap or async. Defer non-critical CSS.defer (or type="module") to scripts; never async a script that the first paint depends on ordering-wise.load or via requestIdleCallback.preconnect to required cross-origin asset domains.4. Eliminate CLS — reserve space for everything that arrives late.
<img>/<video>/<iframe> gets explicit width+height (or CSS aspect-ratio) so the box is reserved before the asset loads.font-display: swap + <link rel="preload" as="font" type="font/woff2" crossorigin> for the primary font; set size-adjust/ascent-override (or a matched fallback metric) to minimize the swap reflow.transform/opacity.5. Fix INP — the slowest interaction, not just the first. From the trace's interaction/long-task data:
scheduler.yield() or chunked work; move heavy compute to a Web Worker.debounce/throttle input handlers; isolate expensive work out of the event handler's synchronous path.offsetWidth/getBoundingClientRect then writing styles in a loop — batch reads then writes).6. Cut the JS budget. Check list_network_requests for the heaviest scripts:
import() below-the-fold and on-interaction components (modals, carousels, charts).loading="lazy" + IntersectionObserver for below-fold images/iframes (but NOT the LCP element — see step 2).7. Re-run the audit and diff. Repeat step 1 on the same URL/preset. Compare LCP/INP/CLS numbers before vs after. Iterate until all three pass the target or the remaining gap is backend TTFB.
loading="lazy" on the hero delays the very thing LCP measures. Lazy is for below-fold only.fetchpriority="high" on everything. Priority is relative; flag one LCP resource. Marking many demotes the signal to noise.preload without using it. A preloaded font/image not referenced within a few seconds throws a console warning and wastes bandwidth. Preload only the LCP image and the first-paint font.crossorigin. Fonts are CORS-fetched; a preload missing crossorigin double-downloads the file.lighthouse_audit (mobile) and a performance_start_trace/stop_trace on the same URL as the baseline.list_console_messages shows no new preload/warning errors and no unused-preload warnings.list_network_requests confirms LCP image is high priority + modern format, fonts are preloaded, and no surprise render-blocking script returned.