성능 최적화가 필요한 이유
출처: Google / SOASTA Research, 2017
위 이미지는 페이지 표시 시간 증가에 따른 이탈률이다
구글이 주장하는 핵심은 '성능이 저하되면 사용자가 떠나고 매출이 감소한다'이다. 반대로 말하면 성능이 향상되면 그만큼 사용자가 늘고 매출이 오른다는 뜻이다.
웹 성능을 최적화하면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공할 수 있으며, 이로 인해 가입률과 전환율을 높이고 이탈률은 낮춰 더 많은 수익을 창출할 수 있다.
Lighthouse란?
서비스의 성능 분석을 위해 Lighthouse라는 툴을 사용한다. 해당 툴은 크롬 개발자 도구의 메뉴에서 찾을 수 있다.
사용법은 위의 세가지 Mode, Device, Categories를 선택한 후 페이지 분석을 시작하면 된다.
Mode
- Navigation: Lighthouse의 기본값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
- Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
- SnapShot: 현재 상태의 성능 문제를 분석
Categories
- Performance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석
- Accessibility: 서비스의 사용자 접근성 문제를 분석
- Best Practices: 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
- SEO: 검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석
Device
- Mobile: 모바일 사이즈의 화면에서 좀 더 느린 CPU와 네트워크 환경으로 검사 진행
- Desktop: PC 환경으로 분석
웹 바이탈(Web Vitals)
Lighthouse에서 웹 페이지의 종합 성능 점수를 볼 수 있다.
해당 점수는 아래의 여섯 가지 지표에 가중치를 적용해 평균을 낸 점수이다.
이러한 지표를 웹 바이탈(Web Vitals) 이라고 부른다.
1. FCP(First Contentful Paint) : 가중치 10%
➡ FCP는 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간에 관한 지표
위 결과에서는 페이지에 진입하여 첫 콘텐츠가 뜨기까지 0.2초가 걸렸음을 알 수 있다.
2. SI(Speed Index) : 가중치 10%
➡ 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표
3. LCP(Largest Contentful Paint) : 가중치 25%
➡ 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표
위 결과에서 페이지에 진입하여 가장 큰 콘텐츠가 뜨기까지 2초가 걸렸음을 알 수 있다.
4. TTI(Time To Interactive) : 가중치 10%
➡ 사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정한 지표
여기서 상호작용이란 클릭 또는 키보드 누름 같은 사용자 입력을 의미한다.
즉, 이 시점 전까지는 화면이 보이더라도 클릭 같은 입력이 동작하지 않는다.
5. TBT(Total Blocking Time) : 가중치 30%
➡ 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표이다.
측정은 FCP와 TTI 사이의 시간 동안 일어나며 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합한다.
6. CLS(Cumulative Layout Shift) : 가중치 15%
➡ 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표이다.
레이아웃 이동이란 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것을 말한다.
Opportunities & Diagnostics
두 섹션은 웹 페이지의 문제점과 해결 방안, 그리고 문제를 해결함으로써 얻을 수 있는 이점이 무엇인지 보여준다.
Opportunities
Opportunities 섹션은 페이지를 더욱 빨리 로드하는 데 잠재적으로 도움되는 제안을 나열한다.
Diagnostics
Diagnostics 섹션은 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여준다.
따라서 이 두 섹션을 통해 해당 서비스의 어느 부분을 개선해야 성능을 향상할 수 있는지 쉽게 파악할 수 있다.
검사 환경
Lighthouse 결과의 가장 하단에서는 검사의 환경을 확인할 수 있다.
Emulated Desktop with Lighthouse 12.6.0
Emulated Desktop 추가 정보에서는 CPU throttling이라는 정보를 확인할 수 있다.
이는 기기의 CPU 성능을 어느 정도 제한하여 검사를 진행했는지를 나타낸다.
여기서는 1x로 되어있는 것으로 CPU 성능에 제한을 두지 않고 검사했음을 알 수 있다.
검사 전 Device 설정을 Desktop이 아닌 Mobile로 선택했다면 1x가 아닌 4x로 표시될 것이다.
Custom throttling
Custom throttling에는 Network throttling이라는 정보가 있다.
이는 네트워크 속도를 제한하여 어느 정도 고정된 네트워크 환경에서 성능을 측정했다는 의미이다.
여기서는 10,240Kbps로 네트워크 속도를 제한한 것을 알 수 있다.
이 두가지 제한 때문에 Lighthouse 없이 그냥 페이지를 로드하는 속도보다 Lighthouse를 이용해 측정할 때 페이지 속도가 더 느린 것이다.
그리고 검사 시 디바이스 환경을 Mobile로 설정하면 더욱 제한된 환경으로 검사한다.
모바일이 데스크톱보다 느리기 때문이다.
