워드프레스에서 DOM 사이즈 줄이기

웹사이트의 페이지 속도를 높이기 위해서는 DOM 사이즈가 지나치게 커지는 것을 피해야 합니다.

DOM이란?

웹브라우저가 HTML 문서를 읽어들일 때 CSS와 자바스크립트로 렌더링과 페인팅 작업을 진행할 수 있도록 우선 트리구조로 변환해야 합니다. 이 트리구조를 DOM(Document Object Model) 이라고 지칭합니다.

• Nodes : DOM 안에 있는 모든 HTML 요소를 노드라고 합니다. (말하자면, 트리구조의 나무에서 잎사귀와 같은 것이라고 생각하시면 됩니다.)
• Depth : 트리구조에서 갈라지는 가지의 수를 말합니다. 예를 들어 위 다이아그램처럼 img 태그까지 가려면 html > body > div > img 이므로 Depth값은 3입니다.
• Child Elements : 어떤 특정 노드의 모든 하위 노드들을 Child Elements라고 합니다.

구글 PageSpeed Insights는 아래 조건 중 하나라도 해당이 되면 표시합니다.

• 총 1,500개 이상의 노드
• 32노드 이상의 Depth
• 60 개 이상의 자식노드를 가진 부모 노드

DOM 사이즈가 사이트 속도에 미치는 영향

파싱과 렌더링 시간이 늘어납니다.

DOM 트리가 거대해지고 스타일 규칙이 복잡해 질수록 브라우저가 처리해야 하는 작업량은 늘어납니다. 웹브라우저는 HTML을 파싱해야 하고, 트리구조를 렌더링해야 합니다. 사용자와 인터랙션할 때 마다 또는 HTML에 변동이 발생할 때마다 이 작업을 다시 해야 합니다.

메노리 사용량이 늘어납니다.

자바스크립트 코드는 DOM 요소에 접근해야 하는 Function을 가지고 있을 수 있습니다. 너무 사이즈가 큰 DOM 구조는 자바스크립트로 하여금 Function을 처리하기 위해 더 큰 메모리를 필요로 할 수 있습니다.

TTFB를 증가시킵니다.

DOM 사이즈를 줄이는 방법

방법은 간단합니다. 예를 들어

<div id="navigation-main">
    <ul>
        etc..
    </ul>
</div>

대신에

<ul id="navigation-main">
    etc..
</ul>

이렇게 코딩을 하면 됩니다.

또한, 다른 방법들을 나열하면,

• 모든 내용을 하나의 페이지에 담지 말고 여러 페이지로 나누어서 담습니다.
• 유튜브 비디오를 Lazy Loading 합니다.
• 블로그 포스트의 페이지 수를 제한하고 Pagination을 사용합니다.
• Comments 섹션을 Lazy Loading 하고 Pagination 합니다. (설정 > 토론 메뉴에서 설정할 수 있습니다.)
• 관련 포스트를 3개에서 4개정도로 제한합니다.
• CSS에서 불필요한 display:none 스타일을 사용하지 않도록 합니다.
• DIV 사용을 최소화합니다.

등이 있을 수 있습니다.