[Frontend] 로딩 성능 최적화

안녕하세요.

오늘은 프론트엔드의 로딩 성능을 최적화하는 방법에 대해 알아보도록 하겠습니다.

(네이버의 TECH CONCERT 자료를 참고하여 작성했습니다.)

개발자 도구의 Network 탭을 활용하여 웹 페이지의 로딩 속도를 측정하고 분석할 수 있습니다.

NAVER 사이트로 예를 들어보겠습니다.

위 그림의 오른쪽에 위치한 Waterfall이라는 것이 성능 개선 작업에서 가장 중요한 지표입니다.

이 Waterfall의 높이를 줄이고, 폭을 줄이고, 간격을 줄이는 것으로 로딩 속도를 개선할 수 있습니다.

브라우저는 호스트당 동시에 연결할 수 있는 Connection수가 정해져 있습니다.

그 수를 넘어가게 되면 대기시간이 발생하기 때문에, Request 수를 줄이는 것이 로딩 성능을 개선하는데 도움이 됩니다.

Request 수를 줄이기 위한 방법

: CSS나 JS 파일을 Merge 하여 하나의 파일로 만든다.

: 여러 이미지를 하나의 Request로 받는다. (CSS Sprite 사용)

: 캐싱되지 않아도 될 이미지를 HTML 요청에 포함시켜서 보낸다. (DATA URI 사용)

: 초기 로딩 시에 불필요한 자원은 삭제하거나 Lazy loading 한다.

아래 이미지는 Request 시간의 상세 정보이며, 이를 통해 개선 포인트를 찾아낼 수 있습니다.

Initial Connection

: Initial Connection 시간을 줄이기 위해서는 HTTP/2.0을 적용해야 합니다.

HTTP/2.0은 Multiplexing을 지원하여 하나의 Connection에 여러 요청을 보낼 수 있습니다.

Waiting (TTFB - Time To First Byte)

: Request를 받아서 처리한 시간을 말하며, TTFB 소요 시간이 길다면 서버 로직의 튜닝이 필요한 것을 뜻합니다.

Content Download

: 네트워크 속도가 낮거나, 콘텐츠의 크기가 큰 경우도 로딩 시간에 큰 영향을 미칩니다.

js나 css 파일을 압축시키거나, 이미지 파일을 최적화하여 콘텐츠의 크기를 줄이는 것이 중요합니다.

Blocking을 줄이는 방법으로 Request 간격을 당겨 로딩 시간을 줄일 수 있습니다.

Blocking을 줄이는 방법

: head 태그에는 css와 필수 js만 넣는다.

: JS는 body 태그의 마지막에 넣는다. (중간중간에 js 코드를 넣지 않는다.)

: Preload를 사용하여 CSS와 함께 폰트, 이미지를 로딩한다.

출처

https://www.youtube.com/watch?v=cpE1dwJgS4c

Kei Song