Lighthouse (라이트하우스)
"Lighthouse is an open-source, automated tool for improving the quality of web pages."
— 구글 라이트하우스 공식 GitHub 저장소 리드미 첫 구절.
빨간색 경고창(0~49점)을 목격한 프론트엔드 개발자들을 야근의 늪으로 몰아넣고, 소수점 단위의 용량 낭비도 용납지 않으며 숨 막히는 웹 다이어트를 감행케 만드는 지상 최고의 잔소리꾼. 성능 점수 100점을 드디어 찍고 기뻐했으나, 구글 애드센스 광고 스크립트 하나를 붙이는 순간 점수가 다시 50점대로 반 토막이 나는 기적을 경험하게 된다
1. 개요
Lighthouse는 구글이 개발한 오픈소스 자동화 웹 페이지 품질 진단 도구다. 크롬 브라우저의 개발자 도구(F12)에 기본 탑재되어 있으며, 타겟 URL을 넣고 검사를 실행하면 마치 학교 성적표처럼 5개 영역의 품질 점수를 계산하여 화려한 인포그래픽 리포트로 뱉어낸다.
단순히 '로딩 속도가 빠르다/느리다' 식의 추상적인 평가에 그치지 않고, 어떤 자바스크립트 파일이 렌더링을 가로막고 있는지, 어떤 이미지의 크기가 비효율적으로 큰지 등 구체적이고 뼈 때리는 해결 가이드를 조목조목 제공한다. 구글이 검색 결과 노출 순위에 웹 페이지 성능 지표인 'Core Web Vitals'를 적극 반영하겠다고 선언한 이후, 현대 프론트엔드 개발자 및 마케터들에게 라이트하우스 점수는 생명 줄이자 권력의 척도로 군림하게 되었다.(...)
2. 라이트하우스의 5대 평가 과목
2.1. Performance (성능)
웹페이지가 얼마나 빨리 화면을 띄우고 유저의 클릭에 즉각 반응하는지 측정한다. 단순히 첫 로딩 속도만 보는 게 아니라, 아래에 서술할 'Core Web Vitals' 지표를 가혹하게 가중치 연산하여 점수를 매기기 때문에 과목 중 가장 점수가 안 나오기로 악명이 높다.1
2.2. Accessibility (웹 접근성)
스크린 리더를 쓰는 시각 장애인이나 키보드로만 조작하는 사용자가 웹사이트를 이용하는 데 제약이 없는지 검사한다. 이미지에 alt 속성이 비어있거나 글자 대비(Contrast)가 너무 낮으면 가차 없이 감점 철퇴를 맞는다.
2.3. Best Practices (권장사항)
웹 표준과 보안 가이드를 잘 따르고 있는지 평가한다. HTTPS 프로토콜을 사용하고 있는지, 취약한 구버전 JS 라이브러리를 쓰고 있지는 않은지, 콘솔창에 경고 에러가 나뒹굴고 있지는 않은지 감시한다.
2.4. SEO (검색엔진 최적화)
구글 같은 검색 로봇이 사이트의 내용을 오해 없이 편하게 긁어갈 수 있도록 메타 태그(title, description 등)를 제대로 박아놨는지 확인한다. 사실상 이 영역은 가이드대로 태그만 잘 넣어두면 가장 쉽게 100점을 따는 보너스 스테이지다.
2.5. PWA (프로그레시브 웹 앱)
해당 사이트가 PWA 스펙을 만족하여 홈 화면에 독립 앱으로 설치될 준비가 완료되었는지를 검사한다.
3. 세계를 뒤흔든 3대 지표, Core Web Vitals
3.1. 개발자를 잠 못 들게 하는 세 가지 이니셜
과거 구글은 단순히 onload 이벤트 타임으로 속도를 쟀으나, 이는 화면에 하얀 도화지만 뜨고 아무것도 못 누르는 상태도 '로딩 완수'로 계산하는 맹점이 있었다. 이를 반성하고 유저가 피부로 느끼는 로딩 체감을 계량화한 것이 바로 Core Web Vitals다.
- LCP (Largest Contentful Paint - 최대 콘텐츠 페인트): 페이지가 로드될 때 가장 큰 덩어리(히어로 이미지, 메인 타이틀 텍스트 등)가 화면에 완전히 나타나기까지 걸린 시간이다. 2.5초 이내에 들어오는 것이 정석이며, 이보다 느리면 사이트가 굼떠 보인다는 판정을 받는다.
- FID (First Input Delay - 최초 입력 지연): 유저가 화면을 보고 처음으로 버튼을 클릭했을 때, 브라우저가 실제로 그 이벤트의 처리를 시작할 때까지 걸리는 렉(Delay) 시간이다. 100ms 이내여야 유저가 쫀득쫀득한 반응성을 체감한다.(...)2
- CLS (Cumulative Layout Shift - 누적 레이아웃 이동): 웹사이트 로딩 도중 뒤늦게 광고 이미지 등이 툭 튀어나오면서 화면 레이아웃이 덜컥거리며 밀려 내려가는 불쾌한 현상을 점수화한 것이다. 유저가 '동의'를 누르려다가 광고 때문에 밑으로 밀려난 '결제' 버튼을 잘못 누르는 불상사를 막기 위해 도입되었으며, 0.1 이하의 극히 적은 레이아웃 흔들림만 허용된다.
4. 관련 밈 및 드립
4.1. 초록색 100점의 광기 (Green Light Obsession)
라이트하우스 5과목이 모두 초록색 동그라미(90~100점)로 채워지는 순간, 프론트엔드 개발자는 오르가즘에 가까운 변태적 희열을 느낀다. 이를 달성하기 위해 이미지를 아예 초고화질에서 도트로 수준을 떨어뜨리고, 멋진 외부 웹 폰트를 지우고 개성 없는 시스템 굴림체로 화면을 도배하며, 풍부한 애니메이션 라이브러리를 다 쓰레기통에 내버려 버리는 등 '100점 스코어를 위해 사용자 경험(UX)과 타협'하는 주객전도 현상이 빈발하여 커뮤니티에서는 조롱 섞인 밈으로 유행한다.
5. 여담
- 내 컴퓨터는 왜 점수가 달라?: 라이트하우스 검사를 돌릴 때 크롬 창에 깔린 타사 확장 프로그램(AdBlock 등)이 쿼리를 가로채거나 CPU를 처먹으면 점수가 무섭게 흔들린다. 때문에 가장 엄밀한 검사를 위해서는 무조건 시크릿 모드 (Incognito Window)를 띄우고 검사를 돌리는 것이 우주의 진리다.
- 구글 애드센스의 모순: 아이러니하게도 구글의 돈줄인 '구글 애드센스(AdSense)' 광고 스크립트는 라이트하우스가 가장 극단적으로 혐오하는 무겁고 더러운(?) 레거시 코드다. 자사 광고를 붙이자마자 자사 분석 도구가 점수를 박살 내버려 개발자들은 분통을 터뜨린다.
- 점수와 이탈률의 역학관계: 구글의 통계에 따르면 모바일 페이지 로딩 속도가 1초에서 3초로 늦어질 때 방문자의 이탈률은 무려 32% 증가하며, 5초를 넘어가면 90% 이상이 뒤로 가기를 누른다. 그러니 시어머니의 잔소리는 다 돈으로 환산되는 눈물겨운 지적이었던 셈이다.