"Avoid an Excessive DOM Size" 경고를 수정하기 위한 7가지 검증된 전략

대부분의 Google PageSpeed ​​Insights 개선 제안은 매우 간단합니다.

"오프스크린 이미지 연기", "렌더링 차단 리소스 제거" 또는 "사용하지 않는 CSS 줄이기" 등 문제를 해결하기 위해 취해야 할 다음 단계를 파악할 수 있습니다.

그러나 조금 더 깊이 스크롤하면 갑자기 "과도한 DOM 크기를 피하십시오"라는 경고가 나타납니다.

첫 번째 반응:

DOM 크기가 무엇이며 어떻게 수정합니까?!

당신은 바로 이곳에 있습니다.

다음 단락에서는 DOM 크기와 이 경고를 처리하는 방법에 대해 알아야 할 모든 것을 배웁니다.

• DOM(문서 개체 모델)이란 무엇입니까?
• DOM 크기가 페이지 성능에 미치는 영향은 무엇입니까?
• "과도한 DOM 크기 방지" 경고가 표시되는 이유
• "과도한 DOM 크기 방지" 경고를 수정하는 방법

버튼 클릭 한 번으로 90+ PSI 점수를 달성하십시오. NitroPack으로 귀하의 사이트를 확인하십시오!

DOM이란 무엇입니까?

웹 사이트에는 HTML 문서, CSS 및 JavaScript 파일과 같은 리소스가 포함되어 있습니다.

사용자가 웹사이트를 로드할 때마다 브라우저가 연결을 설정하고 리소스를 수신합니다. 첫 번째 데이터 청크가 수신되면 구문 분석 프로세스가 시작됩니다.

구문 분석은 브라우저가 데이터(HTML 마크업)를 DOM 트리로 변환하기 위해 수행하는 단계입니다.

DOM은 HTML을 가지와 노드의 트리로 나타내는 문서 모델입니다.

트리의 각 분기는 노드에서 끝나고 각 노드에는 개체가 포함됩니다. 노드는 요소, 텍스트 문자열 또는 주석과 같은 문서의 일부를 나타냅니다.

간단히 말해서 DOM은 웹 페이지가 로드될 때마다 브라우저가 구축하는 객체의 구조를 의미합니다.

DOM 크기가 페이지 성능에 미치는 영향은 무엇입니까?

DOM에 가지와 노드가 많을수록 크기가 커집니다.

각각 DOM 크기가 클수록 직면할 수 있는 부정적인 성능 문제가 더 커집니다.

다음은 더 큰 DOM 크기와 관련된 몇 가지 문제입니다.

1. 데이터 비용 증가 및 로드 시간 감소

큰 DOM 트리에는 종종 사용자가 페이지를 처음 로드할 때 표시되지 않는 많은 노드가 포함됩니다. 이렇게 하면 사용자를 위해 더 많은 요소를 로드해야 하고 로드 시간이 느려지므로 데이터 비용이 불필요하게 증가합니다.

2. 사용자 장치의 메모리 리소스를 압도합니다.

JavaScript 쿼리와의 지속적인 상호 작용으로 인해 성능이 저하되고 렌더링이 느려집니다. 이로 인해 사이트 사용자에게 부정적인 페이지 경험이 발생합니다.

3. 렌더링 시간 증가

사용자가 페이지와 상호 작용할 때 브라우저는 지속적으로 노드의 위치와 스타일을 다시 계산해야 합니다. 크고 복잡한 DOM 트리는 렌더링 속도를 크게 저하시킬 수 있습니다.

4. TTFB(Time to First Byte) 증가

TTFB는 클라이언트 브라우저가 서버로부터 응답의 첫 번째 바이트를 수신하는 데 걸리는 시간을 측정합니다. 과도한 DOM은 더 큰 HTML 문서를 나타냅니다. 결과적으로 전송해야 할 데이터의 양이 많아지고 시간이 더 오래 걸릴 수 있습니다.

PageSpeed ​​Insights에 '과도한 DOM 크기 방지' 경고가 표시되는 이유

PSI는 Lighthouse를 사용하여 제어된 환경(예: 랩 데이터 사용)에서 URL을 분석하여 성능, 접근성, 모범 사례 및 SEO 점수를 보여줍니다.

Lighthouse가 페이지에 플래그를 지정하고 각각 PSI 보고서에 "과도한 DOM 크기 방지" 경고를 표시하려면 해당 DOM 트리에 대해 다음 오류 중 하나가 참이어야 합니다.

• 총 1,500개 이상의 DOM 노드 가 있습니다.
• 최대 노드 깊이 는 32개 노드보다 큽니다 .
• 상위 노드에는 60개가 넘는 하위 노드 가 있습니다.

Core Web Vitals를 통과한 상위 31% 웹사이트에 가입하세요! NitroPack으로 사이트 보기

과도한 DOM 크기를 피하는 방법

Google의 좋은 경험 법칙은 다음과 같습니다.

"일반적으로 필요할 때만 DOM 노드를 생성하고 더 이상 필요하지 않을 때 노드를 파괴하는 방법을 찾으십시오."

물론 그렇게 하는 것이 말처럼 쉽지는 않지만 웹사이트를 최적화하는 가장 핵심적인 부분으로 내려가야 할 때가 있을 것입니다.

그런 다음 다음 수정 사항 중 일부를 적용하는 것이 좋습니다.

1. 잘못 코딩된 플러그인 및 테마를 피하십시오.

그들은 기본적으로 사이트의 코드를 부풀리고 DOM 크기를 늘리며 사이트의 속도와 전반적인 성능을 저하시킵니다.

테마/플러그인이 잘못 코딩되었는지 어떻게 알 수 있습니까?

좋은 질문입니다. 답은 다음과 같습니다.

• 리뷰를 읽어보세요. 문제가 있는 경우 누군가가 이미 문제를 접하고 댓글을 달았을 가능성이 있습니다.
• 돈을 쓰는 것을 부끄러워하지 마십시오. 다른 것과 마찬가지로, 당신은 당신이 지불하는 것을 얻습니다. 무료 테마/플러그인을 받아 돈을 절약하는 것이 좋을 것 같지만 장기적인 효과는 훨씬 더 많은 비용이 듭니다.
• 마지막으로 업데이트된 날짜를 확인하십시오. 오래된 테마와 플러그인을 피하고 싶을 것입니다.

WooCommerce 사용자이거나 상점을 시작할 계획이라면 2022년에 가장 실적이 좋은 Woo 테마에 대한 심층 연구를 반드시 확인해야 합니다.

2. JavaScript 기반 DOM 노드 최소화

웹 사이트에 동적 요소를 추가하면 추가 JavaScript 노드로 부풀어 오를 수 있으므로 비용이 발생합니다.

우선 문제를 일으키는 JS 파일을 할당하고 제거하여 해결할 수 있습니다. 타사 위젯(예: 채팅 위젯)인 경우 최적화된 대안을 찾아야 합니다.

3. 부풀려진 HTML을 생성하는 페이지 빌더

페이지 빌더의 사용 편의성은 많은 사용자를 위한 웹 사이트 생성 프로세스의 필수적인 부분이 되었습니다.

불행하게도 페이지 빌더는 때때로 과도한 수의 DOM 노드로 부풀려진 코드를 생성할 수 있습니다. 그들은 너무 많은 div 태그를 삽입하여 이를 수행하고 있습니다.

이를 처리하기 위해 HTML에 액세스하여 수동으로 수정할 수 있습니다.

좋은 소식은 일부 페이지 빌더가 이러한 잘 알려진 문제를 해결하기 위한 조치를 취한다는 것입니다. 예를 들어, Elementor는 Elementor 3.0이 새로운 웹사이트의 속도와 성능을 향상시키기 위해 상당한 DOM 개선 사항을 제공한다고 발표했습니다.

4. WYSIWYG 편집기에 텍스트를 복사/붙여넣기하지 마십시오.

대부분의 WYSIWYG(What You See Is What You Get) 편집기는 붙여넣은 코드 정리에 실패합니다. 특히 Microsoft Word와 같은 다른 서식 있는 텍스트 소스에서 붙여넣을 때. 문제는 텍스트뿐만 아니라 스타일도 복사한다는 것입니다. 그리고 그들은 많은 DOM 노드를 내장할 수 있기 때문에 주범입니다.

이를 처리할 수 있는 몇 가지 옵션이 있습니다.

• 편집기에 텍스트 붙여넣기 방지
• 일반 텍스트로 붙여넣기 옵션 사용
• (편집기가 허용하는 경우) 고급 기능을 사용하여 코드를 붙여넣은 후 정리하십시오.

마지막으로 중요한 것은 이전 페이지로 돌아가서 정리하는 것입니다.

5. 한 페이지 웹사이트를 여러 페이지로 나누기

단일 페이지 웹사이트는 귀하의 비즈니스를 소개하는 것이 유일한 목적일 때 좋은 아이디어입니다.

반대로 비즈니스 정보, 블로그 기사, 제품, 문의 양식 등을 추가하기로 결정한 경우 별도의 페이지로 나누고 탐색 메뉴를 통해 연결하십시오.

큰 페이지를 여러 페이지로 분할하면 DOM 노드 수가 줄어들 수 있습니다.

6. display:none을 사용하여 원하지 않는 요소를 숨기지 마십시오.

display: none 일반적으로 JavaScript에서 요소를 삭제하고 다시 만들지 않고 숨기고 표시하는 데 사용됩니다. 그러나 그렇다고 해서 HTML 마크업에서 사라져 방문자가 원하지 않는 요소를 로드하게 되는 것은 아닙니다.

7. 복잡한 CSS 선언 및 JavaScript 사용을 피하십시오.

복잡한 CSS 선언 및 JavaScript는 추가로 메모리 사용량을 증가시키고 사이트 속도를 저하시킬 수 있습니다. 과도한 수의 DOM 노드를 처리하는 경우 건너뛰는 것이 가장 좋습니다.

CSS 및 JavaScript 문제를 자동으로 수정하십시오! NitroPack으로 사이트 보기

결론적으로

DOM 문제를 수정해도 PageSpeed ​​Insights 점수가 향상되지 않는 것은 사실입니다.

그러나 "과도한 DOM 크기 방지" 경고를 처리하기 위해 노력하면 숨겨진 이점이 훨씬 더 큽니다.

• 사이트 로드 시간 늘리기
• 페이지의 체감 성능 향상
• 방문자에게 더 나은 사용자 경험 제공

가장 중요한 것은 이 세 가지가 Google에서 보상을 받는다는 것입니다! 또한 이탈률을 낮추고 평균 소요 시간을 늘리며 마지막으로 전환율을 높일 수 있는 확실한 방법입니다.

다른 PSI 제안을 수정하는 방법을 찾고 있다면 다른 문서를 확인하십시오.

• 차세대 형식으로 이미지를 쉽게 제공(WordPress, OpenCart 및 Magento)
• 오프스크린 이미지를 레이지 로드하는 방법(5가지 입증된 기술)
• 웹을 위한 이미지 최적화: 2022 SEO 및 사이트 속도 기술
• 핵심 성능 보고서를 개선하기 위한 8가지 글꼴 로딩 전략(2022)
• 렌더링 차단 리소스를 제거하는 방법(CSS 및 JavaScript)
• 타사 코드의 영향 감소(플러그인 사용/사용 안 함)
• 메인 스레드 작업을 최소화하는 7가지 방법