<aside> 💡 웹사이트의 성능을 측정하고 개선할 수 있는 유용한 도구인 Lighthouse에 대해 설명드리겠습니다. Lighthouse는 구글에서 제공하는 오픈 소스 도구로, 웹사이트의 성능, 접근성, SEO(검색 엔진 최적화) 등을 자동으로 분석해줍니다. 그럼 지금부터 Lighthouse를 사용하는 방법에 대해 단계별로 설명드리겠습니다.

</aside>

LightHouse 소개 및 사용방법 영상

• 자세히 보기

LightHouse 성능 지표 향상시키기 간단 예제

• 자세히 보기

1. Lighthouse 소개

• Lighthouse는 웹사이트의 성능, 접근성, 베스트 프랙티스, SEO 등을 자동으로 분석해주는 오픈 소스 도구입니다.
• 크롬 브라우저의 개발자 도구에 내장되어 있으며, 별도의 설치 없이 사용할 수 있습니다.
• https://developer.chrome.com/docs/lighthouse?hl=ko
• https://web.dev/articles/optimize-lcp?hl=ko

2. Lighthouse 실행 방법

• 자세히보기

3. 분석 결과 이해하기

Lighthouse가 분석을 완료하면, 웹사이트의 성능을 점수와 함께 다양한 항목별로 상세히 보여줍니다. 여기서 중요한 점들을 살펴보겠습니다.

1. Performance

• Lighthouse는 웹사이트의 성능을 0부터 100까지의 점수로 평가합니다. 점수가 높을수록 성능이 좋다는 의미입니다. 이 점수는 여러 성능 지표를 종합하여 계산됩니다.
• 우리가 이번 프로젝트 때 집중해서 향상시켜 볼 부분입니다. ‘Performance 세부 항목 설명’ 과 ‘Performance 개선방법’ 에서 자세히 다루겠습니다.

2. Accessibility