DOM 크기가 크면 생각보다 상호작용에 더 많은 영향을 미칩니다. 이 가이드에서는 이러한 이유와 해결 방법에 대해 설명합니다.
웹페이지를 빌드할 때 해당 페이지에는 문서 객체 모델 (DOM)이 생성됩니다. DOM은 페이지의 HTML 구조를 나타내며 자바스크립트와 CSS가 페이지 구조 및 콘텐츠에 액세스할 수 있도록 합니다.
하지만 문제는 DOM의 크기가 페이지를 빠르고 효율적으로 렌더링하는 브라우저의 기능에 영향을 미친다는 것입니다. 일반적으로 DOM이 클수록 처음에 페이지를 렌더링하고 페이지 수명 주기에서 나중에 렌더링을 업데이트하는 비용이 더 많이 듭니다.
DOM을 수정하거나 업데이트하는 상호작용이 페이지 응답 속도에 영향을 미치는 값비싼 레이아웃 작업을 트리거할 때, 매우 큰 DOM이 있는 페이지에서 문제가 됩니다. 비용이 많이 드는 레이아웃 작업은 페이지의 Interaction to Next Paint (다음 페인트에 대한 상호작용)에 영향을 미칠 수 있습니다. 페이지가 사용자 상호작용에 빠르게 응답하도록 하려면 DOM 크기를 필요한 만큼만 크게 만드는 것이 중요합니다.
페이지의 DOM이 너무 큰 경우는 언제인가요?
Lighthouse에 따르면 페이지의 DOM 크기가 노드 1,400개를 초과하면 초과됩니다. 페이지의 DOM이 800개 노드를 초과하면 Lighthouse에서 경고가 표시되기 시작합니다. 다음 HTML을 예로 들어보겠습니다.
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ul>
위 코드에는 <ul> 요소와 <li> 하위 요소 등 4개의 DOM 요소가 있습니다. 웹페이지에는 이보다 더 많은 노드가 있을 것이 거의 확실하므로 DOM 크기를 억제하기 위해 할 수 있는 일과 페이지의 DOM을 최대한 작게 얻은 후 렌더링 작업을 최적화하는 다른 전략을 이해하는 것이 중요합니다.
큰 DOM은 페이지 성능에 어떤 영향을 미치나요?
큰 DOM은 다음과 같은 몇 가지 방법으로 페이지 성능에 영향을 미칩니다.
- 페이지의 초기 렌더링 중 CSS가 페이지에 적용되면 CSSOM (CSS Object Model)이라고 하는 DOM과 유사한 구조가 생성됩니다. CSS 선택자의 구체성이 증가함에 따라 CSSOM은 더욱 복잡해지고, 화면에 웹페이지를 그리는 데 필요한 레이아웃, 스타일 지정, 합성, 페인트 작업을 실행하는 데 더 많은 시간이 필요합니다. 이렇게 추가된 작업으로 인해 페이지 로드 초기에 발생하는 상호작용의 상호작용 지연 시간이 늘어납니다.
- 상호작용이 요소 삽입이나 삭제를 통해 또는 DOM 콘텐츠와 스타일을 수정하여 DOM을 수정하는 경우, 해당 업데이트를 렌더링하는 데 필요한 작업으로 인해 레이아웃, 스타일 지정, 합성 및 페인트 작업이 매우 많이 발생할 수 있습니다. 페이지의 초기 렌더링의 경우와 마찬가지로, 상호작용의 결과로 HTML 요소가 DOM에 삽입될 때 CSS 선택자 특수성이 증가하여 렌더링 작업이 늘어날 수 있습니다.
- JavaScript가 DOM을 쿼리할 때 DOM 요소에 대한 참조가 메모리에 저장됩니다. 예를 들어
document.querySelectorAll를 호출하여 페이지에서 모든<div>요소를 선택하는 경우, 결과가 많은 수의 DOM 요소를 반환하는 경우 메모리 비용이 상당히 클 수 있습니다.
이 모든 항목이 상호작용에 영향을 줄 수 있지만 위 목록의 두 번째 항목이 특히 중요합니다. 상호작용으로 인해 DOM이 변경되면 페이지에서 많은 INP의 원인이 될 수 있는 작업이 시작될 수 있습니다.
DOM 크기를 어떻게 측정하나요?
DOM 크기는 두 가지 방법으로 측정할 수 있습니다. 첫 번째 메서드는 Lighthouse를 사용합니다. 감사를 실행하면 현재 페이지의 DOM에 대한 통계가 '진단' 제목 아래의 '과도한 DOM 크기 방지' 감사에 포함됩니다. 이 섹션에서는 DOM 요소의 총 개수, 가장 많은 하위 요소를 포함하는 DOM 요소, 그리고 최하위 DOM 요소를 확인할 수 있습니다.
더 간단한 방법은 주요 브라우저의 개발자 도구에서 JavaScript 콘솔을 사용하는 것입니다. DOM에 있는 총 HTML 요소 수를 가져오려면 페이지가 로드된 후 콘솔에서 다음 코드를 사용할 수 있습니다.
document.querySelectorAll('*').length;
DOM 크기 업데이트를 실시간으로 확인하려면 성능 모니터 도구를 사용해도 됩니다. 이 도구를 사용하면 현재 DOM 크기와 함께 레이아웃과 스타일 지정 작업 (및 기타 성능 측면)을 상호 연관시킬 수 있습니다.
DOM 크기가 Lighthouse DOM 크기의 경고 기준점에 가까워지거나 모두 실패하는 경우, 다음 단계는 웹사이트의 INP를 개선할 수 있도록 사용자 상호작용에 응답하는 페이지의 기능을 개선하기 위해 DOM 크기를 줄이는 방법을 파악하는 것입니다.
상호작용의 영향을 받는 DOM 요소 수를 어떻게 측정할 수 있나요?
페이지 DOM 크기와 관련이 있을 수 있는 것으로 의심되는 느린 상호작용을 실습에서 프로파일링하는 경우 프로파일러에서 'Recalculate Style'이라는 라벨이 지정된 활동을 선택하여 영향을 받은 DOM 요소 수를 파악하고 하단 패널의 문맥 데이터를 관찰할 수 있습니다.
위의 스크린샷에서 작업의 스타일 재계산(선택한 경우)에 영향을 받은 요소의 수가 표시되는지 관찰합니다. 위의 스크린샷은 DOM 요소가 많은 페이지에서 렌더링 작업에 DOM 크기가 미치는 극단적인 사례를 보여주지만, 이 진단 정보는 어떤 경우든 DOM 크기가 상호작용에 대한 응답으로 다음 프레임이 페인트되는 데 걸리는 시간을 제한해 주는지 확인하는 데 유용합니다.
DOM 크기를 줄이려면 어떻게 해야 하나요?
웹사이트의 HTML에 불필요한 마크업이 있는지 검사하는 것 외에 DOM 크기를 줄이는 주된 방법은 DOM 깊이를 줄이는 것입니다. 브라우저 개발자 도구의 요소 탭에 다음과 같은 마크업이 표시되는 경우 DOM이 불필요하게 깊은 것일 수 있습니다.
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
이와 같은 패턴이 보인다면 DOM 구조를 평면화하여 패턴을 단순화할 수 있습니다. 이렇게 하면 DOM 요소의 수가 줄어들고 페이지 스타일을 단순화할 수 있습니다.
DOM 깊이도 사용 중인 프레임워크의 증상일 수 있습니다. 특히 JSX를 사용하는 프레임워크와 같은 구성요소 기반 프레임워크는 상위 컨테이너에 여러 구성요소를 중첩해야 합니다.
그러나 많은 프레임워크에서 프래그먼트로 알려진 것을 사용하여 구성요소를 중첩하지 않도록 할 수 있습니다. 프래그먼트를 기능으로 제공하는 구성요소 기반 프레임워크에는 다음이 포함되나 이에 국한되지 않습니다.
선택한 프레임워크에서 프래그먼트를 사용하여 DOM 깊이를 줄일 수 있습니다. DOM 구조 평탄화가 스타일 지정에 미치는 영향이 우려된다면 flexbox 또는 그리드와 같이 더 현대적이고 더 빠른 레이아웃 모드를 사용하면 도움이 될 수 있습니다.
고려할 만한 기타 전략
DOM 트리를 평면화하고 불필요한 HTML 요소를 제거하여 DOM을 가능한 한 작게 유지하려고 노력하겠지만, 트리는 상당히 클 수 있으며 사용자 상호작용에 반응하여 많은 렌더링 작업이 시작됩니다. 이러한 상황에 처한 경우 렌더링 작업을 제한하기 위해 고려할 수 있는 다른 전략이 있습니다.
가산적 접근 방식 고려
페이지가 처음 렌더링될 때 페이지의 많은 부분이 사용자에게 처음에 표시되지 않는 위치에 있을 수 있습니다. 시작 시 DOM의 해당 부분을 생략하여 HTML을 지연 로드할 수 있지만, 사용자가 페이지의 처음에 숨겨진 부분이 필요한 페이지 부분과 상호작용할 때 HTML을 추가할 수 있습니다.
이 접근 방식은 초기 로드 단계와 로드 이후에 모두 유용합니다. 초기 페이지 로드에서는 렌더링 작업을 사전에 줄여서 초기 HTML 페이로드가 더 가벼워지고 렌더링 속도도 빨라집니다. 이렇게 하면 이 중요한 기간 동안 기본 스레드의 주의를 끌기 위한 경쟁을 줄이면서 상호작용을 실행할 수 있는 기회가 더 많아집니다.
처음에 로드 시 숨겨지는 페이지의 부분이 많으면 다시 렌더링 작업을 트리거하는 다른 상호작용의 속도가 빨라질 수도 있습니다. 그러나 다른 상호작용이 DOM에 더 추가되면서 페이지 수명 주기 내내 DOM이 증가함에 따라 렌더링 작업이 증가합니다.
시간이 지남에 따라 DOM에 추가하는 작업은 까다로울 수 있으며, 나름의 장단점이 있습니다. 이 방법을 사용하는 경우 사용자 상호작용에 응답하여 페이지에 추가하려는 HTML을 채우기 위해 데이터를 가져오기 위해 네트워크 요청을 할 가능성이 높습니다. 이동 중인 네트워크 요청은 INP에 포함되지 않지만 인지된 지연 시간이 늘어날 수 있습니다. 가능한 경우 데이터를 가져오는 중임을 나타내는 로드 스피너 또는 기타 표시기를 표시하여 사용자가 무슨 일이 일어나고 있는지 알 수 있도록 합니다.
CSS 선택기 복잡성 제한
브라우저가 CSS의 선택자를 파싱할 때, 해당 선택기가 현재 레이아웃에 어떻게 적용되는지(그리고 어떻게 적용되는지) 이해하기 위해 DOM 트리를 탐색해야 합니다. 이러한 선택기가 복잡할수록 브라우저가 페이지의 초기 렌더링을 수행하기 위해 더 많은 작업을 수행할 뿐만 아니라 상호작용의 결과로 페이지가 변경되는 경우 스타일 재계산 및 레이아웃 작업이 증가합니다.
content-visibility 속성 사용
CSS는 화면 밖 DOM 요소를 느리게 렌더링하는 content-visibility 속성을 제공합니다. 요소가 표시 영역에 가까워지면 요청 시 렌더링됩니다. content-visibility의 이점은 초기 페이지 렌더링에서 상당한 양의 렌더링 작업을 잘라낼 뿐만 아니라 사용자 상호작용의 결과로 페이지 DOM이 변경될 때 오프스크린 요소의 렌더링 작업도 건너뜁니다.
결론
웹사이트의 INP를 최적화하는 좋은 방법은 DOM 크기를 꼭 필요한 수준으로 줄이는 것입니다. 이렇게 하면 DOM이 업데이트될 때 브라우저가 레이아웃 및 렌더링 작업을 수행하는 데 걸리는 시간을 줄일 수 있습니다. DOM 크기를 유의미하게 줄일 수 없더라도 CSS 포함 및 content-visibility CSS 속성과 같이 렌더링 작업을 DOM 하위 트리로 격리하는 데 사용할 수 있는 몇 가지 기법이 있습니다.
어떤 방법을 사용하든, 렌더링 작업이 최소화되는 환경을 만들고, 상호작용에 대한 응답으로 페이지에서 실행하는 렌더링 작업의 양을 줄이면 사용자가 사용자와 상호작용할 때 웹사이트가 사용자의 반응이 더 좋게 느껴질 것입니다. 즉, 웹사이트의 INP가 낮아서 사용자 환경이 개선됩니다.
Louis Reed가 작업한 Unsplash의 히어로 이미지