프론트엔드 성능 최적화 - (Litghthouse 사용법)

성능 최적화는 왜 필요할까?

 

이유는 간단하다. 웹 성능을 최적화하면 서비스 사용자에게 더 나은 사용자 경험을 제공할 수 있다. 그로 인해, 가입률과 전환율은 높이고 이탈률은 낮춰 더 많은 수익을 창출 할 수 있다.

 

로딩 성능

 

• 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때의 성능을 뜻한다.
• 고화질 이미지나 HTML, JSScript, CSS 파일이 크다면 다운로드할 때 오래 걸려 사용자에게 표시되는 웹 페이지가 느리게 표시될 것이다.
• 로딩 성능을 개선하는 가장 좋은 방법은 리소스 수를 줄이거나 크기를 줄이는 것이다.

 

렌더링 성능

 

• 다운로드한 리소스를 가지고 화면을 그릴 때의 성능을 뜻한다.
• 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터랙션의 자연스러운 정도가 달라진다.

 

Lighthous 툴을 이용한 페이지 검사

 

• 구글에서 만든 툴로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴이다.
• 크롬에서 Lighthouse 패널을 통해 손쉽게 사용할 수 있다.

 

Lighthouse

기기는 모바일, 데스크톱 환경에 맞게 선택해준다.

 

모드

 

• 탐색(기본값)(Navigation) : Lighthouse의 기본값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
• 기간(Timespan) : 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
• 스냅샷(Snapshot) : 현재 상태의 성능 문제를 분석
  
  

카테고리

 

• 성능(Performance) : 웹페이지의 로딩 과정에서 발생하는 성능 문제를 분석
• 접근성(Accessibility) : 서비스의 사용자 접근성 문제를 분석
• 권장사항(Best Practices) : 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
• 검색엔진 최적화(SEO) : 검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석
• 프로그레스브 웹 앱(Progressive Web App) : 서비스 워커와 오프라인 동작 등, PWA와 관련된 문제를 분석
  
  

필요한 영역을 선택하고, 페이지 로드 분석을 누르면 검사를 시작한다.

 

naver의 Lighthouse 결과

가장 위에 보이는 숫자 96점이 웹 페이지의 종합 성능 점수다.

이 점수는 아래 보이는 여섯 가지 지표(metrics)에 가중치를 적용해 평균 낸 점수다. 이러한 지표를 웹 바이탈(Web Bitals)이라고 부른다.

이러한 지표는 각자의 컴퓨터에서 바뀔 수도 있고, 코딩 과정중에는 development 환경과 production환경에서 또 다를 수 있다.

First Contentful Paint(FCP)

• 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간에 관한 지표다.
• 첫 콘텐츠가 뜨기까지 네이버는 0.5초가 걸렸다. 
• FCP는 총점을 계산할 때, 10%의 가중치를 갖는다.

Speed Index(SI)

 

• 페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표다. 
• 예를 들어 A는 1초마다 콘텐츠가 4초동안 순차적으로 나오고, B는 4초때의 한 번에 나온다고 한다면, A가 B보다 더 빨리 로드된 것으로 계산되며, 더 높은 점수를 받는다.
• SI는 총점을 계산할 때, 10%의 가중치를 갖는다.

Largest Contentful Paint(LCP)

 

• 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표다.
• 네이버는 페이지에 진입하여 가장 큰 콘텐츠가 뜨기까지 1초가 걸렸다.
• LCP는 총점을 계산할 때, 25%의 가중치를 갖는다.

Time to Interactive(TTI)

 

• 사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정한 지표다.
• 상호작용이란 클릭 또는 키보드 누름 같은 사용자 입력을 의미한다. 즉, 이 시점 전까지는 화면이 보이더라도 클릭 같은 입력이 동작하지 않는다.
• TTI는 총점을 계산할 때, 10%의 가중치를 갖는다.

Total Blocking Time(TBT)

 

• 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표다.
• 측정은 FCP와 TTI 사이의 시간 동안 일어나며 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합한다.
• TBT는 총점을 계산할 때, 30%의 가중치를 갖는다.

Cumulative Layout Shift(CLS)

 

• 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표다.
• 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것을 말한다.
• CLS는 총점을 계산할 때, 15%의 가중치를 갖는다.

---

Opportunities 섹션과 Diagnostics 섹션

 

Lighthouse 결과를 아래로 내리면 위와 같은 섹션이 있다. 추천(Opportunities), 진단(Diagnostics) 섹션이 각각 있다.

 

추천(Opportunities)섹션 - 페이지를 더욱 빨리 로드하는데 잠재적으로 도움이 되는 제안을 나열되어 있다.

진단(Diagnostics) 섹션 - 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여 준다.

따라서, 이 두 섹션을 통해 해당 서비스의 어느 부분을 개선해야 성을을 향상할 수 있는지 쉽게 파악할 수 있다.

 

 

---

가장 하단에 있는 검사환경

 

• 에뮬레이션된 데스크톱 추가 정보에서는 CPU throttling이라는 정보를 확인할 수 있다. CPU 성능을 어느 정도 제한하여 검사를 진행했는지를 확인할 수 있다. 제한을 잘 보면 1x, 4x로 나뉘는데, 1x는 데스크톱, 4x는 모바일을 택했을 때 각각 다르게 나타난다.
  
  
• 맞춤형 제한에서는 네트워크 속도를 제한하여 측정했다는 의미다. 그렇기 때문에 이 두 가지 제한으로 그냥 페이지를 로드하는 속도보다 Lighthouse를 이용해 측정할 때 페이지 로드 속도가 더 느린 것이다.