웹페이지 속도 측정하기 / 크롬 Google LightHouse

웹페이지 속도 측정하기가 필요한 이유

웹페이지를 운영할 때 가장 중요한 것은 무엇일까요? 웹페이지 방문자들의 관심을 끌만한 흥미로운 내용, 알찬 컨텐츠가 중요할까요?

네 맞습니다. 중요합니다. 하지만 그 전에, 자신의 웹사이트가 검색엔진에 노출이 되어야 합니다.

백날천날 열심히 글을 써봤자 아무도 읽어주지 않는다면 아무 소용이 없을 것입니다.

웹사이트가 검색엔진에 노출이 되기 위해서는 SEO(Search Engine Optimization, 검색 엔진 최적화) 라는 것이 필요합니다.

SEO란 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 적합한 형태로 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 뜻합니다.

그리고 이러한 SEO를 위한 방법 중 하나는 웹페이트의 속도를 빠르게 하는 것입니다.

구글 검색엔진 또한 페이지 로딩 속도가 빠른 웹사이트를 검색 결과 상위에 노출시키는 경향이 있죠.

구글 크롬 화면
구글 크롬 화면

Google LightHouse란?

전 세계 사용자의 90% 이상이 구글 검색엔진을 이용한다는 것은 다들 알고 계실 것입니다.

높은 트래픽을 위해서 라면, 웹사이트 운영자들은 자신이 발행한 글이 구글 검색 결과에 노출 되도록 하는 것이 이상적일 것입니다.

Pingdom, GTmetrix 같은 사이트를 통해서도 웹페이지 속도를 측정할 수 있지만, 우리들은 이런 사이트를 이용할 필요가 없습니다.

구글에서 직접 개발하고 운영하고 있는 SEO 측정 기능이 있기 때문인데요.

바로 구글 크롬(Chrome)의 개발자 도구 안에 포함된 LightHouse 라는 기능입니다.

이를 이용하면 구글 검색엔진에서 요구하는 웹페이지 성능, 접근성 및 검색 엔진 최적화에 힌트를 얻을 수 있습니다.

Goolge LgithHouse 로 웹사이트 속도 측정하기

먼저, Google Chrome 브라우저를 사용해야만 구글 라이트하우스를 이용할 수 있습니다. 인터넷 익스플로어를 이용하고 있다면 크롬을 다운로드 설치해주세요.

개발자 도구 열기
개발자 도구 열기

크롬 다운로드를 하셨으면, 자신이 테스트해보고자 하는 웹페이지를 열어주세요. 예시를 들어보기 위해서 국내 포털사이트인 NAVER를 켰습니다.

F12를 누르면 개발자 도구가 열리는데요 >> 표시를 누르면 Lighthouse라는 항목이 보입니다. 이를 눌러주세요.

LightHouse Generate report

Generate report 버튼을 누르면 LightHouse가 실행되는데요. 하단에 카테고리(Categories)가 있습니다.

Performance는 웹페이지의 성능, Progressive Web App과 Acessibility는 웹과 앱에 대한 접근성, Best practices는 권장사항, SEO는 검색엔진 최적화를 테스트하는 항목입니다.

모두 다 체크하고 Generate Report를 눌러주세요.

하단의 Device에서 Mobile을 선택하면 모바일 환경에서 웹페이지 속도를 측정할 수 있고, Desktop은 데스크톱 환경에서 측정되는 것입니다.

LightHouse 점수 측정결과
LightHouse 점수 측정결과

측정 결과는 수치로 나오게 됩니다.

  • 0~49 (빨간색) : 나쁨
  • 50~89 (주황색) : 개선필요
  • 90~100(녹색) : 좋음

구글에서는 좋은 사용자 경험을 제공하기 위해 사이트는 90~100점의 점수를 획득하는 것을 권장하고 있습니다.

우리가 이 검사 결과지에서 중요하게 봐야하는 것은 두가지 라고 볼 수 있겠는데요.

라이트하우스- 성능 점수
라이트하우스- 성능 점수

첫 번째로 성능 입니다. 이 항목이 웹페이지의 로딩 속도에 관여하고 있는데요. LightHouse 진단에 걸러진 항목들을 수정하면 웹페이지 속도 개선을 꾀할 수 있습니다.

개발자가 아닌 이상 크게 손대는 것은 많이 어렵기는 합니다. 우리가 손댈 수 있는 것 중에 네이버 같은 대형 사이트에서도 지적 당하는 것이 있어요.

바로 이미지 크기 적절하게 설정하기입니다. 웹사이트에 올라가는 이미지 크기를 최대한 줄여야합니다.

네이버의 경우 이미지 크기를 줄이면 사이트 속도가 0.72초 빨라진다고 하네요.

라이트하우스- 검색엔진 최적화 점수
라이트하우스- 검색엔진 최적화 점수

두 번째는 검색엔진 최적화 항목인데요. 이 검사를 통해서 페이지가 검색엔진 결과 순위에 최적화되도록 할 수 있습니다.

네이버에서는 이미지 요소에 alt 태그가 없다는 것과 링크에 설명 텍스트가 없음이 문제점으로 지적됬네요.

성능 항목과 검색엔진 최적화 항목에서 점수를 올리려고 노력한다면 웹페이지가 구글 SEO에 맞게 최적화가 될 것입니다.

개발자가 아닌 이상.. 웹사이트 건드리는 것이 상당히 어려울 테지만 구글링을 통해 힘을 내봅시다.

답글 남기기

이메일 주소는 공개되지 않습니다.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.