클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

Core Web Vitals 최적화

LCP·INP·CLS 세 가지 코어 웹 바이탈을 진단하고 코드 수준에서 개선하도록 돕는 스킬입니다.

개발·코딩중급★ 2,653⑂ 240AI 점수 9/10마지막 업데이트: 2026. 6. 14.

무엇을 해주나

  • LCP(로딩), INP(반응성), CLS(시각적 안정성) 각 지표의 '좋음/개선 필요/나쁨' 기준과 75퍼센타일 판정 기준을 정리해 줍니다.
  • 지표별 대표 원인(느린 TTFB, 렌더 블로킹 CSS/JS, 무거운 이벤트 핸들러, 치수 없는 이미지, 웹폰트 FOUT 등)을 ❌/✅ 코드 비교로 제시합니다.
  • PerformanceObserver 기반 디버깅 스니펫으로 LCP 요소, 느린 인터랙션, 레이아웃 시프트 원인 요소를 직접 찾아냅니다.
  • Speculation Rules API, scheduler.yield(), requestIdleCallback 등 최신 기법과 그 부작용·주의점까지 안내합니다.
  • Next.js / React / Vue·Nuxt별 즉시 적용 가능한 프레임워크 처방과 지표별 체크리스트를 제공합니다.

이런 분께 추천

  • Search Console에서 Core Web Vitals 경고를 받은 웹 서비스 개발자
  • Lighthouse 점수나 실제 사용자 체감 속도를 개선해야 하는 프론트엔드 엔지니어
  • 이커머스·미디어처럼 광고·임베드가 많아 CLS가 흔들리는 사이트 담당자
  • SEO 관점에서 페이지 경험 지표를 관리하는 테크 SEO 담당자

활용 예시

  1. "우리 랜딩 페이지 LCP가 4초인데 고쳐줘" → 히어로 이미지 preload + fetchpriority="high", 크리티컬 CSS 인라인, SSR 전환 등을 순서대로 제안.
  2. "버튼 클릭이 느려요, INP 잡아줘" → 무거운 핸들러를 청크로 쪼개고 scheduler.yield()로 양보, 애널리틱스는 유휴 시간으로 미루는 패턴 적용.
  3. "광고 로드될 때 화면이 튀어요" → iframe/광고 슬롯에 min-height·aspect-ratio 컨테이너를 넣고 layout-shift 옵저버로 원인 요소 검증.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/addyosmani/web-quality-skills/HEAD/skills/core-web-vitals/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 addyosmani/web-quality-skills 의 skills/core-web-vitals 폴더를 내 ~/.claude/skills/core-web-vitals/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/addyosmani/web-quality-skills.git && mkdir -p ~/.claude/skills && cp -r web-quality-skills/skills/core-web-vitals ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 스킬 폴더를 준비합니다: mkdir -p ~/.claude/skills
  3. 저장소를 내려받습니다: git clone https://github.com/addyosmani/web-quality-skills.git
  4. 이 스킬만 복사합니다: cp -r web-quality-skills/skills/core-web-vitals ~/.claude/skills/
  5. Claude Code를 재시작하고 /skills 또는 스킬 목록에서 core-web-vitals가 보이는지 확인합니다.
  6. "LCP 개선해줘", "CLS 레이아웃 시프트 고쳐줘" 같은 요청을 하면 자동으로 발동합니다. 실제 측정을 위해 npx lighthouse <url> 실행이 가능한 Node 환경이 있으면 더 좋습니다.
GitHub에서 원본 보기 ↗라이선스: MIT