lighthouse를 통해 사이트를 최적화 해보자
•
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를 통해 최소한의 성능 개선을 위한 코드를 작성 할 수 있도록 많이 노력해봐요!