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