티스토리 뷰
[ 목차 ]
Lighthouse는 웹사이트의 성능을 측정하고 개선할 수 있는 구글의 오픈 소스 도구입니다. Lighthouse는 웹사이트의 첫 번째 콘텐츠가 렌더링 되는 시간, 페이지 전체의 콘텐츠가 표시되는 시간, 페이지의 주요 콘텐츠가 렌더링 되는 시간 등을 측정하여 총 100점 만점의 점수를 부여합니다. Lighthouse 보고서를 통해 성능 저하의 원인을 파악하고 개선할 수 있습니다.
1. Lighthouse 사용방법
- Chrome 개발자 도구에서 Lighthouse 탭을 선택합니다.
- Chrome 확장 프로그램을 설치합니다.
- npm 패키지를 설치합니다.
- Chrome 개발자 도구에서 Lighthouse 탭을 선택합니다.
- Chrome 개발자 도구에서 Lighthouse 탭을 사용하려면 다음과 같은 단계를 따르세요.
- Chrome 브라우저를 엽니다.
- 측정할 웹 사이트로 이동합니다.
- Chrome 개발자 도구를 엽니다.
- Lighthouse 탭을 클릭합니다.
- "Analyze" 버튼을 클릭합니다.
-Lighthouse는 웹 사이트의 성능을 측정하고 보고서를 생성합니다. 보고서에는 성능 저하의 원인과 개선 사항에 대한 권장 사항이 포함되어 있습니다. 위 그림에서는 SEO 최적화 및 점수를 확인하기 위한 내용입니다.
2. Chrome 확장 프로그램을 설치방법
-Chrome 확장 프로그램을 설치하여 Lighthouse를 사용하려면 다음과 같은 단계를 따르세요.
-Google Chrome 웹 스토어를 엽니다.
-Lighthouse를 검색합니다.
- Lighthouse 확장 프로그램을 클릭합니다.
- Chrome에 추가 버튼을 클릭합니다.
Chrome 확장 프로그램을 설치한 후에는 확장 프로그램 아이콘을 클릭하여 Lighthouse를 실행할 수 있으며, 우측 상단에 3점을 클릭한후 도구 더 보기를 선택하시고 개발자 도구를 선택하시면 Lighthouse를 실행하실 수 있습니다.
※ 위의 내용은 Lighthouse에서 블로그의 SEO최적화 점수 및 문제점을 확인하고 개선 할수있는 가장 많이 사용하는 툴입니다.
3. Lighthouse 보고서의 구성 요소
- 총 점수: 웹 사이트의 총성능을 나타내는 점수입니다.
- 세부 항목: 웹 사이트의 성능을 측정하는 10개 항목의 점수입니다.
- 권장 사항: 성능 저하를 해결하기 위한 권장 사항입니다.
- 총 점수는 0에서 100까지의 점수로 표시됩니다. 총점수가 높을수록 웹 사이트의 성능이 우수합니다. 세부 항목의 점수는 0에서 100까지의 점수로 표시됩니다. 세부 항목의 점수가 높을수록 해당 항목의 성능이 우수합니다.
- 권장 사항은 성능 저하의 원인을 해결하기 위한 방법에 대한 제안입니다. 권장 사항을 따르면 웹 사이트의 성능을 개선할 수 있습니다.
- 성능 저하의 원인에는 다음과 같은 것들이 있습니다.
- 웹 페이지의 크기가 너무 큽니다.
- 필요한 자원이 아닌 불필요한 자원이 로드됩니다.
- 효율적인 이미지 형식이 사용되지 않습니다.
- 비동기 로딩이 잘못 사용됩니다.
- 브라우저 캐싱이 제대로 사용되지 않습니다.
- 성능 저하의 원인을 해결하기 위해 다음과 같은 조치를 취할 수 있습니다.
- 웹 페이지의 크기를 줄입니다.
- 필요한 자원만 로드합니다.
- 효율적인 이미지 형식을 사용합니다.
- 비동기 로딩을 올바르게 사용합니다.
- 브라우저 캐싱을 사용합니다.
웹사이트의 성능은 사용자의 경험을 최우선으로하는 중요한 요소입니다. Lighthouse는 웹 사이트의 성능을 개선하는 데 도움이 되는 유용한 도구이기 때문에 불편하더라도 익숙해지셔야 합니다. Lighthouse를 사용하여 웹 사이트의 성능을 측정하고 개선한다면 사용자 경험을 향상하고 전환율을 높이는 데 많은 도움이 될 것입니다.
경기도 청년기본소득 최대 100만원 지원
[ 목차 ] 경기도 청년기본소득에 대해서 알고 계신가요? 청년들의 행복추구와, 삶의 질 향상, 건강 수준 향상 등 청년들의 안정된 삶과 사회적 기본권 보장을 위해 경기도와 시군이 협력하여 지
goldhunter101.com