'avoid excessive-DOM size' Lighthouse 경고 해결하기

최종 검토자: Arjen Karel, 2026년 2월

'avoid excessive-DOM size' Lighthouse 경고란 무엇인가요?

Lighthouse의 avoid excessive-DOM size 경고란 무엇일까요? Lighthouse는 다음 중 하나에 해당하는 페이지에 플래그를 지정합니다.

• 총 DOM 노드가 1,500개를 초과하는 경우.
  이는 페이지에 1,500개가 넘는 HTML 요소가 있음을 의미합니다.
• 최대 노드 깊이가 32개 노드보다 큰 경우.
  요소가 32레벨 깊이로 중첩될 때 발생합니다.
• 하위 노드가 60개를 초과하는 상위 노드가 있는 경우.
  상위 요소(예: 테이블 또는 목록)에 60개가 넘는 하위 요소(테이블 행 또는 목록 요소)가 있을 때 발생할 수 있습니다.

이 수치를 살펴보자면, 2024 Web Almanac's Markup 챕터에 따르면 웹 페이지의 중간값은 594개의 DOM 요소를 가지고 있습니다. 상위 10%의 경우 1,716개로 급증하며, 이는 이미 Lighthouse 임계값을 초과합니다. 웹에 있는 모든 페이지의 약 10%가 이 경고를 트리거합니다.

Lighthouse 13(2025년 10월)부터 이 감사는 "Optimize DOM size" 인사이트로 발전했습니다. 이제 단순한 정적 노드 수에 의존하는 것이 아니라, 40ms를 초과하는 실제 스타일 재계산(style recalculation) 및 레이아웃 작업을 기반으로 트리거됩니다. 위의 임계값은 여전히 참조점으로 보고됩니다.

간단한 복습: DOM이란 무엇인가요?

DOM은 Document Object Model의 약자입니다. DOM은 HTML의 트리 구조 객체 표현으로, 각 HTML 요소(예: body 또는 h1)가 고유한 노드로 표현됩니다.

무엇이 excessive DOM size를 유발하나요?

excessive DOM size는 여러 가지 이유로 발생할 수 있습니다. 일반적으로 다음 사항들로 인해 유발됩니다.

• CMS의 잘못 코딩된 플러그인.
• JavaScript에 의해 생성된 DOM 노드.
• 불필요하게 복잡한 HTML을 생성하는 페이지 빌더(예: Elementor 또는 WP Bakery).
• WYSIWYG 편집기(예: TinyMCE)에 복사하여 붙여넣은 텍스트.
• 잘못된 템플릿 코딩.

2024 Web Almanac's Markup 챕터에 따르면 <div> 요소 단독으로 전체 페이지 요소의 28.7%를 차지합니다. 이러한 "divitis(div 남용)"는 특히 페이지 빌더 출력에서 excessive DOM size의 주요 원인입니다.

excessive DOM size는 페이지 속도에 어떤 영향을 미치나요?

대규모 DOM이 Lighthouse 지표에 직접적인 영향을 미치지는 않습니다. 하지만 웹페이지 렌더링을 불필요하게 복잡하게 만들어 높은 Lighthouse 점수를 받는 것을 거의 불가능하게 만듭니다. 웹페이지가 화면에 표시되기 전에 브라우저가 더 많은 작업을 수행해야 합니다. 대규모 DOM에는 4가지 문제가 있습니다.

• 코드가 방대하기 때문에 HTML 크기가 커집니다. 이로 인해 페이지를 다운로드하는 데 걸리는 시간이 늘어납니다.
• 대규모 DOM 크기는 렌더링 성능을 저하시킵니다. 처음 로드할 때와 사용자나 스크립트가 페이지와 상호 작용할 때마다 브라우저가 더 많은 (DOM) 계산을 수행해야 합니다.
• JavaScript를 통해 DOM과 상호 작용할 때 브라우저가 훨씬 더 많은 메모리를 사용할 수 있습니다.
• 대규모 DOM은 Interaction to Next Paint (INP)에 직접적인 영향을 미칩니다. 사용자가 클릭, 탭 또는 타이핑을 할 때마다 브라우저는 영향을 받는 요소에 대한 스타일과 레이아웃을 다시 계산해야 합니다. 페이지에 DOM 노드가 많을수록 이 작업에 더 오랜 시간이 걸립니다. 스타일 재계산이 300개가 넘는 요소에 영향을 미치거나 40ms 이상 소요될 때, 이는 INP에 측정 가능한 문제가 됩니다. 수천 개의 DOM 노드가 있는 페이지가 JavaScript가 빠른 경우에도 종종 INP에서 실패하는 이유가 바로 이것입니다.

'avoid excessive DOM size' 경고는 대부분 Largest Contentful Paint (LCP) 및 Cumulative Layout Shift (CLS)와 같은 중요한 Core Web Vitals에 간접적으로 영향을 미칩니다. 하지만 가장 큰 영향은 가장 자주 실패하는 Core Web Vital인 INP에 미칩니다.

'avoid excessive-DOM size'를 해결하는 방법

'avoid excessive-DOM size' 경고를 해결하려면 먼저 그 원인을 추적해야 합니다. Lighthouse는 최대 DOM 깊이(Maximum DOM Depth)와 최대 하위 요소(Maximum Child Elements)가 위치한 곳을 알려줍니다. 거기서부터 약간의 조사를 해야 합니다. Chrome DevTools의 DOM inspector를 사용하여 DOM을 확인하세요. 무엇이 많은 수의 DOM 노드를 생성하는지 파악해 보세요. 5가지 주요 용의자가 있습니다.

1. CMS의 잘못 코딩된 플러그인.
   플러그인, 예를 들어 슬라이더나 캘린더 플러그인이 다량의 DOM 노드를 생성하는 경우 이 플러그인을 보다 간소화된 플러그인으로 교체하는 것을 고려할 수 있습니다.
2. JavaScript에 의해 생성된 DOM 노드.
   JavaScript(예: 채팅 위젯)가 대량의 DOM 노드를 DOM에 주입할 수 있습니다. 이 경우 JavaScript 파일을 제거하거나 동일한 기능을 가진 대체품을 찾으세요.
3. 불필요하게 복잡한 HTML을 생성하는 페이지 빌더.
   Elementor나 WP Bakery와 같은 페이지 빌더는 종종 많은 DOM 노드를 가진 방대한 코드를 생성합니다. 이에 대한 쉬운 해결책은 없습니다. 페이지 빌더는 종종 워크플로우의 일부입니다. 해결책에는 방대한 코드를 정리하고 워크플로우를 변경하는 것이 포함됩니다.
4. WYSIWYG 편집기에 복사하여 붙여넣은 텍스트.
   TinyMCE와 같은 대부분의 WYSIWYG 편집기는 특히 Microsoft Word와 같은 다른 서식 있는 텍스트 소스에서 붙여넣을 때 붙여넣은 코드를 제대로 정리하지 못합니다. 텍스트뿐만 아니라 스타일도 복사합니다. 이러한 스타일은 다수의 DOM 노드에 내장될 수 있습니다. 이 문제에 대한 해결책은 간단합니다. 편집기에 콘텐츠를 붙여넣는 것을 멈추고 이미 붙여넣어진 방대한 텍스트가 있는 페이지를 정리하세요.
5. 잘못된 (템플릿) 코딩.
   편집기나 템플릿에 의해 대규모 DOM 크기가 생성될 때 상황이 복잡해질 수 있습니다. 이는 방대한 코드가 웹사이트 핵심의 일부임을 의미합니다. 편집기를 바꾸거나, 템플릿 일부를 재작성하거나, 심지어 처음부터 다시 시작해야 할 수도 있습니다.

대규모 DOM의 영향을 줄이는 기술

때로는 사이트의 많은 부분을 재작성하고 전체 워크플로우를 변경하지 않고는 과도한 DOM 크기를 제거하는 것이 불가능할 수 있습니다. 과도한 DOM 크기의 영향을 줄이기 위한 몇 가지 기술이 있습니다.

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• 웹페이지의 일부를 지연 로드(Lazy load)하세요.
  초기 렌더링 속도를 높이려면 푸터와 같은 웹사이트의 일부를 지연 로드하는 것을 고려할 수 있습니다.
• content-visibility: auto를 사용하여 화면 밖 콘텐츠의 렌더링을 건너뛰세요.
  CSS content-visibility 속성은 사용자가 그 근처로 스크롤할 때까지 화면 밖 요소에 대한 스타일 지정, 레이아웃 및 페인트를 건너뛰도록 브라우저에 지시합니다. 이제 93%의 브라우저 지원(Chrome 85+, Firefox 125+, Safari 18+)을 갖추고 있습니다. 레이아웃 변화(layout shifts)를 방지하려면 항상 contain-intrinsic-size와 함께 사용하세요.
• 큰 페이지를 여러 페이지로 분할하세요.
  콘텐츠 자체가 많은 DOM 노드를 생성하는 경우 큰 페이지를 여러 페이지로 분할하면 DOM 노드 수가 줄어들 수 있습니다.
• 가상 스크롤(virtual scrolling)을 구현하세요.
  긴 목록, 데이터 테이블 또는 이미지 갤러리의 경우 가상 스크롤은 뷰포트에 표시되는 항목만 렌더링합니다. react-window(React) 및 CDK Virtual Scrolling 모듈(Angular)과 같은 라이브러리는 수천 개의 노드 대신 DOM 노드 수를 보이는 항목(일반적으로 10~30개 노드)만으로 유지합니다.
• 메모리 집약적인 JavaScript를 피하세요.
  페이지에서 다량의 DOM 노드를 다룰 때는 JavaScript에 각별히 주의하세요. document.getElementsByTagName('div');는 메모리 사용량을 증가시키는 다수의 DOM 노드를 로드할 수 있습니다.
• 복잡한 CSS 선언을 피하세요.
  페이지에서 다량의 DOM 노드를 다룰 때는 복잡한 CSS 선언에 각별히 주의하세요. div:last-child;는 페이지의 모든 div에 대해 last-child 상태를 확인해야 합니다. 단순한 선택자는 브라우저의 순회(traversal) 작업을 줄여줍니다. 이는 스타일 재계산의 매 밀리초가 중요한 INP에서 가장 중요합니다.

DOM 크기를 줄인 후 Real User Monitoring을 통해 실제 사용자에게 미치는 영향을 추적하세요. CoreDash 데이터에 따르면, DOM 노드 수를 1,500개 미만으로 줄이면 모바일 기기에서 INP가 일반적으로 35% 향상됩니다.