프론트엔드 성능 개선 지표
프론트 엔드 성능은 로드 속도와 렌더링 속도를 개선하는 것으로 최적화할 수 있다.
개선점을 찾기 위해서는 어떤 기준으로 로딩 속도가 느린지를 판별할 수 있어야 한다.
성능 지표의 측정 기준은 크게 브라우저와 사용자 입장으로 나눌 수 있다.
1. 브라우저 기준의 성능 측정
웹 페이지가 로딩될 때 DOMContentLoaded, load 이벤트가 발생하며, 각 이벤트가 발생하는 시점으로 성능을 측정하게 된다.
- 두 이벤트가 빠르게 발생하고, 두 이벤트 사이의 간격이 좁으면 성능이 좋다고 할 수 있다.
- 크롬 개발자 도구에서 네트워크 탭의 하단에서 두 이벤트의 정보를 확인할 수 있다.
DOMContentLoaded 이벤트
- HTML과 CSS 파싱이 끝나는 시점
- 렌더 트리를 구성할 준비가 된(DOM 및 CSSOM 구성이 끝난) 상황
load 이벤트
- HTML 상에 필요한 모든 리소스가 로드된 시점
2. 사용자 기준의 성능 측정
개발 패러다임이 변화하면서 DOMContentLoaded, load 이벤트 발생 시점만 가지고 성능을 판단하기 어려워졌다. 최근에 많이 사용되는 SPA에서는 웹 페이지에 포함된 적은 양의 HTML(바디 내부 태그, 리소스 링크 태그)로 DOMContentLoaded, load 이벤트가 일찍 발생할 수 있으나, 이벤트가 발생한 이후에도 수많은 스크립트 실행으로 인해 여전히 "느린 로딩"이 존재한다. 이러한 이유로 사용자 기준의 새로운 성능 측정 방식이 필요하게 되었다.
- 사용자에게 콘텐츠를 보여주는 여러 시점을 기반으로 한다. (구글이 정의)
- 의미 있는 콘텐츠가 처음 보이는 시점이 빠를수록 성능이 좋다고 판단하며, 이 시점을 앞당길 수 있도록 최적화해야 한다.
- FMP가 가장 중요!
- 개발자 도구로 위의 시점들을 확인해볼 수 있다 - Network, Performance, Audits패널
3. 성능 측정을 위한 개발자 도구 탭
Performance
- 웹 페이지가 로드되는 과정을 레코딩하고 단계마다 걸리는 시간을 확인할 수 있다.
- 로딩 과정에서 최적화가 필요한 부분을 찾을 때 사용한다.
- html파싱, 리소스 로드, 스크립트 실행, 렌더링 진행의 과정
Network
- 웹 페이지가 로딩되는 동안 요청된 리소스의 상태를 차트 형태로 확인할 수 있다.
- 서버에서 리소스를 불러오는 과정의 각 단계에서의 상태(다운소요시간, 대기시간 등등)를 알 수 있다.
- 리소스 최적화 상태를 비교할 때 사용한다.
Audits
- 사용자 기준의 성능 측정 지표를 확인할 수 있다.
- 어떤 환경에서 성능을 측정할지 선택할 수 있다.
- FCP, FMP, TTI 시점을 확인할 수 있다.
- 최적화 가능한 리소스 목록을 보여준다.
- 성능 측정 기준과 통과 목록을 보여준다.
출처
https://ui.toast.com/fe-guide/ko_PERFORMANCE
페이지 로드 최적화
블록 리소스란?
html파싱이나 렌더링을 막는 리소스
js - html파싱 블록 리소스
css - 렌더링 블록 리소스
css, js둘 다 html파싱을 막는 리소스지만, css는 html을 바꿀 가능성이 없기 때문에
렌더링 엔진이 link태그를 만나면 자동으로 preload를 해주어 파싱과 병행해서 로드된다.
하지만 js는 html을 바꿀 수 있기 때문에 자동 preload를 안해주고 수동으로 설정해줘야한다.
하지만 css파일이 늦게 도착한다면 렌더링을 할 수 없기 때문에 요청 수와 용량 최적화를 해줘야한다.
각 리소스 별 로드 최적화 방법
네트워크 탭을 확인해서 로딩 시간이 긴 파일을 찾는다
- html파일이라면
- [리소스 용량 줄이기] 태그의 중첩을 최소화하여 단순하게 구성. 또한 공백, 주석 등을 제거
- css파일이라면
- [블록 리소스 차단] 특정 조건에서만 필요한 CSS가 있을 때 미디어 쿼리를 사용
- [블록 리소스 차단] / [리소스 요청 수 줄이기] 때에 따라 내부 스타일시트를 사용
- [블록 리소스 차단] css파일 내부에서
@import사용은 피한다 (병렬 로드가 안되기 때문) - [리소스 요청 수 줄이기] 파일 번들
- [리소스 용량 줄이기] 중복 작성되지 않고 간결하게 CSS 선택자 사용
- js파일이라면
- [블록 리소스 차단] HTML 문서 최하단(
</body>직전)에 배치 - [블록 리소스 차단]
<script>태그에defer나async속성을 명시 - [리소스 요청 수 줄이기] 파일 번들
- [리소스 용량 줄이기] 중복 코드 줄이기
- [리소스 용량 줄이기] 코드 스플리팅+lazy loading 적용 하기
- [리소스 용량 줄이기] 유틸 라이브러리 사용 시 필요한 함수만 부분적으로 가져오기
- [블록 리소스 차단] HTML 문서 최하단(
- img파일이라면
- [리소스 요청 수 줄이기] 이미지 스프라이트
- [리소스 요청 수 줄이기] lazy loading적용
- [리소스 용량 줄이기] 이미지 압축
- [리소스 용량 줄이기] 사이즈 조절
Lazy Loading의 효과?
- 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미.
- 초기 리소스 요청 수를 줄여 디바이스가 당장 필요한 리소스들을 더 빠르게 처리해서 다운로드하도록 확보하는 것
- → 유저가 페이지를 훨씬 빨리 이용하게 되는 것
