리액트에서 DOM 사이즈 줄이는 최적화 방법

어셋 최적화를 포함한 웹서비스에서의 최적화에 관심을 가지게 되면서 작업했던  것 중 하나이다.

아이템 리스트에서 처음에 썸네일 이미지가 보이기 전에 스켈레톤 UI를 보여주곤 한다. 그래서 스켈레톤 컴포넌트를 공통으로 쓰고 있었다. 그러다 보니 단순 이미지 엘리먼트뿐만 아니라 스켈레톤 UI의 DOM도 포함됨으로써 시각적으로 좀 느린 느낌이 느껴졌다!

물론 사용자 입장에서는 크게 느끼지 못할 수 있으나, 개발자 입장에서는 사소한 느린 로딩도 알아채기가 쉽다....

그래서 찾게 된 방법이다. 특히나 emotion이나 styled-component 같은 CSS-in-JS를 사용한다면 DOM구조가 나도 모르게 엄청 깊어지는 걸 알 수 있다. 그래서 이 최대한 DOM요소를 줄여 로드되는 시간을 줄이고자 했다.

 

 

DOM 사이즈가 중요한 이유

일반적으로 DOM이 클수록 처음에 해당 페이지를 렌더링하고 나중에 렌더링을 업데이트하는데 더 많은 비용 (Recalucate Style, Pre-Paint 등)이 든다.

• 요소 삽입
• 요소 삭제
• 스타일 수 정리

 

DOM 사이즈 측정하기

1. Lighthouse 사용

실행하면 현재 페이지의 DOM에 대한 통계가 '진단' 제목 아래의 '과도한 DOM 크기 방지' 감사에 표시된다. Lighthouse에 따르면 페이지의 DOM 크기는 노드가 1,400개를 초과하면 과도한 것이다.

 

 

2. JavaScript 콘솔 사용

이 코드에서는 DOM의 HTML 요소 수만 포함되어 있습니다 . DOM의 모든 노드를 포함하지는 않는다.

document.querySelectorAll('*').length;

 

3. Dev Tool 성능 모니터 도구 사용

이 도구를 사용하면 현재 DOM 크기와 함께 레이아웃 및 스타일 작업(및 기타 성능 측면)을 연관시킬 수 있다.

 

 

 

 

DOM 크기를 어떻게 줄일 수 있나요?

• 불필요한 마크업 줄이기
• DOM 깊이를 줄이기
• Fragment 사용
• 모던 레이아웃 css 사용(flexbox, grid)

 

 

로드 측정 하기

조건

• DOM요소 깊이를 줄이기 전 후를 측정했다.
• 인피니티 스크롤이 포함된 페이지였는데 우선 스크롤을 하지 않은 첫 로드만 측정했다.
• 로컬에서 측정한 것이라… 속도는 실제 운영과 다를 수 있습니다.🙃
• 성능 통계, lighthouse로 측정했다.

데브툴에서 페이즈 로드 측정하는 방법

 

결과

 

로딩한 Insight를 보면 생각보다 많이 감소됨을 확인할 수 있었다. 1초대 미만으로 줄였지만 이미지가 엄청 크거나 양이 많아지면 이 갭은 훨씬 더 커지게 될 것이다. 간단한 컴포넌트라도 DOM의 깊어지지 않도록 설계 및 스타일하는 것이 매우 중요한 부분이라는 것을 알게 되었다.

• FCP : 3.23s → 2.7s (0.53s 감소! ✌️)
• LCP : 7.56s → 6.8s (0.76s 감소! ✌️)
• DOM의 HTML 요소 수 : 2847 → 2104

 

DOM 최적화 전

 

 

 

DOM 최적화 후

 

 

DOM 최적화 전

 

 

DOM 최적화 후

 

 

참고

https://web.dev/dom-size-and-interactivity/ 

큰 DOM 크기가 상호작용에 미치는 영향과 이에 대해 취할 수 있는 조치  |  Articles  |  web.dev