[Refactor] improve dashboard page performance

[ejinn1]

📄 대시보드 페이지 LCP 개선

📝 변경 사항 요약

• 사용하지 않는 javascript 줄이기
• api 서버에 preconnect 설정
• 이미지 최적화

📌 관련 이슈

• 이슈 번호: [Refactor] Improve dashboard page performance #197

🔍 변경 사항 상세 설명

사용하지 않는 javascript 줄이기

대시보드 페이지를 최초 실행 했을 때 not-found.js가 98%정도 사용하지 않는 js이다.

내부에 Sidebar 컴포넌트를 동적 라우팅으로 변경한 후 다시 측정하니 대부분이 줄어들게 되었다.

또한 레이아웃에서의 사이드바도 줄였다.

preconnect 설정

preconnect, dns-prefetch를 통해 서버 응답 속도를 소폭 향상시켰다.

이전

적용후

팔로우 이미지 최적화

기존 10개씩 로드하던 api에서 6개로 줄이고
priority를 모바일 기준 보이는 3개의 이미지에만 적용시켰다.

최종적으로 LCP 2.4초 감소시켰다....

사실 성능상에는 별로 차이가 없는 것 같다..

코드 가독성 개선

기존에 여러 복잡하게 나눠져 있던 분기를 순서대로 읽기 쉽게 코드를 수정했음

✅ 확인 사항

• 코드가 정상적으로 컴파일되는지 확인했습니다.
• 관련 테스트를 작성하고 모두 통과했는지 확인했습니다.
• 코드 스타일 가이드에 맞게 작성했습니다.

📸 스크린샷 (선택 사항)

변경 사항을 시각적으로 확인할 수 있는 스크린샷을 여기에 첨부해주세요.

기타 참고 사항

추가로 공유하고 싶은 내용이나 참고 자료가 있다면 여기에 작성해주세요.

[github-actions]

💄 Storybook: https://674fb103b6bfad504c6f0da9-ggrikhzxyc.chromatic.com/
🕖 Update: 2025년 02월 15일 16시 23분 08초

[github-actions]

🎉 구현한 기능 Preview: https://front-3jyyqg8dn-beoms-projects-53e61468.vercel.app

[gibeom0218]

오ㅠㅠㅠ 이제 봤네요... 죄송해요
와우!! preconnect, dns-prefetch 설정은 처음 봤어용
혹시 의진님 로컬에서 성능 테스트를 하셨나요??

[ejinn1]

오ㅠㅠㅠ 이제 봤네요... 죄송해요 와우!! preconnect, dns-prefetch 설정은 처음 봤어용 혹시 의진님 로컬에서 성능 테스트를 하셨나요??

오 맞아요 배포에서 확인해보려고 일단 로컬에서 해보고 머지되면 확인해보려고 했는데 별 차이 없는거같더라구요..