크롬 브라우저를 이용해 Lighthouse 기능으로 코어 웹 바이탈 검사하기

요즘 SEO를 위해 웹사이트를 최적화 하다보면 여러 보조지표가 눈에 보인다.

예전엔 단순히 페이지 로딩속도, 메타데이터 정도만 확인하는게 검색엔진 최적화였지만, 그런 조건을 만족하는 피싱사이트가 많아지자 검색엔진도 여러가지 보조지표를 통해 웹사이트가 유용한 정보를 가지고있고, 사용자 친화적인 사이트인지 판단하게 된다.

특히나 요즘 구글 검색엔진이 밀고있는 보조지표는 '코어 웹 바이탈'이라고 구글이 웹사이트의 사용자 경험(UX, User Experience)을 평가하기 위해 사용하는 핵심 성능 지표다.

이런 지표는 기본적인 페이지 로딩속도부터 시작해서, 인터랙션 성능, 레이아웃 안정성등을 측정한다.

구글은 이 코어 웹 바이탈 수치를 인용해 SEO 순위에 반영하므로 이를 적절히 보완해둬야 검색엔진 결과에 쉽게 노출될 수 있다.

코어 웹 바이탈을 조회하기 위한 방법은 몇가지가 있는데, 가장 접근이 편한것은 Google PageSpeed Insights 이다.

해당 페이지에 접근해서 체크를 원하는 URL을 입력하면 아래 스크린샷처럼 기본적인 페이지 체크 내용과 함께 여러 코어 웹 바이탈 지표를 확인할 수 있다.

하지만 이는 웹 사이트에서 매번 체크요청을 해야하는것이고 생각보다 체크하고 보고서를 받는데 시간이 걸려서 더 쉽게 할수있는 방법이 없나 찾아보니까 위와 같은 결과를 받아볼 수 있는 크롬 브라우저의 확장프로그램이 있다는 것을 알게되었다.

이 기능은 크롬 확장프로그램으로 사용하는 것이므로 일단 크롬 브라우저를 사용해야한다.

크롬 브라우저로 아래 링크에 들어가면 확장 프로그램을 설치할 수 있다.

설치완료하면 확장프로그램 탭에 아래와 같이 등대 아이콘이 뜨면 성공이다.

그리고 내가 검사할 사이트에 들어간 이후 브라우저의 개발자 화면(Inspector)를 띄워보자.

F12 또는 Ctrl+Shift+J, 맥이면 command+option+I 버튼으로 화면을 띄울 수 있다.

개발자 모드 창에서 Lighthouse를, 안보이면 메뉴 더보기를 통해 해당 탭을 찾아 가보자.

그러면 아래와 같이 화면이 나온다.

필요한 모드와 디바이스를 선택하고 우측상단의 [Analyze page load]를 클릭해보자.

그러면 현재페이지가 다시 로딩되며 몇번깜빡이고 코어 웹 바이탈 검사를 실시한다.

검사가 끝나면 아래와 같이 결과 화면이 나온다.

그도그럴게 페이지스피드 인사이트에서도 이 Lighthouse의 결과를 인용하기때문에 해당 사이트에서 조회하는 검사를 그대로 내 브라우저에서 실시할 수 있다.

단 내 브라우저에서 로컬로 실시하는 검사다보니 웹사이트에서하는 검사보다 속도쪽 검사는 꽤나 좋게나오니, 어느정도 감안해서 봐야할것이다.

실제로 여기서는 속도보다는 CLS등의 UX 지표 검사를 우선적으로 검사, 보완하고 속도쪽은 구글 페이지스피드 인사이트에서 하는것이 훨씬 객관적일 것이다.

끝