헤더 영역 바로가기 컨텐츠 영역 바로가기 푸터 영역 바로가기
썸네일

lighthouse를 통해 사이트를 최적화 해보자

CODi

2024-10-13 19:27

Lighthouse란?

Lighthouse는 Google에서 제공하는 오픈소스 도구로, 웹사이트의 성능, 접근성, SEO(검색엔진 최적화) 등 다양한 요소를 분석하고 개선할 수 있도록 도와주고 있어요,

웹사이트의 품질을 자동으로 테스트하여 개선해야 할 부분을 보여주며, 이를 통해 사용자 경험을 향상시키는데 많은 도움이 되고있습니다.

측정 해볼 수 있는 항목

• Performance : 페이지 로딩 시간, 속도 최적화 등을 분석해 웹사이트 성능을 진단해요.

• Accessibility : 시각, 청각 등의 장애가 있는 사용자가 웹사이트를 사용하는 데 문제가 없는지 점검해요.

• Best Practices : 최신 웹 표준과 보안 문제 등을 평가해 웹사이트가 안전하고 효율적인지 확인해요.

• SEO : 검색엔진에서 웹사이트가 잘 검색되고 있는지, 메타 태그나 페이지 구조가 최적화되어 있는지를 분석해요.

​​사용법

브라우저에 내장되어있는 브라우저도 있지만 없을경우

하단의 라이트 하우스 링크를 클릭하여 extension을 설치해줍니다.

https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?pli=1

설치를 다 하셨다면 다음과 같은 순서로 진행하시면 됩니다.

브라우저의 검사 - lighthouse - 모드, 장치, 범주를 설정하여 세부 항목 조절 - 페이지 로드 분석 버튼 클릭

활용예시

저는 인터렉티브한 애니메이션과 이미지들이 다수 포진되어있는

제 포트폴리오 사이트를 대상으로 측정을 진행해봤습니다.

라이트 하우스 측정
다음과 같이 각 항목별로 몇초가 걸렸는지 알 수 있습니다​

기존에 Lighthouse를 참고해 각 항목들을 최적화 해두었기 때문에 중간중간 수정이 있었음에도 점수가 나쁘지 않게 나왔네요 ㅎ...
라이트 하우스 측정 후 문제되는 항목
또한 이렇게 어떠한 항목이 문제가 되어 개선하면 될지 항목을 알려주기도 합니다.

마치며

라이트 하우스는 이처럼 내 웹사이트가 느려지는 이유에 대해 상세히 알려주어

성능을 최적화 하는데 있어서 많은 도움을 주기도 합니다.

점수가 절대적인것은 아니지만 lighthouse를 통해 최소한의 성능 개선을 위한 코드를 작성 할 수 있도록 많이 노력해봐요!