웹 성능 감사 및 최적화 프롬프트

웹 성능 전문가로서 이 사이트를 분석하고, 디자이너가 이해하고 개발자가 즉시 구현할 수 있는 최적화 권장 사항을 제공합니다. ## 입력 - **사이트 URL:** ${url} - **현재 알려진 문제:** [선택 사항 - "모바일에서 느림", "이미지가 큼"] - **목표 점수:** [선택 사항 - "LCP 2.5초 미만, CLS 0.1 미만"] - **호스팅:** [Vercel / Netlify / 커스텀 서버 / 모름] ## 분석 영역 ### 1. 핵심 웹 바이탈 평가 각 지표에 대해 다음을 설명합니다: - **측정 내용** (일반 언어로) - **현재 점수** (양호 / 개선 필요 / 불량) - **점수 원인** - **수정 방법** (구체적이고 실행 가능한 단계) 지표: - LCP (최대 콘텐츠 페인트) - "메인 콘텐츠가 얼마나 빨리 나타나는가?" - FID/INP (다음 페인트까지의 상호작용) - "클릭에 얼마나 빨리 반응하는가?" - CLS (누적 레이아웃 이동) - "로딩 중 요소가 튀는가?" ### 2. 이미지 최적화 - 필요 이상으로 큰 모든 이미지 나열 - 형식 변경 권장 (PNG→WebP, 비압축→압축) - 누락된 반응형 이미지 구현 식별 - 우선 순위 힌트 없이 접는 선 위에 로드되는 이미지 플래그 지정 - 지연 로딩 후보 제안 ### 3. 폰트 최적화 - 폰트 파일 크기 및 로딩 전략 - 서브셋 기회 (800개 글리프가 모두 필요한가?) - 표시 전략 (swap, optional, fallback) - 자체 호스팅 vs CDN 권장 사항 ### 4. JavaScript 분석 - 번들 크기 분석 (무거운 것은 무엇인가?) - 사용되지 않는 JavaScript 비율 - 렌더링 차단 스크립트 - 타사 스크립트 영향 ### 5. CSS 분석 - 사용되지 않는 CSS 비율 - 렌더링 차단 스타일시트 - 중요 CSS 추출 기회 ### 6. 캐싱 및 전달 - 캐시 헤더가 존재하고 올바른가? - CDN 활용 - 압축 (gzip/brotli) 활성화 여부? ## 출력 형식 ### 빠른 요약 (클라이언트/이해관계자용) 3-4문장: 현재 상태, 가장 큰 문제, 기대 개선 효과. ### 최적화 로드맵 | 우선순위 | 문제 | 영향 | 노력 | 수정 방법 | |----------|-------|--------|--------|-----------| | 1 | ... | 높음 | 낮음 | ${구체적 단계} | | 2 | ... | ... | ... | ... | ### 기대 점수 개선 | 지표 | 현재 | 빠른 개선 후 | 전체 최적화 후 | |--------|---------|-----------------|------------------------| | 성능 | ... | ... | ... | | LCP | ... | ... | ... | | CLS | ... | ... | ... | ### 구현 스니펫 상위 5개 수정 사항에 대해 복사-붙여넣기 가능한 코드 또는 구성을 제공합니다.