WordPress에서 DOM 크기를 줄이는 방법

또는 GTmetrix에서 "DOM 요소 수 줄이기":

DOM이란 무엇입니까?

브라우저가 HTML 문서를 수신하면 CSS 및 JavaScript로 렌더링 및 그리기에 사용되는 트리 구조로 변환되어야 합니다.

이 트리 구조를 DOM 또는 문서 개체 모델이라고 합니다.

매듭 DOM의 모든 HTML 요소를 노드라고 합니다. (일명 나무에 "잎").
깊이 - "가지"가 나무에 얼마나 오래 가는지를 깊이라고 합니다. 예를 들어 위의 다이어그램에서 img 태그의 깊이는 3입니다. (HTML -> body -> div -> img).
자식 요소 – 노드의 모든 자식 노드(추가 분기 없음)는 자식입니다.

Lighthouse 및 Google PageSpeed Insights는 다음 조건 중 하나가 충족되는 경우 페이지에 플래그를 지정하기 시작합니다.

과도한 DOM 크기는 다양한 방식으로 성능에 영향을 줄 수 있습니다.

더 높은 구문 분석 및 렌더링 시간(FCP) . 큰 DOM 트리와 복잡한 스타일 규칙은 브라우저에 큰 도움이 됩니다. 브라우저는 HTML을 구문 분석하고 렌더 트리를 구축하는 등의 작업을 수행해야 합니다. 사용자가 상호 작용하거나 HTML의 무언가가 변경될 때마다 브라우저는 이를 다시 계산해야 합니다.
메모리 사용량 증가 - JavaScript 코드에는 DOM 요소에 액세스하는 기능이 있을 수 있습니다. 더 큰 DOM 트리는 JavaScript가 처리하는 데 더 많은 메모리를 사용하도록 합니다. 예를 들어 쿼리 선택기가 있습니다.document.querySelectorAll('img')지연 로딩 라이브러리에서 일반적으로 사용하는 모든 이미지를 나열합니다.
TTFB 증가 – DOM의 크기가 커질수록 HTML 문서의 크기(KB)도 커집니다. 네트워크를 통해 더 많은 데이터를 전송해야 하므로 TTFB가 증가합니다.

예를 들어, DOM의 크기를 줄이는 것은 기술적으로 쉽습니다.

용법:

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

대신에:

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

기본적으로 가능한 모든 HTML 요소를 제거하십시오. Flexbox 또는 Grid를 사용하여 DOM 크기를 더 줄일 수도 있습니다.

그러나 WordPress를 사용하고 있기 때문에 별로 도움이 되지 않습니다!

사이트에 모든 것이 포함된 페이지가 있습니까? 서비스, 문의 양식, 제품, 블로그 게시물, 평가 등을 좋아하시나요?

여러 페이지로 분할하고 헤더/내비게이터에서 링크해 보십시오.

모든 종류의 요소를 지연 로드합니다. 여기 몇 가지 예가 있어요.

YouTube 동영상 지연 로딩 - WP Rocket의 WP YouTube Lyte 또는 Lazy Load를 사용합니다.
페이지당 블로그 게시물/제품 수 제한 – 보통 페이지당 최대 10개의 블로그 게시물을 유지하고 나머지는 페이지로 나누려고 합니다.
블로그 게시물/제품 로드 지연 – 더 로드 버튼 또는 무한 스크롤을 추가하여 더 많은 블로그 게시물 또는 제품을 로드합니다.
지연 로딩 댓글 - Disqus를 사용하기 때문에 Disqus 조건부 로딩을 사용하고 있습니다. 자신의 주석을 사용하는 경우 Lazy Load for Comments 와 같은 플러그인을 사용하십시오.
댓글의 페이지 매김 - 수백 개의 주석이 있는 경우 DOM 크기에도 영향을 줄 수 있습니다. 댓글에 페이지를 매기려면 설정 -> 토론 -> 댓글에 페이지 매김으로 이동합니다.
관련 게시물 수 제한 – 관련 게시물의 수를 3~4개로 제한해 보세요.

참고: 지연 로딩 이미지는 DOM 크기를 줄이지 않습니다.