HTML DOM 복잡도 분석기

HTML DOM 복잡도 분석기 사용 가이드

페이지의 HTML 요소가 너무 많고 깊으면 브라우저가 스타일을 계산하고 화면을 다시 그리는 데 시간이 오래 걸려, 클릭 후 반응(INP)이 느려집니다. 쇼핑몰 목록이나 상세페이지 빌더로 만든 페이지에서 흔히 생기는 문제입니다.

이 분석기는 붙여 넣은 HTML의 body 안 요소 수, 가장 깊은 중첩 단계, 한 요소가 가진 최대 자식 수를 세어 Lighthouse의 경고 기준과 비교해 ✓나 ⚠로 표시합니다. 요소가 800개를 넘으면 주의, 1,400개를 넘으면 경고입니다.

스크립트·이미지·폼 개수와 인라인 style 수, 같은 id가 여러 번 쓰인 곳도 알려 줍니다. width·height 속성이 없는 이미지는 로딩 중 화면 밀림(CLS)의 흔한 원인이라 따로 셉니다.

사용 방법

1. 1'분석할 HTML (페이지 소스 전체)' 칸에 페이지 소스를 붙여 넣습니다.
2. 2'실행'을 누르면 항목별 수치와 기준 판정이 나옵니다.
3. 3⚠ 항목이 있으면 반복되는 감싸기 div나 숨겨 둔 큰 목록부터 줄입니다.
4. 4중복 id와 크기 속성 없는 이미지를 함께 정리합니다.

<header><nav><ul><li><a href="/">홈</a></li><li><a href="/sale">세일</a></li></ul></nav></header>
<main id="main"><div id="list"><div class="card"><img src="linen.jpg"><p style="color:#333">린넨 원피스</p></div></div><div id="list"></div></main>

요소 수: 13 ✓
최대 깊이: 5 ✓
한 부모의 최대 자식 수: 2 ✓
스크립트 0 · 이미지 1 (크기 속성 없는 이미지 1) · 폼 0 · 인라인 style 1
중복 id: list(2)

이럴 때 쓰면 좋아요

• INP가 나쁜 페이지의 원인을 찾을 때
• 상세페이지 빌더가 만든 HTML이 얼마나 무거운지 볼 때
• 목록 페이지에 한 번에 보여 줄 상품 수를 정할 때
• 개발 단계에서 중복 id를 찾아낼 때

문제가 생겼을 때

활용 팁

• Lighthouse 기준은 경고선일 뿐이며, 숫자를 줄이면 대부분 반응 속도가 좋아집니다.
• 이미지에 width와 height를 적으면 브라우저가 자리를 미리 잡아 화면 밀림이 줄어듭니다.
• 측정한 성능 지표 판정은 Core Web Vitals 예산 계산기로 함께 보세요.

자주 묻는 질문