왜 웹사이트 속도가 중요한가?
검색 엔진 결과에서 웹사이트 순위를 높이기 위해서는 사이트 속도가 결코 간과할 수 없는 핵심 요소입니다. 빠른 로딩 속도는 사용자 경험을 향상시킬 뿐만 아니라 검색 노출 증가로도 이어집니다. 누구도 페이지를 클릭한 후 오랫동안 로딩을 기다리고 싶어 하지 않기 때문입니다. 웹사이트가 느린 속도 때문에 순위에 오르지 못한다고 걱정되신다면, 구글 라이트하우스(Google Lighthouse)가 훌륭한 해결책이 될 수 있습니다.
"첫인상이 곧 마지막 인상"이라는 말이 있듯이, 빠르게 로딩되는 웹사이트는 우수한 사용자 경험을 제공하며, 이는 궁극적으로 전환율 상승으로 이어질 수 있습니다. 실제로 구글을 비롯한 주요 검색 엔진은 로딩 속도가 빠른 웹사이트를 검색 결과의 더 높은 순위에 배치합니다.
구글 라이트하우스란?
구글 라이트하우스는 웹 개발자와 사이트 운영자가 웹 페이지의 품질을 평가하고 개선하는 데 도움을 주는 오픈소스 자동화 도구입니다. 모바일과 데스크톱 환경 모두에서 성능(Performance), 접근성(Accessibility), 권장 사항(Best Practices), SEO 감사를 지원합니다. 상세한 보고서와 개선 권장 사항을 바탕으로 사용자 참여도를 높이도록 사이트 성능을 최적화할 수 있습니다. 라이트하우스는 공개 페이지든 비공개 페이지든 어떤 웹 페이지든 대상으로 실행할 수 있습니다.
방법 1: 크롬 확장 프로그램으로 직접 실행하기
라이트하우스는 구글 확장 프로그램 형태로도 제공되며, 다운로드하여 크롬 브라우저에서 바로 감사를 실행할 수 있습니다. 아래 단계를 따라 해 보세요.
1. 웹 브라우저에서 Chrome 웹 스토어의 라이트하우스 확장 프로그램 페이지로 이동합니다.
2. Add to Chrome(Chrome에 추가) 버튼을 클릭합니다.
3. Add extension(확장 프로그램 추가)을 선택해 설치를 확정합니다.
4. 설치가 완료되면 분석하고 싶은 웹사이트를 브라우저에서 엽니다.
5. 주소창 옆의 확장 프로그램(퍼즐) 아이콘을 클릭하고 Lighthouse를 선택합니다.
6. Generate report(보고서 생성) 버튼을 클릭합니다.
이것으로 끝입니다! 몇 초 후 라이트하우스가 테스트한 웹사이트에 대한 상세 보고서를 생성해 줍니다.
방법 2: PageSpeed Insights 활용하기
구글 PageSpeed Insights 역시 라이트하우스를 분석 엔진으로 사용하는 웹 성능 테스트 도구입니다. 이를 통해 웹사이트 보고서를 생성할 수 있습니다.
1. PageSpeed Insights 웹사이트에 접속합니다.
2. 입력 필드에 웹사이트 URL을 입력하고 Analyze(분석) 버튼을 클릭합니다.
테스트가 완료되면 실제 사용자들이 경험한 결과를 보여주는 Chrome 사용자 경험 보고서(CrUX)를 받게 됩니다.
'성능 문제 진단' 섹션에는 라이트하우스 점수가 표시됩니다. 모바일과 데스크톱 결과를 각각 확인할 수 있습니다.
방법 3: DevTools에서 라이트하우스 실행하기
라이트하우스는 구글 크롬 DevTools에 자체 패널을 갖추고 있어, 로컬 서버에서 실행 중인 웹사이트나 로그인이 필요한 사이트의 성능도 테스트할 수 있습니다. 방법은 다음과 같습니다.
1. 감사하려는 웹사이트에 접속합니다.
2. 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 뒤 메뉴에서 Inspect(검사)를 선택합니다.
3. >> 아이콘(더보기 탭)을 클릭하고 컨텍스트 메뉴에서 Lighthouse를 선택합니다.
4. 우측 상단의 Analyze page load(페이지 로드 분석) 버튼을 클릭하고 결과가 준비될 때까지 기다립니다.
참고: Device(기기)를 적절히 선택하고 모든 Categories(카테고리)를 활성화해 두세요.
또한 테스트 모드를 변경할 수도 있습니다. DevTools의 라이트하우스는 세 가지 테스트 모드를 제공합니다.
- Navigation(탐색): 성능, 접근성, SEO를 포함한 전반적인 결과를 표시합니다.
- Timespan(기간): 페이지가 로드되고 사용자와 상호작용하는 동안의 결과를 보여줍니다. 테스트가 진행되는 동안 직접 페이지와 상호작용해야 합니다.
- Snapshot(스냅샷): 현재 페이지 상태에 대한 점수를 계산합니다.
방법 4: 명령줄(Command Line)로 라이트하우스 모듈 사용하기
라이트하우스는 Node 모듈로도 제공되므로, 지속적 통합(CI) 시스템에 통합하거나 명령줄 또는 프로그래밍 방식으로 활용할 수 있습니다. Node.js만 설치되어 있다면 아래 단계를 따르면 됩니다.
1. 서버에 로그인한 후, 다음 명령어를 실행해 라이트하우스 전역 모듈을 설치합니다.
npm install -g lighthouse
2. 설치가 완료되면 다음 명령어로 라이트하우스 테스트를 실행합니다.
lighthouse --view <url>
사용 가능한 모든 옵션은 아래 명령어로 확인할 수 있습니다.
lighthouse --help
라이트하우스 점수는 어떻게 계산될까?
구글 라이트하우스는 성능, 접근성, 권장 사항, SEO, PWA 등 웹사이트 성능 지표의 다양한 측면을 종합적으로 평가합니다. 감사가 완료되면 각 항목별 점수와 함께 웹사이트의 성능과 사용자 상호작용을 개선하기 위한 권장 사항이 담긴 보고서를 생성합니다. 웹사이트는 일반적으로 0점에서 100점까지의 척도로 평가됩니다.
성능(Performance)
라이트하우스는 웹 페이지가 얼마나 빠르게 로드되는지 분석합니다. 성능 점수는 다음 지표들을 반영해 계산됩니다.
- FCP(First Contentful Paint, 최초 콘텐츠 페인트): 콘텐츠의 첫 번째 요소가 화면에 그려지기까지 걸리는 시간
- LCP(Largest Contentful Paint, 최대 콘텐츠 페인트): 가장 큰 콘텐츠 요소가 화면에 표시되기까지 걸리는 시간
- CLS(Cumulative Layout Shift, 누적 레이아웃 이동): 페이지 로드 중 발생하는 예기치 않은 레이아웃 이동의 정도로, 시각적 안정성을 평가합니다. CLS가 낮을수록 웹사이트가 안정적이라는 의미입니다.
- TBT(Total Blocking Time, 총 차단 시간): 메인 스레드가 차단되어 사용자 입력에 반응하지 못하는 시간
- Speed Index(속도 지수): 페이지의 모든 콘텐츠가 완전히 표시되기까지의 속도
이러한 지표들은 웹사이트의 로딩 속도와 시각적 안정성을 측정합니다. 이미지의 크기와 개수, 사용 중인 플러그인의 수, 웹사이트 코드의 효율성 등 여러 요소가 이 보고서에 영향을 미칩니다.
라이트하우스는 지표 값들의 가중 평균을 통해 점수를 산출합니다. 당연히 가중치가 높은 지표일수록 전체 성능 점수에 더 큰 영향을 미칩니다. 지표별 점수는 보고서에 직접 표시되지 않지만 내부적으로 계산됩니다. 'See calculator(계산기 보기)' 옵션을 클릭하면 웹사이트에 영향을 주는 요소들의 세부 계산 내역을 확인할 수 있습니다.
접근성(Accessibility)
접근성은 장애가 있는 사용자가 웹사이트에 얼마나 쉽게 접근할 수 있는지를 측정하는 사용자 중심 점수입니다. 이미지 대체 텍스트(alt)의 유무, ARIA 속성의 사용 여부, 키보드 접근성 등의 요소가 영향을 미칩니다. 각 접근성 감사는 통과 또는 실패로 판정되며, 성능 감사와 달리 부분 통과에는 점수가 부여되지 않습니다.
- 이미지 대체 텍스트(Alt Text): 페이지의 모든 이미지에는 적절하고 설명적인 대체 텍스트가 포함되어야 합니다. 스크린 리더로 이미지를 해석하는 시각 장애인에게 필수적입니다.
- 시맨틱 HTML: 제목, 헤딩, 목록 등 시맨틱 HTML 요소를 올바르게 사용하면 스크린 리더 및 기타 보조 소프트웨어가 페이지 구조를 이해하는 데 도움이 됩니다.
- 색상 대비(Color Contrast): 텍스트와 배경 간의 색상 대비는 웹 콘텐츠 접근성 지침(WCAG)이 정한 기준을 충족해야 합니다. 충분한 색상 대비는 저시력자나 색약·색맹 사용자도 텍스트를 읽을 수 있도록 보장합니다.
권장 사항(Best Practices)
라이트하우스는 웹사이트가 웹 개발 모범 사례와 코딩 표준을 얼마나 잘 따르고 있는지 측정하고, 이를 기준으로 점수를 부여합니다. 최신 JavaScript 기능의 사용과 보안 연결(HTTPS)을 확인하며, 코드 압축(minification) 및 압축(compression) 사용 여부, 보안 헤더의 존재, robots.txt 파일의 활용 등이 점수에 영향을 줍니다. 주요 감사 항목은 다음과 같습니다.
- 대형 JavaScript 라이브러리 피하기
- 사용하지 않는 CSS 제거하기
- 텍스트 압축 활성화하기
- 렌더링 차단 리소스 제거하기
- 브라우저 캐싱 활용하기
- 효율적인 캐시 정책으로 정적 자산 제공하기
SEO
SEO는 웹사이트가 검색 엔진에 얼마나 잘 최적화되어 있는지를 측정합니다. 메타 디스크립션과 타이틀 태그의 존재 여부, 관련 키워드의 사용, 콘텐츠 구조 등이 영향을 미칩니다. SEO 점수는 다음 감사 항목들의 평균으로 계산됩니다.
- 문서 제목(Document Title)
- 설명(Description)
- 헤딩(Headings)
- 이미지(Images)
- 링크(Links)
- 메타 디스크립션(Meta Description)
- robots.txt
결과를 해석하는 방법
라이트하우스는 각 원시 지표 값을 0~100점의 지표 점수로 변환합니다. 점수가 높을수록 좋습니다. 지표 점수는 다음 범위에 따라 색상으로 구분됩니다.
- 0~49점 (빨간 삼각형): 나쁨(Poor)
- 50~89점 (주황 사각형): 개선 필요(Needs Improvement)
- 90~100점 (초록 원): 좋음(Good)
같은 웹사이트에서 테스트를 반복하면 전체 점수가 달라지는 경우가 흔합니다. 이러한 변동성은 몇 가지 요인에서 비롯됩니다.
- 각 분석은 단 한 번의 페이지 로드에 대한 정보만 제공합니다. 두 번의 페이지 로드가 완전히 같을 수 없으므로 로딩 시간은 자연스럽게 달라질 수 있습니다.
- 광고나 자주 변경되는 요소 같은 동적 콘텐츠, 네트워크 요청을 변경하는 브라우저 확장 프로그램, PC의 백그라운드 작업 등이 페이지 속도에 영향을 줄 수 있습니다.
- PageSpeed Insights와 로컬 컴퓨터처럼 서로 다른 환경에서 얻은 점수는 하드웨어와 네트워크 조건의 차이로 인해 직접 비교하기 어려울 수 있습니다.
라이트하우스 점수를 개선하는 방법
라이트하우스는 웹 페이지의 성능을 평가하기 위해 실험실 데이터(시뮬레이션 테스트)와 현장 데이터(실제 사용자 데이터)를 모두 제공합니다. 현장 데이터는 실제 사용자가 사이트를 어떻게 경험하는지에 대한 통찰을 제공하며, 실험실 데이터는 변경 사항과 개선 효과를 테스트하는 데 유용합니다.
먼저 성능 영역의 권장 사항에 집중하세요. 로딩이 빨라진 웹사이트는 사용자 경험을 개선하고 SEO 순위 상승에도 도움이 될 수 있습니다. 성능 점수가 개선되면 이후 다른 영역의 권장 사항에 집중하기 시작하면 됩니다. 접근성과 SEO는 웹사이트 전반의 품질에서 필수적인 요소이므로, 이 영역들도 개선하는 데 노력을 들일 가치가 충분합니다.
초보자를 위한 추가 팁
방금 웹사이트를 디자인하고 출시했다면 다음 팁들도 기억해 두세요.
- 라이트하우스 보고서의 수많은 제안에 압도되지 마세요. 가장 중요한 조언부터 시작해 목록을 하나씩 처리해 나가면 됩니다.
- 라이트하우스 보고서를 활용해 시간에 따른 발전 상황을 추적할 수 있습니다. 권장 사항을 실행할수록 라이트하우스 점수도 함께 향상될 것입니다.
- 여러 기기와 브라우저에서 웹사이트를 테스트하는 것을 잊지 마세요. 라이트하우스 보고서는 단일 테스트를 기반으로 하므로, 모든 사용자에게 사이트가 원활하게 작동하는지 확인하려면 다양한 기기와 브라우저에서의 테스트가 필수적입니다.
이 가이드가 구글 라이트하우스를 활용해 웹사이트 성능을 테스트하고 개선하는 방법을 이해하는 데 도움이 되었기를 바랍니다. 궁금한 점이나 제안 사항이 있다면 댓글로 알려주세요.