Lighthouse 성능 측정 도구로 내 블로그 최적화

간단한 방법과 무료로 내 블로그 페이지의 성능을 측정 및 진단하고 검색엔진 최적화까지 할 수 있다면 어떨까요?

아래 글을 읽고 Lighthouse로 내 블로그 페이지의 품질을 개선해 블로그 최적화에 한발 전진해 봅시다.

Lighthouse 썸네일

  Lighthouse는 무엇인가요?

1. 구글에서 개발한 오픈 소스 자동화 도구로서 웹 페이지의 품질을 개선할 수 있습니다.

2. 다양한 지표를 이용하여 웹페이지의 성능 검사를 해주며 그에 대한 개선책도 제공합니다.

3. 성능, 접근성, 권장사항, 검색엔진 최적화, PWA 등을 검사하며 모든 웹 페이지에 대해 품질 검사를 할 수 있습니다.

 

사용법으로 아래 3가지 방법이 있으나 개발자 도구(F12)를 이용하는 편이 간단하고 여기서는 이 방법을 통한 품질 개선내용만 중점으로 다루기로 한다.

 

■ Chrome 브라우저 확장 프로그램을 사용

Lighthouse

■ 아래링크를 클릭하여 설치후 커멘드 창을 이용하여 사용

https://github.com/GoogleChrome/lighthouse

GitHub - GoogleChrome/lighthouse: Automated auditing, performance metrics, and best practices for the web.

■ F12 또는 Ctrl + Shift + i  입력 후 개발자 도구에서 탭 메뉴 중 우측상단에 Lighthouse를 클릭하여 사용

 

 

 Lighthouse 성능 측정 도구 사용법

Lighthouse 보고서 생성

1. 성능검사를 위한 페이지를 열고 F12를 입력 후 Lighthouse 탭에 들어가서 페이지 로드분석을 클릭한다.

Lighthouse 성능측정 결과

2. 성능측정하는 수초간의 시간뒤 측정 결과가 나타난다.

• Performance(속도)  -  웹 페이지의 로딩 속도와 관련된 성능 측정, 아래는 측정요소들
  1. First Contentful Paint(FCP) : 페이지 로드 시점부터 일부가 화면에 렌더링 될 때까지의 시간 측정
  2. Largest Contentful Paint(LCP) : 페이지 로드를 시점부터  뷰포트 내 가장 큰 이미지 또는 텍스트 블록의 로딩 시간을 보고 측정
  3. Total Blocking Time(TBT) : 입력 응답을 막을 만큼 오래 차단되었을 때 FCP와 상호 작용까지의 시간 사이 총시간을 측정
  4. Cumulative Layout Shift(CLS) : 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화하므로 시각적 안정성을 측정
  5. Speed Index 속도지수 : 속도 지수는 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 측정
• Accessibility(접근성) -  웹 애플리케이션의 접근성을 검사
  1. 이름과 라벨에 대한 측정 - 이미지 요소에 alt 속성 유무 등
  2. 권장사항 - viewpoint meta 태그관련 등
  3.  대비 - 백그라운드 및 포그라운드 색상의 대비율 측정 등
  4. 탐색 - 제목 요소가 내림차순으로 표시되지 않음 등
• Best Practices(권장사항,모범사례)
  웹에 대한 표준 모범 사례를 따르고 있는지 확인합니다. 웹 애플리케이션을 가동할 때 콘솔에 오류가 출력되진 않는지, 더는 사용하지 않는 API를 호출하고 있지 않은지, HTTPS를 통해 해당 페이지에 접근할 수 있는지와 같은 항목을 확인합니다. 불필요한 코드를 찾아냅니다.
• SEO(검색엔진 최적화) - 기본적인 SEO 검사
  페이지가 기본적인 검색엔진 최적화 권고를 따르는지 확인하는 검사입니다. Lighthouse가 여기에서 고려하지는 않지만 검색 순위에 영향을 줄 수 있는 요소들 측정
• Progressive Web App(PWA)에서 정의하는 일련의 기준에 따라 웹 페이지 확인
  이 검사는 해당 웹 페이지가 항목을 따르고 있는지 측정하여 점수를 부여하는 것이 아니라 웹이 HTTP를 HTTPS로 리다이렉션 하는지, 응답 코드는 명확한지, 3G 네트워크에서도 로딩이 빠르게 이루어지는 지와 같은 여부를 검사

3. 측정된 요소마다 진단하고 개선을 위한 추천이나 부족한 부분을 표시해 준다. 이 부분을 개선하면 품질이 올라가게 된다.

 내 블로그 최적화를 위한 필수적인 개선사항

여러 가지 측정요소가 존재하지만 모두 100점을 맞는 것은 배보다 배꼽이 큰 경우에 해당된다. 노력대비 성과가 나지 않는다. 최소한의 조치로 최대의 효과를 거두기 위해 필수적인 개선사항만이라도 시도해 보자

1. 이미지 요소의 alt(대체텍스트 작성) - [그림] 클릭 ▶ [톱니바퀴모양]  ▶ 대체 텍스트 삽입 클릭 - 텍스트입력

2. PNG나 JPEG보다 압축률이 높고 다운로드가 빠르고 데이터 소비량도 적은 이미지 형식의 WebP 및 AVIF 사용

3. HTML안에 사용하지 않는 자바스크립트, CSS 줄이기

4. 크롤링 및 색인생성을 방해하는 href 속성 제거

5. 메타 디스크립션 사용하기

6. 링크에 설명텍스트 사용하기

7. 버튼이나 링크의 적절한 공간 배치가 필요함.

이외에도 개선할 수 있는 요소들이 있다면 개선하는 것을 권장합니다.

 

 Lighthouse 성능 측정 도구 관련 포스팅을 마치며

아무리 좋은 툴이 많아도 실제 적용하고 변경하지 않으면 쓸모가 없습니다.

작은 것 하나부터 품질을 개선해 나간다면 노력한 결과가 반드시 보답받으리라 생각됩니다.

성장에 도움이 되는 자료를 꾸준히 업로드하는 "돈리치"였습니다.