사이트 성능: 사이트의 DOM 순서
2 분 분량
사이트의 DOM 순서는 페이지에 있는 요소를 읽는 순서를 나타냅니다. 이 순서는 Tab 키 또는 화면 리더와 같은 보조 기술을 사용하는 방문자가 이러한 요소를 보거나 상호 작용할 수 있는 순서를 결정하는 만큼 매우 중요합니다.
모든 방문자가 사이트를 쉽게 탐색할 수 있도록 DOM 순서가 페이지에 있는 요소의 시각적 순서와 일치하는지 확인하는 것이 좋습니다. 로딩 순서를 일치시키면 접근성이 향상될 뿐만 아니라 사이트의 레이아웃 문제를 방지할 수 있습니다.
다음 도움말을 참고하세요.
DOM 순서와 사이트 성능
DOM은 사이트에서 요소가 로딩되는 순서를 결정합니다. DOM 순서가 요소가 보이는 순서와 일치하지 않을 경우 사이트 로딩에 영향을 줄 수 있습니다.
예를 들어, 페이지 하단에 표시되는 버튼이 DOM 순서에서는 첫 번째인 경우, 위에 있는 요소보다 먼저 로딩됩니다. 추가 콘텐츠가 로딩되면 페이지의 레이아웃이 다른 요소를 포함시키기 위해 이동될 수 있습니다.
또한, 방문자가 콘텐츠의 나머지 부분이 로딩되는 동안 해당 버튼을 클릭하려고 하면 실수로 다른 요소를 선택해 다른 페이지나 섹션으로 이동할 수 있습니다.
사이트가 올바르게 로딩되고 방문자에게 보다 원활한 경험을 제공할 수 있도록 사이트의 DOM 순서는 언어의 읽기 순서(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)에 관계없이 페이지가 시각적으로 보이는 순서와 일치해야 합니다.
Wix 에디터 사이트의 DOM 순서
자동 DOM 순서는 데스크톱 에디터 사이트에서 자동으로 활성화됩니다. 즉, 요소의 시각적 순서에 대한 변경 사항은 자동으로 DOM 순서에 적용되므로 별도의 작업이 필요하지 않습니다.
데스크톱 에디터로 사이트를 제작하면 사이트의 모바일 버전이 생성됩니다. 모바일 사이트의 DOM 순서 또한 자동으로 정렬되며, 수동으로 변경할 필요가 없습니다.
중요!
데스크톱 에디터 사이트의 자동 DOM 순서는 왼쪽 → 오른쪽 스크립트로 제작되었습니다. (예: 영어, 스페인어 등) 사이트에서 아랍어 또는 히브리어 등 오른쪽에서 왼쪽으로 표기하는 스크립트를 사용하는 경우 레이어 패널에서 DOM 순서를 수동으로 재정렬해야 합니다.
참고:
자동 DOM 순서는 사이트 저장 시 데스크톱의 변경 사항에만 적용됩니다.
에디터 X 사이트의 DOM 순서
대부분의 에디터 X 사이트에는 자동 DOM 순서가 없으므로 사이트 성능을 개선하려면 수동으로 정렬해야 합니다. 에디터 X 사이트의 구성 요소 순서를 조정할 수 있습니다.
예를 들어, 섹션은 위에서 아래로 정렬되어야 하며, 패널에서 앞으로 가져오기를 클릭해 정렬할 수 있습니다. 스택 및 반복 레이아웃은 자동으로 정렬되지만, DOM 순서 재구성 기능을 사용해 DOM 순서가 올바른지 확인할 것을 권장합니다.
도움이 되었나요?
|