성능 최적화
느린 사이트는 방문자가 떠나고 검색 순위에도 불리합니다. Framer 사이트를 빠르게 만드는 방법을 정리합니다.
Core Web Vitals — 핵심 지표
| 지표 | 의미 | 좋은 값 |
|---|---|---|
| LCP | 가장 큰 콘텐츠가 보이는 속도 | 2.5초 이내 |
| CLS | 레이아웃이 흔들리는 정도 | 0.1 이하 |
| INP | 클릭·입력에 대한 반응 속도 | 200ms 이내 |
이미지
- 너무 큰 원본 업로드 금지 (가로 2000px 내외)
- 장식용 큰 배경 이미지 최소화
- 첫 화면(above the fold) 이미지 수를 줄여 LCP 개선
- 이미지 크기를 미리 지정해 CLS(흔들림) 방지
동영상
- 자동재생 배경 동영상은 무겁습니다 → 모바일에서는 정지 이미지로 대체 고려
- 꼭 필요하면 화질·길이를 줄이세요
폰트
- 사용하는 폰트 종류·굵기를 줄이면 로딩이 빨라집니다
- 한글 웹폰트는 특히 용량이 큽니다 → 한국 맞춤 → 한글 폰트에서 woff2·서브셋 최적화 참고
코드 컴포넌트
- 무거운 외부 라이브러리(차트·지도 등)는 필요한 페이지에서만 로드
- 불필요한 API 호출·리렌더 줄이기
측정 도구 — PageSpeed Insights 에 사이트 주소를 넣으면 점수와 개선 항목을 알려줍니다. 막연히 추측하지 말고 측정 → 개선 → 재측정 순서로 접근하세요.
Framer는 발행 시 이미지 최적화·코드 분할 등을 자동으로 처리합니다. 그래서 위 기본기만 지켜도 대체로 빠릅니다.
다음 단계
자주 묻는 질문
Last updated on