DOM 크기가 클수록 상호작용에 미치는 영향이 생각보다 큽니다. 이 가이드에서는 그 이유와 취할 수 있는 조치를 설명합니다.
피할 방법이 없습니다. 웹페이지를 빌드하면 해당 페이지에 문서 객체 모델 (DOM)이 생성됩니다. DOM은 페이지의 HTML 구조를 나타내며 JavaScript와 CSS가 페이지의 구조와 콘텐츠에 액세스할 수 있도록 합니다.
그러나 DOM의 크기는 브라우저가 페이지를 빠르고 효율적으로 렌더링하는 기능에 영향을 미칩니다. 일반적으로 DOM이 클수록 해당 페이지를 처음 렌더링하고 나중에 페이지 수명 주기에서 렌더링을 업데이트하는 데 더 많은 비용이 듭니다.
이는 DOM을 수정하거나 업데이트하는 상호작용이 페이지가 빠르게 응답하는 기능에 영향을 미치는 비용이 많이 드는 레이아웃 작업을 트리거하는 매우 큰 DOM이 있는 페이지에서 문제가 됩니다. 비용이 많이 드는 레이아웃 작업은 페이지의 다음 페인트까지의 상호작용 (INP)에 영향을 줄 수 있습니다. 페이지가 사용자 상호작용에 빠르게 반응하도록 하려면 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> 하위 요소 3개 등 4개의 DOM 요소가 있습니다. 웹페이지에는 이보다 훨씬 많은 노드가 있을 것이므로 DOM 크기를 관리하기 위해 취할 수 있는 조치와 페이지의 DOM을 최대한 작게 만든 후 렌더링 작업을 최적화하기 위한 다른 전략을 이해하는 것이 중요합니다.
큰 DOM은 페이지 성능에 어떤 영향을 미치나요?
큰 DOM은 다음과 같은 몇 가지 방식으로 페이지 성능에 영향을 미칩니다.
- 페이지의 초기 렌더링 중 CSS가 페이지에 적용되면 DOM과 유사한 구조인 CSS Object Model (CSSOM)이 생성됩니다. CSS 선택자의 특정성이 증가하면 CSSOM이 더 복잡해지고 웹페이지를 화면에 그리는 데 필요한 레이아웃, 스타일 지정, 합성, 페인트 작업을 실행하는 데 더 많은 시간이 필요합니다. 이 추가 작업으로 인해 페이지 로드 초기에 발생하는 상호작용의 상호작용 지연 시간이 늘어납니다.
- 상호작용이 요소 삽입 또는 삭제를 통해 DOM을 수정하거나 DOM 콘텐츠 및 스타일을 수정하면 업데이트를 렌더링하는 데 필요한 작업으로 인해 레이아웃, 스타일 지정, 합성, 페인트 작업에 많은 비용이 들 수 있습니다. 페이지의 초기 렌더링과 마찬가지로 CSS 선택자 특이성이 증가하면 상호작용의 결과로 HTML 요소가 DOM에 삽입될 때 렌더링 작업이 늘어날 수 있습니다.
- 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 크기의 경고 기준점에 도달하거나 완전히 실패하는 경우 다음 단계는 DOM 크기를 줄여 페이지의 사용자 상호작용에 대한 응답 능력을 개선하여 웹사이트의 INP를 개선하는 방법을 찾는 것입니다.
상호작용의 영향을 받는 DOM 요소 수는 어떻게 측정하나요?
실험실에서 페이지의 DOM 크기와 관련이 있을 수 있다고 생각되는 느린 상호작용을 프로파일링하는 경우 프로파일러에서 '스타일 다시 계산'이라고 라벨이 지정된 활동을 선택하고 하단 패널에서 문맥 데이터를 관찰하여 영향을 받은 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 또는 grid와 같이 더 최신 (및 더 빠른) 레이아웃 모드를 사용하는 것이 좋습니다.
고려할 만한 다른 전략
DOM을 최대한 작게 유지하기 위해 DOM 트리를 평탄화하고 불필요한 HTML 요소를 삭제하는 데 많은 노력을 기울여도 DOM이 여전히 상당히 클 수 있으며, 사용자 상호작용에 따라 변경될 때 많은 렌더링 작업이 시작될 수 있습니다. 이러한 상황에 처한 경우 렌더링 작업을 제한하기 위해 고려할 수 있는 다른 전략이 있습니다.
추가 접근 방식 고려
페이지가 처음 렌더링될 때 사용자에게 페이지의 상당 부분이 처음에는 표시되지 않을 수 있습니다. 시작 시 DOM의 해당 부분을 생략하고 사용자가 페이지의 처음에 숨겨진 측면이 필요한 페이지 부분과 상호작용할 때 추가하여 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가 낮아져 사용자 환경이 개선됩니다.