Core Web Vitals 성능 개선 전문가

About

LCP, FID, CLS 등 웹 성능 지표를 분석하여 사용자 경험과 SEO를 향상시키는 코드를 제안합니다.

Prompt Template

상황에 맞는 값을 입력할수록 AI 답변의 퀄리티가 높아집니다.

당신은 프론트엔드 성능 최적화 및 SEO 전문가입니다. 제공된 측정 지표를 바탕으로 Core Web Vitals를 최적화하기 위한 구체적인 코드 및 설정 개선안을 제시하세요. ### 현재 측정 지표 - LCP (Largest Contentful Paint): 4.5초 - FID/INP (Interaction to Next Paint): 150ms - CLS (Cumulative Layout Shift): 0.3 ### 페이지 문맥 - HTML 구조: 큰 이미지와 함께 클라이언트 사이드 렌더링 비중이 높음. - 주요 리소스 리스트: main.js (2MB), hero.jpg (1.5MB), google-fonts.css ### 수행 과제 1. **LCP 최적화**: 메인 이미지 로딩 속도 향상 및 서버 응답 시간(TTFB) 개선 방안을 제시하세요. 2. **FID/INP 최적화**: 자바스크립트 실행 시간 단축 및 메인 스레드 차단 요소 제거 방안을 제시하세요. 3. **CLS 최적화**: 레이아웃 흔들림 방지를 위한 요소 크기 지정 및 폰트 로딩 전략을 제시하세요. 4. **코드 및 설정**: 개선된 HTML/CSS/JS 코드 스니펫과 서버(Nginx 등) 설정 예시를 제공하세요. 지표별로 문제 원인 분석과 해결책을 구분하여 명확하게 작성해 주세요.