FE 성능 최적화 (렌더링) - woowacourse-teams/2021-gpu-is-mine GitHub Wiki

1. 현재 상황 분석

image

image

1. TBT 가 높다: 1060ms

  • DOMElement가 약 6100개여서, Script Evaluation, Style & Layout, Rendering, Garbage Collection 등 Main Thread가 할 일이 너무 많다.

2. BE 서버로부터 받아오는 logs, logs-graph 의 response의 용량이 크다.

압축되지 않은 채로 전송되고 있다.

image

2. 개선안

1. DOMElement 개수를 줄인다

  • 배열의 한 요소에 포함된 각각의 행이 하나의 li 요소에 해당하여 DOMElement 개수가 많았다. 배열의 한 요소가 하나의 pre 요소에 해당하게끔 수정하여, DOMElement를 100개로 줄였다. 개행 이슈는 CSS 해결. white-space: break-spaces

  • 참고자료: https://web.dev/dom-size/?utm_source=lighthouse&utm_medium=devtools

  • 적용후 Lighthouse 결과(local환경이므로 TBT 결과만 참고)

image

-> 여전히 Main Thread가 하는 일은 많다!

2. windowing libraries를 도입한다

https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists

  • windowing 이란?

    • 전체 데이터 중에 화면에 보이는 일부분의 데이터만 화면에 렌더링함
    • 전체 데이터가 아닌 일부 데이터의 렌더링만 진행하므로 렌더링 소요 시간 감소 및 html 문서 내에 존재하는 DOM의 개수도 줄어듦

  • windowing library를 사용하므로, 전체 logs의 개수는 중요하지 않게 되어, 다시 6100개로 복구하였다.

  • 적용결과: TBT가 210ms ~ 400ms. 전체 main thread tasks의 수는 감소하지 않은 것 같다. style&layout 의 시간은 확실히 감소함

3. logs, logs-graph 응답을 gzip 등으로 압축하여 전송한다

image image image

logs api의 용량의 눈에 띄게 줄어들었다. 529KB -> 48.1KB 하지만, 실제로 해당 응답을 다운로드 하는 시간은 크게 줄지 않았다. 따라서 FCP, LCP와 같은 시간도 큰 변화는 존재하지 않았음

4. cache-control 응답 헤더 이용

log의 업데이트 주기를 관찰하여, 업데이트 주기 이내에 동일한 요청이 오는 경우 브라우져 캐시를 사용하게끔 max-age 값을 추가한다

※ 완료된 Job도 로그 콘솔을 보여줘야 하는가?

※ TBT: FCP ~ TTI 사이에 발생하는 모든 task중 실행시간이 50ms 를 초과하는 task의 합계 실행시간이 50ms를 초과하면 User Interaction(mouse click 등)이 block 된다고 간주함 https://web.dev/lighthouse-total-blocking-time/?utm_source=lighthouse&utm_medium=devtools