gemini

Gemini 프론트엔드 성능 최적화 프롬프트 - Core Web Vitals

Core Web Vitals 개선, 번들 최적화, 렌더링 최적화로 웹사이트 성능을 극대화합니다.

수정 2026년 9월 6일

#프론트엔드성능 #CoreWebVitals #번들최적화 #LCP #CLS #INP

💡

프롬프트 사용 방법

1단계: 아래 입력 칸에 각 항목에 맞는 정보를 적어주세요
2단계: 입력하면 아래 프롬프트가 자동으로 업데이트됩니다
3단계: '프롬프트 복사' 버튼을 눌러 ChatGPT/Claude에 붙여넣으세요

💡 입력 칸의 회색 글씨는 예시입니다. 참고해서 작성해보세요!

📝 필요한 정보를 입력해주세요 (총 5개)

target website (target_website)

target website에 대한 값을 입력하세요

프레임워크 (framework)

사용할 프레임워크나 라이브러리

bundler (bundler)

bundler에 대한 값을 입력하세요

performance issues (performance_issues)

performance issues에 대한 값을 입력하세요

performance goals (performance_goals)

performance goals에 대한 값을 입력하세요

📋 완성된 프롬프트 (복사해서 사용하세요)

프론트엔드 성능 최적화를 수행하세요.


## 분석 대상
- 웹사이트/코드: {{target_website}}
- 프레임워크: {{framework}}
- 번들러: {{bundler}}

## 성능 이슈
{{performance_issues}}

## 목표
{{performance_goals}}

## Core Web Vitals 기준
- LCP ≤ 2.5초, INP ≤ 200ms, CLS ≤ 0.1

분석, 권장사항, 구현 코드를 제공해주세요.

입력하지 않은 항목은 원래 표시를 유지합니다.

입력값 가이드

입력 항목	한국어 설명	placeholder	예시
target_website	최적화할 URL이나 코드를 입력하세요	예: https://example.com	`https://example.com`
framework	사용 중인 프레임워크를 선택하세요	예: React, Vue, Next.js	`React`, `Vue`, `Next.js`
bundler	사용 중인 번들러를 선택하세요	예: Webpack, Vite, Turbopack	`Webpack`, `Vite`, `Turbopack`
performance_issues	현재 문제점을 입력하세요	예: LCP 4.2초, 번들 2.5MB	`LCP 4.2초, 번들 2.5MB`
performance_goals	달성하고 싶은 목표를 입력하세요	예: LCP 2.5초, 번들 200KB	`LCP 2.5초, 번들 200KB`

인풋 필드

[타겟 웹사이트]
▼ 텍스트 입력
placeholder: "예: https://example.com"
설명: 최적화할 URL이나 코드를 입력하세요

[프레임워크]
▼ 드롭다운 선택
옵션: React, Vue, Next.js, Nuxt, Svelte, Angular
placeholder: "예: React, Vue, Next.js"
설명: 사용 중인 프레임워크를 선택하세요

[번들러]
▼ 드롭다운 선택
옵션: Webpack, Vite, Turbopack, esbuild, Parcel
placeholder: "예: Webpack, Vite, Turbopack"
설명: 사용 중인 번들러를 선택하세요

[성능 이슈]
▼ 텍스트 영역 입력
placeholder: "예: LCP 4.2초, 번들 2.5MB"
설명: 현재 문제점을 입력하세요

[성능 목표]
▼ 텍스트 영역 입력
placeholder: "예: LCP 2.5초, 번들 200KB"
설명: 달성하고 싶은 목표를 입력하세요

Core Web Vitals

지표	기준	의미
LCP	≤ 2.5s	Largest Contentful Paint
INP	≤ 200ms	Interaction to Next Paint
CLS	≤ 0.1	Cumulative Layout Shift

최적화 우선순위

1순위: LCP 개선 (히어로 이미지, 웹폰트, 렌더링 차단 리소스) 2순위: 번들 최적화 (코드 스플리팅, Tree Shaking, 압축) 3순위: 렌더링 최적화 (lazy loading, 가상화, 메모이제이션)

코드 예시

이미지 최적화

// ✅ Good
<img src="image-400.webp" width="400" height="300" loading="lazy" decoding="async" />

코드 스플리팅

// ✅ Good
const HeavyComponent = lazy(() => import('./HeavyComponent'));

가상화

import { FixedSizeList } from 'react-window';
function VirtualList({ items }) {
  return (
    <FixedSizeList height={600} itemCount={items.length} itemSize={50}>
      {({ index, style }) => <div style={style}>{items[index]}</div>}
    </FixedSizeList>
  );
}