본문 바로가기
마케팅/웹마케팅

웹페이지 품질측정 :: 구글 크롬 라이트하우스(Chrome Lighthouse)에 관하여

by 소소다이어리 2022. 11. 9.

 

블로그를 운영하거나 웹페이지를 운영하는 사람들은 

모두들 자신의 검색엔진의 상위에 노출되기를 바란다. 

 

그리고 내 사이트가 검색엔진의 상위에 노출되도록 

최적화 하는 것을 우리는 SEO(Search Engine Optimization)이라고 한다. 

 

어찌됐든 우리의 사이트가 상위에 노출되기 위해서는 

웹페이지의 퍼포먼스를 측정해야하는데 

그 측정 방법 중 하나가 바로 구글의 크롬 라이트하우스(Chrome Lighthouse)다. 

 

 

Chrome Lighthouse

크롬 라이트하우스는 크롬 브라우저 - 개발자도구에 있는 

웹사이트 퍼포먼스 측정 도구로, 구글이 직접 운영하는 오픈소스 형태의 프로젝트다. 

매우 편리하고, 직관적으로 사용할 수 있다는 장점이 있다. 

 

Chrome - Lighthouse

 

윈도우 기준으로는 (F12)를 누르고 접속하면 되고, 

맥 기준으로는 (option + command + i) 를 누르고 Lighthouse에 접속하면 된다. 

개발자도구에서 라이트하우스를 찾지 못하였다면 >> 버튼을 클릭하여 확인해보자. 

 

라이트하우스에 접속하면 저렇게 창이 뜨는데, 

카테고리 항목에서 검사할 항목들을 선택해주고 analyze 버튼을 눌러주면 된다. 

나는 웹페이지가 아니고 블로그이기 때문에 Progressive Web App을 제외하고 분석했다.

 

내 블로그에 대한 Lighthouse 수치

 

짠! 내 블로그에 대한 분석결과가 떴다. 

수치가 그닥 좋은편은 아니다ㅎㅎ;;

 

일단 이 수치들이 의미하는 바가 뭔지 알아보자!

 

 

Performance

웹사이트의 성능을 측정하는 수치다. 한마디로 로딩 속도!

로딩속도가 빠를수록 performance 수치는 높고, 

로딩속도가 느릴수록 performance 수치는 낮다. 

그래서 이 퍼포먼스 수치를 높이려면 사이트의 리소스를 최대한 절약해야한다. 

 

 

Accessibility

직역하면 접근성. 사용자가 경험하는 환경을 가르키는 수치인데, 

한마디로 사용자가 얼마나 편안한 환경에서 웹페이지를 사용하냐에 대한 수치다. 

이 사용자 환경에는 가독성이 포함되어 있어

폰트사이즈, 색상, 메뉴간격 등을 포함하고 있다. 

 

 

Best Practices

웹을 제작할 때, 표준 모범사례를 따르고 있느냐에 대한 수치이다. 

오류가 출력되진 않는지, https를 사용하는지 등에 대한 기본적은 수치를 나타낸다. 

 

 

SEO

검색엔진최적화 수치에 관련된 부분이다. 

마케팅에서 가장 많이 신경쓰는 부분 중 하나로,

SEO수치가 높으면 그만큼 검색엔진에서 검색을 했을 때 

상위권에 노출 될 확률이 높다는 것을 뜻한다. 

 

댓글