구글에서 제공하는 오픈소스 도구 중 웹사이트의 성능과 최적화 상태 등을 확인 분석할 수 있는 Google Lighthouse라는 도구가 있습니다. 웹사이트를 다양한 관점으로 분석하면서 최적화 상태를 시각적으로 표현하며, 개선이 필요한 부분을 확인할 수 있어 웹사이트 품질을 올리기 위한 가이드가 될 수 있습니다.
Google Light House에 대해서
먼저 Google Lighthouse란? 이라는 질문에 대해서 살펴보도록 하겠습니다. 웹사이트를 구성하는 다양한 항목을 분석해 성능, 접근성, SEO, PWA 지원 여부를 기준으로 평가합니다.
- Google Lighthouse 주요 기능
- 웹사이트 속도 및 성능 체크
- PC, Mobile 접근성
- 검색 엔진 최적화 점검
- 웹 표준 준수 여부 확인
- Progressive Web APP 지원 여부
활용 방안
Google Lighthouse를 이용해 점검한 홈페이지는 부족한 부분을 개선할 수 있습니다. 개선 시 얻을 수 있는 효과는 먼저 웹사이트의 속도가 빨라짐으로 인해 더 높은 순위로 검색될 수 있습니다. 또한 유저 이탈을 낮출 수 있습니다.
사용 방법
검사가 필요한 웹사이트에서 f12 버튼을 눌러 개발자 모드로 진입합니다. 여러 카테고리 중 Lighthouse를 선택하고 검사를 시작하면 됩니다. 모바일 환경으로 테스트가 필요하다면 디바이스 항목에서 Mobile을 클릭해 주시면 됩니다.
- 분석 항목
- 성능 최적화 : 브라우저 캐시 및 서버 응답 속도 등
- 접근성 : 올바른 태그 사용 및 탐색 지원 등
- 검색엔진 최적화 : 태그 최적화 및 구조화된 데이터
- PWA 점검 항목 : HTTPS, 오프라인 접근 등
초록색으로 표기되는 점수는 최적화가 되었다고 보면 됩니다. 90점 이상인 경우가 해당 됩니다. 주황색으로 표기 되는 50점 이상의 경우 보통 수준으로 일부 개선이 필요할 수 있습니다. 만약 50점 미만으로 인해 경고 표기가 활성화된다면 빠른 개선이 필요하다고 이해해 주시면 됩니다.
이렇게 구글에서 제공하는 Google Lighthouse를 이용해 간단하게 웹사이트 최적화 성능을 분석할 수 있습니다. 더 높은 품질의 홈페이지를 완성해 구글 검색에서 우위를 점해보시기 바랍니다.
'웹사이트 개발' 카테고리의 다른 글
웹사이트 구성 HTML, CSS, JavaScript 뜻 (0) | 2024.08.19 |
---|