Framer로 사이트를 만들었다고 하면 아직도 이런 말을 듣습니다.
"Framer 사이트 무겁지 않나요?"
"웹빌더로 만든 사이트가 SEO에 좋을 리 없죠."
2~3년 전이라면 반은 맞는 말이었습니다. 하지만 지금은 다릅니다.
세팅을 제대로 하면 Framer 사이트도 Lighthouse Performance 90점 이상, SEO 점수 100점이 나옵니다. EasySpark가 실제 클라이언트 사이트에서 반복적으로 확인한 수치입니다.
이 글에서는 Framer 웹사이트 속도 최적화와 SEO 세팅을 어떻게 하는지, 핵심만 정리해드립니다.
Lighthouse 점수가 낮은 Framer 사이트의 공통 원인
Framer 사이트라서 느린 게 아닙니다. 세팅을 안 했기 때문에 느린 겁니다.
PageSpeed Insights나 Lighthouse로 Framer 사이트를 측정해보면 낮은 점수의 원인은 거의 항상 같습니다.
- •이미지 최적화 미처리 (WebP 미변환, 사이즈 미조정)
- •폰트 파일이 너무 많거나, 렌더링 블로킹 폰트 사용
- •불필요한 커스텀 코드 삽입 (특히 헤드에 넣은 인라인 스크립트)
- •Framer Motion 애니메이션 남용으로 인한 CLS 발생
- •LCP(Largest Contentful Paint) 대상 이미지에 preload 미설정
이 다섯 가지만 잡아도 점수가 20~30점은 올라갑니다. 직접 확인해봤습니다.
Framer 이미지 최적화 — WebP와 사이즈 설정이 핵심입니다
Framer는 기본적으로 이미지를 WebP로 자동 변환해줍니다. 그런데 많은 분들이 원본 이미지를 그냥 올리는 실수를 합니다.
4000×3000px짜리 사진을 썸네일 영역에 올리면, Framer가 WebP로 변환해줘도 파일 크기 자체가 큽니다.
올리기 전에 먼저 줄이는 게 맞습니다.
- •Hero 이미지: 최대 1440px 너비, 800KB 이하
- •카드 썸네일: 800px 너비, 200KB 이하
- •아이콘/로고: SVG 사용 권장
그리고 Framer의 이미지 설정에서 Quality를 85 이하로 낮춰도 체감 화질 차이는 거의 없습니다. 파일 크기는 30~40% 줄어듭니다.
LCP 대상이 되는 이미지(보통 Hero 섹션의 첫 번째 큰 이미지)는 Framer의 커스텀 코드 영역에서 <link rel="preload"> 태그를 추가해주면 LCP 점수가 눈에 띄게 개선됩니다.
Framer 폰트 세팅 — Google Fonts를 이렇게 쓰면 느려집니다
Framer에서 Google Fonts를 연결하면 편리하지만, 기본 세팅 그대로 쓰면 렌더링 블로킹이 생깁니다.
권장하는 방식은 두 가지입니다.
첫째, 사용하는 weight만 로드합니다.
Regular(400), Medium(500), Bold(700) 이 세 가지면 대부분의 디자인에 충분합니다. Thin, ExtraLight, Black까지 전부 불러오는 경우를 자주 보는데, 사용하지 않는 weight는 로드하지 않는 게 맞습니다.
둘째, 가능하면 시스템 폰트 + 커스텀 웹폰트 조합을 씁니다.
Pretendard나 Noto Sans Korean을 self-hosted 방식으로 Framer에 업로드하면 Google Fonts 의존성이 사라집니다. 외부 DNS 요청이 줄어들어 TTFB(Time to First Byte)가 개선됩니다.
폰트 하나 바꿨을 뿐인데 Lighthouse Performance 점수가 7~10점 올라가는 경우가 실제로 있습니다.
Framer SEO 세팅 — 기본 기능만 잘 써도 Google 상위노출 됩니다
Framer는 SEO 설정 UI가 잘 되어 있습니다. 문제는 쓰지 않는 경우입니다.
페이지마다 반드시 설정해야 하는 항목은 다음과 같습니다.
Title 태그: 페이지의 핵심 키워드 포함, 60자 이내
Meta Description: 검색 결과 스니펫에 노출되는 문장, 150자 이내, 행동 유도 포함
OG Image: SNS 공유 시 노출되는 이미지, 1200×630px 권장
Canonical URL: 중복 페이지가 있을 경우 반드시 설정
그리고 Framer의 Sitemap 자동 생성 기능을 켜두면 Google Search Console에 제출할 sitemap.xml이 자동으로 유지됩니다. 페이지를 추가하거나 삭제할 때마다 수동으로 관리할 필요가 없습니다.
한 가지 더. 페이지 slug를 설정할 때 한국어 URL보다 영문 slug를 쓰는 게 크롤링에 유리합니다. /서비스소개 대신 /services처럼 설정하면 됩니다.
Framer 커스텀 코드와 서드파티 스크립트 — 여기서 속도가 새는 경우가 많습니다
Framer의 강점 중 하나는 커스텀 코드를 자유롭게 삽입할 수 있다는 점입니다. 그런데 이게 양날의 검입니다.
Google Analytics, Hotjar, 채널톡, Meta Pixel 같은 서드파티 스크립트를 헤드에 무분별하게 넣으면 TBT(Total Blocking Time)가 늘어나고 INP(Interaction to Next Paint)가 나빠집니다.
권장 처리 방식입니다.
- •Google Analytics 4:
async속성 필수 - •채팅 위젯(채널톡 등): 페이지 로드 완료 후 defer 방식으로 로드
- •Meta Pixel: Framer의 커스텀 코드 영역 중 Body 하단에 삽입
가능하면 서드파티 스크립트는 세 개 이하로 유지하는 것을 권장합니다. 필요없는 스크립트를 하나 제거했을 때 Performance 점수가 5~8점 오르는 경우도 있습니다.
Framer 애니메이션과 CLS — 예쁜 효과가 SEO 점수를 깎을 수 있습니다
CLS(Cumulative Layout Shift)는 페이지가 로드되면서 레이아웃이 얼마나 움직이는지를 측정합니다. CLS 점수가 나쁘면 Lighthouse Performance 점수가 확 떨어집니다.
Framer의 스크롤 애니메이션이나 등장 효과가 CLS를 유발하는 주요 원인입니다.
해결 방법은 간단합니다.
애니메이션 대상 요소에 명시적인 width/height를 지정합니다. 요소의 크기가 애니메이션 전후로 바뀌지 않으면 CLS가 발생하지 않습니다.
또한 Framer의 Appear 효과에서 opacity: 0 → 1 방식은 CLS에 영향을 주지 않습니다. 반면 scale 이나 y 이동값이 크면 레이아웃 이동처럼 보여 CLS 점수에 영향을 줄 수 있습니다. 효과의 강도를 낮추는 것만으로도 개선됩니다.
Framer 웹사이트가 느리다는 인식, 이제는 바꿀 때입니다
노코드·로우코드 빌더로 만든 사이트는 느리다는 편견이 있습니다. 그 편견이 완전히 틀린 말은 아니었습니다. 세팅을 하지 않으면 느린 게 맞습니다.
하지만 Framer는 Next.js 기반으로 동작하는 빌더입니다. 코드로 직접 만든 사이트와 동일한 인프라에서 돌아갑니다. 세팅만 제대로 한다면 성능에서 밀릴 이유가 없습니다.
Lighthouse 점수는 단순히 숫자가 아닙니다. Google의 Core Web Vitals와 직결되고, 검색 순위에 영향을 줍니다. 사이트가 빠르면 이탈률이 줄고, 전환율이 올라갑니다.
Framer로 만들었다는 이유로 성능을 포기할 필요가 없습니다.
세팅을 제대로 하면 됩니다.
Framer 웹사이트 제작과 성능 최적화가 필요하다면 EasySpark에 문의해주세요. Lighthouse 90점 이상 보장 세팅을 기본으로 제공합니다.
