본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Lighthouse와 Core Web Vitals의 차이

Google의 Lighthouse는 웹사이트의 성능, 접근성, 모범 사례, SEO 등을 자동으로 점검 해주는 디버깅 도구입니다. 한편, Core Web Vitals는 실제 사용자들이 Chrome을 통해 방문했을 때 수집된 데이터를 바탕으로 측정됩니다.

즉, Google 검색 순위에 직접 영향을 주는 것은 Lighthouse 점수가 아니라 Core Web Vitals 데이터입니다. Core Web Vitals 데이터는 Google Search Console에서 확인할 수 있으며, 최근 28일간의 평균값이 반영되기 때문에 최적화 이후에도 결과가 반영되기까지 시간이 걸릴 수 있습니다.

• Lighthouse: 실시간 시뮬레이션을 통한 디버깅 도구

• Core Web Vitals: 실제 사용자 경험 데이터 (검색 순위 반영됨)

Lighthouse 점수에 너무 집착하지 않아도 되는 이유

Lighthouse는 2016년형 Motorola 기기를 기준으로 시뮬레이션하기 때문에 자동 재생되는 고화질 영상이나 인터랙션이 많은 요소는 낮은 점수를 유발할 수 있지만, 실제로는 거의 사용되지 않는 기기이기 때문에 걱정할 필요는 없습니다.

예시로, apple.com도 모바일 Lighthouse 점수가 56점에 불과합니다. 그래서 동영상이나 애니메이션을 활용한 디자인을 할 때 Lighthouse 점수가 조금 낮다고 해서 무조건 나쁜 것은 아닙니다.

단, 과도한 사용은 피해야겠지요.

Lighthouse의 주요 성능 지표 3가지

Lighthouse는 여러 성능 지표를 종합해 점수를 계산합니다. 이 중 우리가 직접 영향을 줄 수 있는 항목은 다음 세 가지입니다.

1. LCP (Largest Contentful Paint)

사이트에 표시되는 대부분의 콘텐츠가 로드되는 데 걸리는 시간을 측정합니다. 예시로 헤더 이미지, 메뉴 폰트, 자동 재생 비디오 등과 같은 요소가 포함됩니다.
Note : Welcome 애니메이션이나 늦게 나타나는 쿠키 배너 등과 같은 요소들은 LCP를 지연시킬 수 있습니다. Lighthouse를 활용해 어떤 요소가 LCP에 영향을 주는지 파악하고 디자인을 로딩 시간에 최적화해 보세요.

2. TBT (Total Blocking Time)

페이지가 로드 중 JavaScript로 인해 발생하는 지연 시간을 측정합니다. 0.05~0.1초 이상 실행되는 스크립트는 사용자 경험에 영향을 줄 수 있어, TBT는 이 지연을 모두 합산합니다.
Note : TBT를 줄이려면 불필요한 분석 또는 광고 스크립트를 제거하는 것이 좋습니다. 높은 TBT는 검색 순위에 영향을 미치지 않으며 Core Web Vitals에 포함되지 않습니다.

3. CLS (Cumulative Layout Shift)

로딩 중 예상치 못한 페이지 이동 현상을 측정합니다. (예시: 광고가 갑자기 뜨며 텍스트 위치가 바뀌는 경우) Framer 사이트는 기술적으로 CLS가 거의 0에 가깝기 때문에 안정적인 레이아웃을 유지하기 좋습니다.

Lighthouse 점수를 높이는 팁

• HTTP/3를 활용해 속도 향상: 서버에서 사용하는 HTTP 프로토콜 버전도 속도에 영향을 줍니다. (Framer는 기본적으로 HTTP/3을 지원하므로 별도 설정 없이도 빠른 속도를 누릴 수 있습니다)

• 외부 서비스 스크립트는 꼭 필요한 것만: Google Analytics, YouTube 임베드처럼 외부에서 불러오는 스크립트는 사이트 용량을 크게 늘릴 수 있습니다. 자바스크립트 한 줄이 페이지 성능을 절반으로 떨어뜨릴 수도 있기 때문에, 꼭 필요한 경우에만 최소한으로 추가하는 것이 좋습니다.

SEO를 높이고 싶다면, Core Web Vitals를 먼저 챙기세요

검색 순위를 높이고 싶다면 단순히 Lighthouse 점수를 올리는 데 집중하기보다는, 실제 사용자 경험을 기반으로 측정되는 Core Web Vitals 지표를 최적화하는 것이 훨씬 효과적입니다.

Google은 실제 크롬 사용자들이 체감한 속도 데이터를 순위 결정에 직접 활용하기 때문에, 사용자가 빠르고 매끄럽게 사이트를 탐색할 수 있도록 설계하는 것이 가장 중요합니다.

본 글은 Framer 공식 블로그의 ‘Guide to Lighthouse scores’를 번역·각색한 콘텐츠입니다.