Lighthouse 사용법
안녕하세요 밤구름입니다.
이번 포스팅은 라이트하우스에 대해서 작성해 볼예정입니다.
1.Lighthouse란?
Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구입니다.
간단히 말하자면 웹페이지의 성능 및 개선점을 알려주는 좋은 도구 입니다.
어떤 웹 페이지든 손쉽게 확인 할수 있습니다
2.Lighthouse 사용법
사용법은 간단합니다. F12키, 혹은 Ctrl + Shift + i 를 눌러 개발자 도구를 불러옵니다.
그 뒤에 위의 사진에보이은 탭메뉴중 제일 오른쪽에 위치한 Lighthouse 탭을 누릅니다.
위의 페이지에서 Generate report의 버튼 클릭을 통해 웹페이지의 상태를 판단할 수 있습니다.
오른쪽에서 데스크탑과 모바일을 클릭하여 모바일일때, 데스크탑일때의 점수를 각각 확인 가능할수 있습니다.
3.Lighthouse 결과
Performance(속도)
Lighthouse는 실제 속도가 어떻든 간에, 화면에 콘텐츠가 얼마나 빨리 표시되고 사용자는 얼마나 빠르게 해당 콘텐츠를 인식하는 지에 더욱 초점을 맞추고 평가합니다. 속도 저해요소가 무엇인지 평가 합니다.
Accessibility(웹 접근성)
Lighthouse는 웹 애플리케이션의 접근성을 검사한다. <img> 태그에 alt 속성이 있는지, <html> 태그에 lang 속성이 있는지, 배경색과 전경색의 대비가 충분한지와 같은 항목을 확인합니다.
Best Practices(오류확인)
Lighthouse는 웹 페이지가 웹에 대한 표준 모범 사례를 따르고 있는지 확인합니다. 웹 애플리케이션을 가동할 때 콘솔에 오류가 출력되진 않는지, 더는 사용하지 않는 API를 호출하고 있지 않은지, HTTPS를 통해 해당 페이지에 접근할 수 있는지와 같은 항목을 확인합니다. 불필요한 코드를 찾아냅니다.
SEO(검색엔진)
Lighthouse는 웹 페이지가 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 확인합니다. 각 사용자가 자신의 디바이스를 이용하여 웹 페이지에 접근하였을 때 그들이 콘텐츠를 읽는 데에 무리가 없는 글꼴 크기를 사용하는지, 웹 페이지의 robots.txt 파일이 유효한지, 올바른 상태 코드를 사용하는 지와 같은 일부 SEO 모범 사례를 확인합니다.
다른 SEO프로그램도 있지만 라이트하우스에서 제공하는 SEO도 유용하다고 판단됩니다. 구글이 채택한 SEO에요!!
Progressive Web App(적합여부)
Lighthouse는 Progressive Web App을 정의하는 일련의 기준에 따라 웹 페이지를 확인합니다. 이 검사는 해당 웹 페이지가 항목을 따르고 있는지 측정하여 점수를 부여하는 것이 아니라 웹이 HTTP를 HTTPS로 리다이렉션하는지, 응답 코드는 명확한지, 3G 네트워크에서도 로딩이 빠르게 이루어지는 지와 같은 여부를 검사하여 합격 또는 실패를 판별합니다.
무료로 사용하기에 좋은 코드는 라이트하우스 사용해보시는 것을 추천드립니다.
별다른 설치 없이 개발자환경에서 쉽게 사용가능합니다
'etc[자료들] > Open Source' 카테고리의 다른 글
| 자주 사용하는 cdn 코드들 (2) | 2021.11.25 |
|---|---|
| qrcode.js 다운로드 (0) | 2021.09.15 |
| 쉽게 사용하는 turn.js 튜토리얼 (1) | 2021.09.14 |
| 쉽게 사용하는 qrcode.js 튜토리얼 (0) | 2021.09.14 |
