스킬 web-performance-optimization
⚡

web-performance-optimization

안전

Claude로 웹 성능 최적화하기

느린 웹사이트는 사용자 경험과 SEO 순위에 해를 끼칩니다. 이 스킬은 코드 분할, 이미지 최적화, Core Web Vitals 개선과 같은 검증된 기법을 사용하여 웹 성능을 ��계적으로 측정, 분석, 최적화하는 데 도움을 줍니다.

지원: Claude Codex Code(CC)
📊 70 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"web-performance-optimization" 사용 중입니다. 제 LCP는 4.2초이고 2.5초 이하로 만들어야 합니다. 메인 히어로 이미지가 2.5MB입니다.

예상 결과:

히어로 이미지를 AVIF 형식으로 변환(약 80% 절약), 200KB 미만으로 압축, 프리로드 링크 추가, fetchpriority='high' 사용, 다양한 화면 크기에 대한 srcset��로 반응형 이미지 구현.

"web-performance-optimization" 사용 중입니다. 제 JavaScript 번들은 gzip으로 압축했을 때 850KB이고 TTI가 느려집니다.

예상 결과:

moment.js(67KB)를 date-fns(12KB)로 교체, 전체 라이브러리 대신 필요한 lodash 함수만 가져오기, 무거운 컴포넌트에 대한 경로 기반 코드 분할 구현, 분석과 같은 중요하지 않은 스크립트 지연.

"web-performance-optimization" 사용 중입니다. CLS 점수가 0.25이고 콘텐츠가 움직입니다.

예상 결과:

모든 이미지에 width 및 height 속성 추가, CSS aspect-ratio 속성 사용, 동적 콘텐츠에 대한 스켈레톤 로더 구현, 로드하기 전에 광고/위젯을 위한 공간 예약.

보안 감사

안전
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
스캔된 파일
649
분석된 줄 수
1
발견 사항
1
총 감사 수
낮은 위험 문제 (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
24
커뮤니티
100
보안
87
사양 준수

만들 수 있는 것

이커머스 사이트 최적화

로딩 시간을 줄이고 Core Web Vitals 점수를 개선하여 전환율을 높이도록 제품 페이지 최적화

대시보드 성능 개선

더 빠른 대시보드 상호작용을 위해 JavaScript 번들 크기를 줄이고 데이터 로딩 최적화

콘텐츠 사이트 속도 최적화

더 빠른 콘��츠 전달을 위한 이미지 최적화, 지��� 로딩, 캐싱 전략 구현

이 프롬프트를 사용해 보세요

성능 문제 분석 
Lighthouse 감사를 실행했는데 다음과 같은 결과가 나왔습니다: [점수 붙여넣기]. 성능이 저조한 원인을 이해하고 먼저 수정할 문제를 우선순위화하는 데 도움주세요.
Core Web Vitals 최적화 
제 Core Web Vitals는 LCP [값], FID [값], CLS [값]입니다. [프레임워크] 애플리케이션에서 이 지표를 개선하기 위한 구체적인 코드 변경 사항을 보여주세요.
번들 크기 줄이기 
제 JavaScript 번들은 [크기]이며 3G에서 로드하는 데 [시간]이 걸립니다. 의존성을 분석하고 코드 분할 전략 또는 더 작은 대안을 제안해주세요.
이미지 최적화 ��현 
사이트를 위한 이미지 최적화 전략을 구현하는 데 도움이 필요합니다. [개수]개의 이미지가 있고 총 [크기]입니다. 최신 형식으로 변환하고 [프레임워크]에서 지연 로딩을 구현��는 방법을 보여주세요.

모범 사례

  • 개선 사항을 정확하게 측정하기 위�� 최적화 전에 항상 Lighthouse로 기��� 지표 설정
  • 사용자 경험과 SEO 순위에 직접적인 영향을 미치므로 Core Web Vitals(LCP, FID, CLS) 먼저 집중
  • 빠른 인터넷이 연��된 데스크톱이 아닌 실제 모바일 기기와 느린 3G 네트워크에서 성능 테스트

피하기

  • 먼저 측정하지 않고 최적화 - 변경하기 전에 항상 감사를 실행하여 실제 병목 현상 식별
  • 모바일 성능을 ��시하면서 데스크톱만 과도 최적화 - 대부분의 사용자는 더 느린 네트워크의 모바일 기기 사용
  • 조기 최적화 - 마이크로 최적화보다 사용자 대면 지표에 영향을 미치는 영향력 큰 변경 사항에 ���중

자주 묻는 질문

Core Web Vitals은 무엇이며 왜 중요한가요?
Core Web Vitals은 Google의 성능 지표입니다: LCP(로딩 속도), FID(상호작용성), CLS(시각적 안정성). 이들은 SEO 순위와 사용자 경험에 직접적인 영향을 미칩니다. 좋은 점수는 LCP 2.5초 미만, FID 100ms 미만, CLS 0.1 미만입니다.
이미지와 JavaScript 중 먼저 최적화해야 하나요?
Lighthouse 감사에서 가장 심각한 문제로 식별된 것부터 시작하세요. 일반적으로 각각 1MB를 초과하는 경우 이미지를 먼저 최적화하는 것이 가장 빠른 성과입니다. 그 다��� gzip으로 압축했을 때 200KB를 초과하는 경우 JavaScript 번들 크기를 해결하세요.
지연 로딩과 코드 분할의 차이점은 무엇인가요?
지연 로딩은 필요할 때까지 리소스(이미지 등) 로딩을 연기합니다. 코드 분할은 요청 시 로드되는 더 작은 청크로 JavaScript를 나눕니다. 두 가지를 함께 사용하세요: 이미지와 below-the-fold 컴포넌트를 지연 로드하고, 경로 또는 기���별로 코드를 분할하세요.
최적화가 작동하는지 어떻게 알 수 있나요?
변경 전후에 Lighthouse 감사를 실행하고 각 지표를 문서화하세요. 여러 기기와 네트워크 속도에서 테스트하세��. 실제 사용자 모니터링(RUM) 도구를 사용하여 랩 점수뿐만 아니라 시간 경��에 따른 실제 사용자 경험을 추적하세요.
이 스킬이 최적화를 자동으로 구현할 수 있나요?
아니요, 이 스킬은 전문 가이드, 코드 예제, 최적화 전략을 제공합니다. 제안된 변경 사항은 사용자 또는 개발 팀이 구현합니다. 스킬은 무엇을 최적화하고 어떻게 접근할지 이해하는 데 도움을 줍��다.
이 스킬과 함께 어떤 도구를 사용해야 하나요?
감사를 위한 Lighthouse(Chrome DevTools에 내장), 번들 분석을 위한 webpack-bundle-analyzer, 자세한 워터폴 차트를 위한 WebPageTest, 런타임 프로파일링을 위한 Chrome DevTools 성능 탭. 이 스킬은 이러한 모든 도구의 결과를 해석하는 데 도움을 줍니다.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

참조

main

파일 구조

📄 SKILL.md