light house 가 뭘까....
프론트엔드 개발자가 바라는 것
우리는 개발을 하고, 개발을 한다. 웹 개발을 통해서 우리가 바라는 것이 뭘까...
먼저 우리는 멋진 서비스를 만들기를 바랄것이다. 버벅임 없이 안정적으로 사용자에게 도움을 줄 수 있는 그런것
또다른 바램은 우리가 만든 멋진 서비스를 많은 사람에게 노출시켜, 우리가 만든 서비스를 알리고 잘 사용할 수 있게끔 하는것 일것이다!
서비스가 안정적인가? 사람들에게 잘 노출 될 수 있는가? 이런 질문에 답변을 해줄 수 있는 것이 바로 light house 이다!
그럼 light house가 뭔데?
light house
Google Chrome에서 제공하는 웹 앱 품질을 개선에 도움을 주는 도구이다.
이를 통해서 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단이 가능하다
우리가 light house를 통해서 우리의 웹사이트를 진단하고 개선해 나간다면 멋진 서비스를 만들 수 있을것이다!
왜 light house를 사용해야하는데?
사실 Lighthouse를 사용하지 않고도 Performance 탭이나 Network 탭을 이용해서 이벤트 발생 시점이나 파일 크기를 분석할 수도 있다.. ( 본인은 이렇게 분석까지 해본적은 딱히 없지만)
그러면 왜 light house를 사용해야하는가 🤔
명확한 기준을 잡고 성능을 분석하기 위해서이다!!
light house의 성능 측정 기준
웹 애플리케이션이 커지면서 큰 스크립트와 많은 이벤트 등으로 성능을 측정하는 기준이 모호해지게 되었고 사용자 기준의 측정 방식이 등장하였다!
사용자 기준의 성능 측정은 사용자에게 의미 있는 콘텐츠가 처음 보이는 시점이 빠를수록 성능이 좋다고 판단한다.
예를 들어 위의 그림에서는 Optimized rendering 된 화면이, 사용자에게 처음 보이는 시점이 더 빠르므로 사용자 기준의 성능이 더 높다고 할 수 있다.
light house는 사용자 기준의 성능 측정 을 바탕으로 사용자가 로딩이 빠르다, 느리다를 느낄 수 있는 여러 순간을 정의하고 성능을 측정하는 지표로 사용한다.
light house 사용방법
설치 방법
google chrome 확장프로그램으로 다운 받으면 된다 ㅋ ㅋ 그럼 준비 끝이다 ㅋ
사용하는 과정
STEP 1
성능을 측정할 페이지로 간 뒤에, 개발자 도구를 열어 Lighthouse 탭으로 가보자
일단 우리는 데스크탑 웹을 측정할 것이므로 Desktop 옵션을 체크한다.
이후 Analyze page load 버튼을 클릭하면 현재 페이지가 자동으로 리로드되며 검사가 진행된다.
STEP2
검사가 완료되면 결과 리포트가 생성된다! 카테고리별 측정 항목 및 점수, 계산 방식, 최적화 방안 등이 리포트에 포함되어 있다!
( json이나 gist로 저장해두고 Lighthouse Report Viewer 사이트에서 언제든지 이전 결과를 다시 확인해 볼 수 있다 )
근데 리포트를 봐도 무슨 말인지 하나도 모르겠다...
각 지표가 뭘 뜻하는지 살펴보고 해당 지표에서 나의 서비스가 어떤지 판단해보자
이 지표가 뭘 뜻해?
(참고로 light house에서 pwa 지표는 삭제 예정이라고 함)
pwa를 제외한, Performance / Accessibility / Best practice / SEO 항목에 대해서 알아보자
1. Performance
Performance는 사용자가 얼마나 빠르게 컨텐츠를 인식하는지를 평가하는 지표이다. 성능 점수는 5가지 Metric의 가중 평균값으로 계산됨
5가지 Metric에 대해서 아라보자 (각 %는 가중치)
1. FCP (10%)
최초의 DOM 콘텐츠를 렌더링하는데 걸리는 시간
초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정. 첫번째 텍스트 또는 이미지가 표시되는 시간을 의미. FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을 줄 수 있다!
2. LCP (25%)
가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간
가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간. 보통 중요한 콘텐츠일수록 크기가 크기 때문에, Lighthouse는 LCP 점수에 가장 높은 가중치인 25%를 주어 계산함
LCP로 간주되는 요소
<img>요소<svg>안에 있는<image>요소<video>요소background-image 속성의 url()로 로드되는 요소
block 레벨 요소 (elements containing text nodes or other inline-level text elements children)
3. TBT (30%)
마우스 클릭 등 사용자 입력에 페이지가 응답하지 못하도록 차단된 총 시간
FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 측정함
마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 페이지가 응답하지 못하도록 차단된 총 시간을 의미한다. FCP와 TTI 사이의 모든 Long Task 블로킹 타임을 추가하여 계산함
TBT 점수를 높이는 방법 (= Long Task의 근본적인 원인을 제거하는 방법)
불필요한 JavaScript 로드, 실행 코드 제거
코드 분할을 통해 JavsScript payload 감소시키기
사용하지 않는 코드 삭제
4. CLS (15%)
로딩 후 폰트 크기 변경 등 예상치 못한 레이아웃 이동에 대한 점수
사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수. 레이아웃 불안정이 사용자에게 미치는 부정적인 영향에 대해 검사해 볼 수 있음.
5. SI (10%)
콘텐츠가 시각적으로 표시되는 진행 속도를 측정
리로드되는 페이지의 비디오를 캡쳐하여 프레임 간의 속도를 계산한다.
SI 점수를 높이는 방법
메인 스레드 작업 최소화
JavaScript 실행 시간 단축
폰트가 로드되는 중에도 텍스트가 계속 표시
2. Accessibility
Accessibility는 웹의 접근성을 평가하는 지표이다. 예를 들어서 시각 장애인들도 이미지에 대한 정보를 얻을 수 있게 <img> 태그에 alt 속성이 있는지, 배경색과 텍스트의 대비가 충분한지와 같은 항목을 확인한다.
3. Best Practice
Best Practices는 웹에 대한 표준 모범 사례를 따르고 있는지 평가하는 지표이다. 콘솔에 오류가 출력되진 않는지, 사용하지 않는 API를 호출하고 있지는 않는지, HTTPS를 통해 페이지에 접근할 수 있는지 등을 확인한다.
4. SEO
SEO는 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 평가하는 지표이다. meta 요소가 잘 작성되어 있는지, robots.txt 파일이 유효한지, 컨텐츠를 읽는데 글꼴 크기가 무리가 없는지 등등을 고려한다.
위에서 설명한 지표 탭을 클릭하면 하단에 어떤 문제가 있는지 확인해 볼 수 있다. 이러한 문제들을 해결해 나가면서 해당 지표의 점수를 높일 수 있다. 아래 SEO 예시를 보자!
SEO 100점 만들기
light house 의 SEO 탭
라이트 하우스에서 seo 탭을 클릭하면 seo 최적화 관련해서 어떤 문제가 있는지 파악할 수 있다.
밑에 사진의 CONTENT BEST PRACTICES를 예시로 들면
메타 설명이 없음: 웹 페이지에
<meta name="description" content="여기에 설명을 입력">형태의 메타 태그가 없어 검색 결과에서 페이지의 요약 설명을 제공하지 못하는 문제를 지적이미지 [alt] 속성 누락: 웹 페이지의 이미지 요소에 대체 텍스트(alt 속성)가 없어, 이미지가 로드되지 않거나 시각 장애가 있는 사용자가 페이지를 이해하는 데 어려움이 있음을 나타냄
이처럼 문제를 파악하고 하나하나 해결해가면서 본인의 웹의 문제점을 개선하고 SEO 점수를 증가시킬수 있다!!!!!!
lighthouse에는 SEO뿐만 아니라 위에서 설명한 지표(Performance / Accessibility / Best practice)들이 더 있다. 각 지표들의 탭을 클릭하여 문제를 확인하고 개선하여 점수를 올려보자!!
