# 사이드바 콘텐츠 지연 로드
**URL:** https://meta.discourse.org/t/lazy-load-sidebar-content/254799
**Category:** UX
**Tags:** mobile, sidebar
**Created:** [2월 10, 2023, 6:36오후 UTC](https://meta.discourse.org/t/lazy-load-sidebar-content/254799 "2023-02-10T18:36:56Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 10, 2023, 6:36오후 UTC](https://meta.discourse.org/t/lazy-load-sidebar-content/254799/1 "2023-02-10T18:36:56Z")
안녕하세요,
새 사이드바에 카테고리, 태그, 채팅과 같은 동적 콘텐츠를 추가할 수 있기 때문에 콘텐츠 양이 매우 많아질 수 있습니다. 따라서 저사양 기기, 예를 들어 제 안드로이드 모바일(화웨이 P20 Pro)에서는 사이드바를 여는 데 실제로 매우 느릴 수 있습니다.
현재 제 사이트의 사이드바에는 다음 항목이 포함되어 있습니다:
- 카테고리 9개
- 태그 5개
- 채팅 채널 8개
- 개인 채팅 19개
하지만 이 항목들은 자주 변경되며, 특히 개인 채팅 섹션이 그렇습니다.
* * *
모든 섹션이 펼쳐진 상태에서 제 화웨이 모바일에서 사이드바를 여는 데 보통 최대 약 1초가 걸립니다. 개인 채팅 섹션을 로드하는 것이 이 지연의 주요 원인이라고 생각합니다. 사이드바 섹션을 접으면 즉시 열립니다. 사이드바 콘텐츠에 일종의 지연 로딩(lazy loading) 솔루션을 추가하여 섹션이 펼쳐진 위치에 있을 때 콘텐츠를 즉시 로드할 수 있을지 궁금합니다. 접기 기능이 일부 이 목적으로 존재한다고 생각하지만, 기본적으로 섹션은 펼쳐져 있으며 멤버들이 접으면 속도가 빨라진다는 사실을 알지 못합니다. 그리고 솔직히 저는 섹션을 계속 전환하는 것보다는 펼쳐진 상태로 사용하는 것을 훨씬 선호합니다.
메뉴 패널에 대해 CSS 솔루션이 있으며, 이는 열 때 첫 20개 항목만 로드하도록 하여 속도를 높여줍니다. 이 방법은 잘 작동하지만 사이드바가 열리는 느낌은 여전히 느립니다. 메뉴가 이동하는 동안 로드되는 숨겨진 항목의 수 때문이라고 생각합니다. 🤔
>
물론 매우 빠른 아이폰에서도 테스트해 보았으며, 지연이나 느려짐이 없었습니다. 🙂
감사합니다 🙂
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 16, 2023, 10:19오전 UTC](https://meta.discourse.org/t/lazy-load-sidebar-content/254799/4 "2023-02-16T10:19:32Z")
@Don, 보고해 주셔서 감사합니다. 여기서 좀 더 살펴보고, 특히 느린 기기에서의 성능을 개선할 수 있는 부분이 있는지 확인해 보겠습니다 👀
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 27, 2023, 12:31오후 UTC](https://meta.discourse.org/t/lazy-load-sidebar-content/254799/7 "2023-02-27T12:31:31Z")
성능 향상에 도움이 될 것으로 예상되는 몇 가지 변경 사항을 적용했습니다:
- [PERF: Switch to Glimmer LinkTo implementation - Pull Request #20333 - discourse/discourse - GitHub](https://github.com/discourse/discourse/pull/20333)
- [PERF: Refactor slide-in menu sizing for improved performance - Pull Request #20377 - discourse/discourse - GitHub](https://github.com/discourse/discourse/pull/20377)
향후 렌더링 성능 개선에 시간을 할애할 계획이지만, 아직 구체적인 계획은 없습니다.