라이트하우스(Lighthouse)의 Show results in에서 PSI Frontend와 Lighthouse Viewer의 차이점
티스토리 블로그를 구글에 노출이 잘 되게 하려면 속도, 성능, 접근성, 검색엔진 최적화 및 권장사항을 테스트하면서 그 수치를 끌어 올려주면 검색엔진에서 더 많은 노출이 발생합니다. 이에 자주 사용하는 라이트하우스(Lighthouse)입니다.
1. 라이트하우스(Lighthouse).
Lighthouse는 웹사이트의 성능, 접근성, SEO 등을 평가하는 데 사용되는 오픈 소스 도구입니다. "Show results in" 기능을 통해 두 가지 주요 결과 시각화 도구를 제공합니다.
2. PSI Frontend (pagespeed.web.dev)
Google PageSpeed Insights (PSI)의 웹 버전입니다.
- 페이지 속도에 중점을 둡니다.
- 핵심 지표 (Core Web Vitals) 및 기회 (Opportunities)를 제공합니다.
- 모바일 및 데스크톱 버전을 모두 지원합니다.
- 공개 웹사이트에만 사용 가능합니다.
분석범위
PSI Frontend는 웹 페이지의 프런트엔드 성능에 초점을 맞춥니다. 웹 페이지 로딩 속도, 이미지 최적화, JavaScript 코드 최적화 등을 분석합니다.
분석도구
PSI Frontend: PageSpeed Insights (PSI)라는 Google의 도구를 사용하여 분석합니다. PSI는 웹 페이지의 성능을 평가하고 개선 사항을 제안하는 데 사용되는 무료 온라인 도구입니다.
3. Lighthouse Viewer (googlechrome.github.io)
Lighthouse 데스크톱 응용 프로그램의 웹 버전입니다.
- 페이지 속도, 접근성, SEO, 최적화 등 다양한 측면을 평가합니다.
- 핵심 지표, 기회, 문제점 (Issues)을 제공합니다.
- 모바일 및 데스크톱 버전을 모두 지원합니다.
- 공개 웹사이트와 로컬 웹사이트 모두 사용 가능합니다.
분석범위
Lighthouse Viewer: 웹 페이지의 전반적인 성능을 분석합니다. 프런트엔드 성능뿐만 아니라 백엔드 성능, SEO, 접근성 등을 포함하여 더 광범위한 분석을 제공합니다.
분석도구
Lighthouse Viewer: Lighthouse라는 오픈 소스 도구를 사용하여 분석합니다. Lighthouse는 웹 개발자가 웹 페이지의 성능을 평가하고 개선하는 데 사용할 수 있는 도구입니다.
4. 사용편의성 및 추가기능.
사용 편의성
PSI Frontend는 사용하기 정말 간편해요. 웹 페이지 URL을 입력하기만 하면 자동으로 분석 결과를 보여주거든요. 반면에 Lighthouse Viewer는 다양한 기능을 제공하지만, PSI Frontend보다는 사용이 좀 어려울 수 있어요. Lighthouse를 사용하려면 웹 페이지를 로컬 서버에서 실행하거나 Chrome 확장 프로그램을 설치해야 하죠.
추가 기능
PSI Frontend에서는 웹 페이지의 성능을 모바일과 데스크톱 환경에서 별도로 분석할 수 있어요. Lighthouse Viewer는 여러 버전의 Chrome 브라우저에서 웹 페이지 성능을 분석할 수 있죠. 또한, 웹 페이지의 접근성, SEO, PWA (Progressive Web App) 기준 충족 여부 등도 확인할 수 있어요.
5. 어떤 걸 선택할까요?.
간편하고 빠른 분석을 원한다면 PSI Frontend를, 더 광범위하고 심층적인 분석이 필요하다면 Lighthouse Viewer를 사용하는 게 좋아요. 특정 기능이 필요하다면 각 도구의 기능을 비교해보고 선택하는 것도 방법이에요.
결론적으로, PSI Frontend는 페이지 속도 평가에 초점을 맞춘 간편한 도구이고, Lighthouse Viewer는 더 많은 기능을 제공하고 로컬 웹사이트 평가도 가능한 강력한 도구라고 할 수 있어요. 여러분의 목적에 따라 적절한 도구를 선택해보세요. 간편하고 빠른 평가가 필요하다면 PSI Frontend를, 더 많은 기능과 로컬 웹사이트 평가가 필요하다면 Lighthouse Viewer를 사용해보시는 걸 추천해요!