웹사이트의 DOM 크기를 줄이는 키

게시 됨: 2020-11-17

웹 페이지에서 좋은 SEO 포지셔닝을 달성하는 데 영향을 미치는 측면 중 하나는 로딩 성능입니다. 그리고 이것은 페이지 의 DOM 크기 가 중요한 역할을 하는 주제입니다.

그렇기 때문에 DOM이 지나치게 큰 것으로 간주될 수 있는 방법과 이를 줄이는 방법을 설명합니다.

의 시작하자!

목차

DOM이란 무엇입니까?

간단히 말해서, DOM에 대해 이야기할 때 브라우저가 페이지를 로드할 때마다 생성하는 객체의 구조를 참조합니다 . Document Object Model의 약어에서 이름이 유래되었습니다.

문서 객체 모델
이미지 출처: 위키피디아

다른 개체가 있고 그 중 일부는 다른 개체에 종속되는 계층 구조입니다. 구조는 다른 보조 항목이 의존하는 기본 개체가 있기 때문에 트리와 유사합니다. DOM은 일련의 태그 로 구성된 트리로 페이지의 HTML 구조를 나타냅니다.

다시 말해서 브라우저는 우리에게 보여줄 페이지를 준비할 때 HTML 구조를 기반으로 페이지의 모든 요소로 구성된 개체 트리를 만듭니다.

E 브라우저는 HTML 문서를 수신할 때마다 이를 DOM 또는 DOM 트리라고 하는 트리와 같은 구조로 변환해야 합니다. JavaScript 코드는 해당 DOM에 액세스하여 수정할 수 있습니다.

DOM 크기는 웹 성능에 어떤 영향을 줍니까?

웹 성능

진실은 DOM의 크기가 페이지의 성능에 영향을 미친다는 것입니다. 너무 큰 DOM 은 다음과 같은 영향을 미치므로 웹사이트 속도를 늦출 수 있습니다 .

  • 네트워크 효율성 및 부하 성능. DOM이 지나치게 크면 사용자가 페이지를 처음 로드할 때 표시되지 않는 HTML 요소가 포함되어 불필요한 데이터 소비를 증가시키고 사이트 로드를 더 느리게 만듭니다.
  • 런타임 성능. 사용자와 스크립트가 페이지와 상호 작용할 때 브라우저는 HTML 태그의 위치와 스타일을 계속해서 다시 계산해야 합니다.
  • 메모리 성능 . DOM 트리가 너무 크면 브라우저에서 처리하는 데 더 많은 메모리가 필요할 수 있습니다.

기술적으로 DOM의 크기를 줄이는 방법은 무엇입니까?

웹 성능에 부정적인 영향을 미치지 않도록 DOM 크기를 줄이려면 필요하지 않은 모든 HTML 요소를 제거해야 합니다 . 이미 보았듯이 필요한 조치를 취하지 않으면 페이지 속도가 느려지는 몇 가지 이유가 있습니다.

이 코드를 사용하는 대신;

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

이 다른 것을 사용하는 것이 좋습니다.

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

트리 구조와 관련하여 다음 용어를 알아야 합니다.

  • 노드 : DOM의 모든 HTML 요소입니다. 그들은 또한 나무의 '잎'으로 알려져 있습니다.
  • 보조 노드 : 더 이상 분기가 없는 노드입니다.

즉, 가장 좋은 점은 트리의 깊이가 다음과 같이 형성된다는 것입니다 .

  • 32개 미만의 노드.
  • 각 노드당 60개 미만의 보조 노드.

Google은 웹사이트를 개발할 때 페이지에 1,500개 미만의 DOM 노드 를 포함할 것을 권장합니다. 이는 디자인이 너무 복잡하지 않아야 함을 의미합니다.

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

WordPress에서 DOM 크기를 줄이는 방법에는 여러 가지가 있습니다.

큰 페이지를 여러 페이지로 분할

사이트의 다양한 유형의 콘텐츠를 표시하는 단일 페이지가 있습니까? 예를 들어, 연락처 양식, 블로그 게시물, 제품 등

그런 경우에는 이러한 모든 요소를 ​​서로 다른 페이지에 분류 하고 탐색 모음을 통해 연결하는 것이 좋습니다.

지연 로드 플러그인을 활성화하고 가능한 모든 요소를 ​​페이지로 분할

허용하는 모든 요소에서 지연 로딩 모듈을 활성화 할 수 있습니다. Youtube Lite 또는 WordPress WP-Rocket의 Lazy Load를 사용하여 YouTube의 비디오로 이 작업을 수행할 수 있습니다.

블로그 페이지당 게시물 수 를 제한하는 것도 필수적 입니다. 합리적인 최대 게시물 수는 페이지당 10개입니다. 이 방법은 각 페이지에 표시되어야 하는 제품 수에도 적용됩니다.

페이지당 게시물 수를 변경하는 옵션이 있습니다. 설정 메뉴 > 읽기 하위 메뉴로 이동하여 블로그 페이지가 최대 값으로 표시되도록 변경하고 변경 사항을 저장 합니다. .

또한 관련 출판물의 수를 최대 3~4개로 제한하는 것이 좋습니다.

기본 WP 테마에 포함된 불필요한 항목 제거

경우에 따라 제품 페이지의 "장바구니에 추가" 버튼, 발행일, 작성자 정보 등과 같이 기본적으로 WordPress 테마와 함께 제공되는 특정 요소를 제거 해야 할 수 있습니다.

WordPress 테마의 구성을 확인하여 해당 요소를 제거하는 옵션이 있는지 확인하고, 그렇지 않은 경우 해당 PHP 코드를 찾아 제거하십시오.

잘 코딩된 테마 또는 페이지 빌더 사용

WordPress 테마 의 품질은 DOM의 크기에 직접적인 영향을 미칩니다. 따라서 Astra 또는 GeneratePress와 같이 잘 코딩된 테마를 사용하는 것이 좋습니다.

페이지 빌더는 종종 너무 많은 div 태그를 삽입하므로 원치 않는 요소를 삽입하지 않고 HTML 구조에 대한 더 많은 제어를 허용하는 Oxygen Builder와 같은 솔루션을 사용하는 것이 중요합니다.

HotJar와 같은 도구를 사용하면 사용자가 사용하는 것과 작동하지 않는 것을 볼 수 있습니다. 정확한 DOM 크기를 얻으려면 정밀 분석을 실행하는 것이 기본입니다.

마지막 생각들

과도한 Dom Size는 웹 성능을 저하시켜 페이지 로드 시간을 늦춥니다. 불필요한 요소 없이 HTML 구조를 단순하게 유지하십시오 . DOM 트리를 확인하고 사이트에 가치를 추가하지 않는 노드를 제거하십시오. 웹사이트 속도를 높일 뿐만 아니라 더 나은 UX도 제공할 수 있습니다.

Google은 앞으로 몇 달 안에 출시될 Page Experience 업데이트 에서 DOM 크기를 확실히 고려할 것입니다. 웹 성능에 영향을 미치지 않도록 적절한 항목이 있는지 확인하십시오.