lighthouse 가 먼데 그래서 ?!
안녕하세요 여러분
오늘은 Light house 에 대해서 알아보겠습니다
웬 등대 ...?! 라고 생각할 수 있을 것 같아요
이번에 조사하면서 왜 등대라는 이름일까... 의문이었는데
최적화하기 위해 옳은 길을 인도해준다는... 느낌이지 않을까 합니다
목차
LCP, FID, CLS, FP가 무엇인지
lighthouse에는 어떤 정보들이 들어있는지
성능측정은 어떻게 하는것인지
❓ Lighthouse(라이트하우스)란 무엇인가?
Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 오픈 소스 형태의 자동화 도구입니다. 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있습니다.
사용법도 간단한데요, Lighthouse 크롬 확장 프로그램을 설치하여 시작할 수 있습니다.
그리고 개발자 도구를 열어서 light house 탭에서 손쉽게 시작할 수 있습니다.
저의 4주차 솝트 과제 메인페이지의 검사 결과는 다음과 같네요.
여기에는 카테고리별 측정 항목 및 점수, 계산 방식, 최적화 방안 등이 리포트에 포함되어 있습니다. Lighthouse 탭에서 바로 확인할 수 있으며, json이나 gist로 저장해두고 Lighthouse Report Viewer 사이트에서 언제든지 이전 결과를 다시 확인해 볼 수 있습니다.
#1 performance - 성능 카테고리(가장 중요)
성능의 측정항목은 6가지 Metric으로 정의됩니다. 각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.
신호등 컬러코드는 항목별로 정해진 기준에 따라 지정되며, Metric마다 속도(소요 시간)와 점수에 대한 기준이 다릅니다. 초록색은 빠름, 노란색은 중간, 빨간색은 느림을 나타냅니다.
light house 로 확인할 수 있는 지표는 다음과 같습니다.
6 Metrics
First Contentful Paint
FCP
사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간
Speed Index
웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간
Largest Contentful Paint
LCP
뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링 될 때까지 걸리는 시간
Time To Interactive
웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때까지 걸리는 시간
TTI 점수를 높이는 방법
JavaScript 실행 시간 최소화
Total Blocking Time
TBT
웹 페이지가 사용자 입력에 응답하지 못하도록 차단된 총 시간
= 로딩 중 메인 스레드가 긴 시간동안 중단되어 응답을 받을 수 없을 정도로 걸린 시간
Cumulative Layout Shift
사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수. 레이아웃 불안정이 사용자에게 미치는 부정적인 영향에 대해 검사 가능.
조금 더 내려보면 진단 결과도 나온다.
특히 빨간 세모로 된 항목들은 고쳐 주는 것이 좋다고 하니 참고해봐야겠다.
(width만 정해주면 height까지 자동으로 지정되길래 별 생각이 없었는데 딱 걸렸다)
#2 접근성
성능 다음으로는 접근성에 대한 리포트가 나온다. 여기서는 다양한 사용자들이 어려움 없이 사이트를 이용할 수 있는 여러 접근성 규칙을 따르지 않는 요소들을 집어서 알려준다. 다양한 사람들이란 인터넷 상에서 장애인, 고령자 등을 포함한 모든 웹사이트 사용자를 칭한다. 시력이 좋지 않거나 오디오를 들을 수 없는 사람들도, 이미지나 오디오의 내용을 읽을 수 있도록 콘텐츠를 제공해야 한다.
이미지에 alt 속성을 추가해야 하는 것처럼 input 태그에도 라벨을 붙여야 한다.
alt나 label 속성은 스크린 리더와 같은 보조 기술들에게 꼭 필요한 속성인 뿐만이 아니라 크롤러를 위해서도 꼭 필요하다.
3. 권장사항
Best Practices는 웹사이트가 대체적으로 보안과 관련한 조건들이 충족되고 있는지를 알려준다. HTTPS를 사용하는지, 동일 출처 정책은 잘 지켜지고 있는지, deprecated 되거나 보안에 취약한 라이브러리를 사용하는지 등의 요건을 충족할수록 점수가 올라간다.
4 검색엔진 최적화
마지막은 SEO이다. 구글의 검색 결과 순위와 SEO 점수는 완벽히 대응한다고 할 수 없다. 기본적인 요건을 갖추고 있느냐에 대한 점수인 거지 해당 페이지 내의 콘텐츠가 어느 정도의 퀄리티를 가지는지, 검색어에 잘 걸리는 키워드를 사용하고 있는지 등 딥한 내용은 하나도 고려하고 있지 않다. 위에만 봐도 도큐먼트에 메타 정보가 없다는 식으로 개선점을 제안하는 것을 보면, 콘텐츠와 상관없이 프로그래머가 기본적으로 작업해 주면 되는 조건을 요구하고 있음을 알 수 있다.
생각보다 많은 정보를 확인할 수 있고,
최적화에 엄청 도움이 되는 것을 확인할 수 있었다!
light house 를 이용해서 최적화에도 힘쓰는 개발자가 되도록 노력해야겠다.
공식사이트
Lighthouse Performance Scoring
