[블로그] 티스토리도 블로그 최적화 쉽게 확인하고 싶다!(feat. lighthouse)

 

 Lighthouse는 웹 페이지의 성능, 접근성, 최적화 상태 등을 측정할 수 있는 도구입니다. 최근 블로그 관리자는 물론 웹사이트 운영자들 사이에서 그 중요성이 날로 증가하고 있습니다. 그러므로 이번 포스팅에서는 Lighthouse를 활용하여 블로그의 점수를 확인하는 방법과 그 과정에서 알게 된 유용한 정보들을 나누고자 합니다.

Lighthouse란 무엇인가?

 Lighthouse는 구글에서 개발한 오픈 소스 도구로, 웹 애플리케이션의 성능 및 품질을 측정하는 데 사용됩니다. 이 도구는 웹 페이지의 다양한 지표를 분석하여 점수를 매깁니다. 성능, 접근성, 최선의 관행, 검색 엔진 최적화(SEO) 등이 주요 평가 항목으로 포함되어 있습니다.

Lighthouse 사용 이유

 이러한 이유 때문에 많은 블로거들이 Lighthouse를 사용하고 있습니다. 첫째, 사용자 경험을 개선할 수 있는 피드백을 제공합니다. 둘째, 검색 엔진 최적화에 필수적인 요소들을 체크할 수 있어, 검색 노출에 도움을 줍니다. 셋째, 성능 저하의 원인을 파악하고 해결 방안을 모색할 수 있게 해줍니다.

Lighthouse 사용 방법

 Lighthouse는 오픈소스로 "무료"로 이용이 가능합니다. 확장프로그램의 관리가 아닌 chrome 웹 스토어에서 lighthouse를 다운받아 항목추가를 먼저 진행해보겠습니다!

chrome 웹 스토어

 

 항목추가가 된 lighthouse를 확인하고 싶은 자신의 블로그 탭에서 실행을 하면 아래와 같은 모습이 보여집니다.

lighthouse 확장프로그램

 

 언어는 한국어 그리고 디바이스는 모바일 또는 데스크톱으로 그 다음 저 파란 Generate report 버튼을 눌러주면 블로그의 최적화된 점수를 확인할 수 있습니다.

 

블로그 점수 확인하기

Lighthouse를 통해 블로그 점수를 확인하면, 성능 점수, 접근성 점수, SEO 점수 등의 정보를 확인할 수 있습니다. 예를 들어, 성능 점수가 92로 나온다면, 이는 해당 블로그의 로딩 속도와 사용자 경험이 우수하다는 것을 의미합니다.

점수는 0에서 100까지의 범위로 표시되며, 점수가 높을수록 좋은 성능을 나타냅니다.

각종 평가 항목 설명

Lighthouse는 다음과 같은 항목으로 점수를 매깁니다:

• Performance : 페이지 로딩 속도 및 반응성을 측정합니다. 예를 들어, 'First Contentful Paint'는 페이지가 처음으로 내용을 표시하는데 걸리는 시간을 측정합니다.
• Accessibility : 웹 페이지가 다양한 사용자가 접근할 수 있는 정도를 평가합니다.
• Best Practices : 웹사이트가 최선의 관행을 준수하고 있는지를 평가합니다.
• SEO : 검색 엔진에 최적화된 상태를 측정합니다.
• PWA (Progressive Web App): 웹 애플리케이션이 오프라인에서도 작동할 수 있는지를 평가합니다.

이러한 항목들을 통해 사용자 경험을 더욱 향상시킬 수 있는 기초 자료를 제공합니다.

점수 개선 방법

점수를 개선하기 위해서는 다음과 같은 방법을 고려할 수 있습니다:

1. 이미지 최적화 : 이미지 파일의 크기를 줄이고, 적절한 포맷으로 저장합니다.
2. 코드 최소화 : HTML, CSS, JavaScript 코드를 최소화하여 로딩 속도를 개선합니다.
3. 캐시 사용 : 웹페이지의 자원을 캐시하여 재방문 시 속도를 높입니다.
4. 서버 응답 시간 단축 : 서버의 응답 속도를 줄여 페이지 로딩 시간을 단축시킵니다.

이러한 조치를 통해 점수를 높일 수 있으며, 결과적으로 사용자 경험을 개선할 수 있습니다.

결과 분석 및 활용 팁

Lighthouse의 결과를 분석한 후, 어떤 항목에서 점수가 낮은지를 파악하고, 그에 따른 개선 사항을 명확히 정리합니다. 예를 들어, 성능 점수가 낮은 경우, 사용자가 경험하는 페이지의 로딩 시간이 길어질 수 있으므로, 최적화를 위한 우선순위를 정해 실행하는 것이 중요합니다.

마지막으로, 주기적으로 Lighthouse를 통해 점검하며 개선 사항을 업데이트하는 것을 추천드립니다. 이렇게 하면 블로그의 품질을 지속적으로 유지할 수 있습니다.

이번 포스팅을 통해 Lighthouse의 활용 방법과 블로그 점수 확인에 대한 유용한 정보를 얻으시길 바랍니다.