앱 성능 저하의 숨겨진 원인 4가지: 사소한 실수들이 당신의 앱을 느리게 만든다!
커스텀 헤더(Custom Header) 사용으로 인해 불필요한 프리플라이트 요청(Preflight Request)이 발생하여 API 호출 지연(API Call Delay)을 유발
코드 스플리팅(Code Splitting) 적용에도 불구하고, 거대한 공유 모듈(Shared Module)로 인해 초기 로딩 속도(Initial Loading Speed)가 개선되지 않음
불필요한 런타임 의존성(Runtime Dependency) 과다 사용으로 인해 번들 사이즈(Bundle Size) 증가 및 로딩 시간(Loading Time) 증가
거대한 백그라운드 이미지(Background Image) 사용으로 인해 LCP(Largest Contentful Paint) 성능 저하 발생
CORS 프리플라이트(Preflight) 요청의 숨겨진 함정
본문에서는 커스텀 헤더(Custom Header) 사용 시 발생하는 CORS 프리플라이트(Preflight) 요청으로 인해 API 호출(API Call) 지연이 발생할 수 있음을 지적한다.
문제점: PUT, DELETE와 같은 비-단순(Non-simple) 요청 또는 커스텀 헤더 사용 시 브라우저가 OPTIONS 요청을 먼저 보내 추가적인 네트워크 호출(Network Call) 발생
원인: CORS(Cross-Origin Resource Sharing) 정책에 따라 브라우저가 안전성을 위해 사전 검증 요청을 수행
해결책: 프론트엔드(Frontend) 로직에만 사용되는 커스텀 헤더 대신 쿼리 파라미터(Query Parameter), 쿠키(Cookie), 로컬 상태(Local State) 활용
결과적으로 불필요한 헤더 사용을 줄여 초기 로딩 속도(Initial Loading Speed) 개선을 기대할 수 있다.
코드 스플리팅(Code Splitting) 무용론: 번들 분석의 중요성
글에서는 코드 스플리팅(Code Splitting) 적용에도 불구하고, 거대한 공유 모듈(Shared Module) 사용으로 인해 번들(Bundle) 사이즈가 줄어들지 않는 문제를 지적한다.
문제점: 모듈 분리(Module Separation)가 제대로 이루어지지 않아 초기 로딩 시 불필요한 코드까지 다운로드
원인: 모든 곳에서 import되는 거대한 공유 모듈(Shared Module)로 인해 코드 스플리팅의 효과가 상쇄
해결책: webpack-bundle-analyzer, source-map-explorer와 같은 도구를 활용하여 번들 분석(Bundle Analysis)을 수행하고, 불필요한 의존성 제거
결론적으로 코드 스플리팅(Code Splitting) 적용 여부와 관계없이, 번들 사이즈(Bundle Size)를 지속적으로 관리해야 한다.
불필요한 의존성(Dependency) 관리의 중요성
본문에서는 프로젝트 내 과도한 런타임 의존성(Runtime Dependency) 사용이 성능 저하의 원인이 될 수 있다고 지적한다.
문제점: 다수의 분석 SDK, 날짜 라이브러리, Lodash 전체 임포트 등으로 인해 번들 사이즈(Bundle Size) 증가
원인: 개발자들이 무분별하게 npm 패키지(npm Package)를 설치하고, 트리 쉐이킹(Tree Shaking)의 한계
해결책: 새로운 의존성(Dependency) 추가 시 신중한 검토 및 Lodash의 개별 함수 임포트
결과적으로 불필요한 의존성(Dependency) 제거를 통해 번들 사이즈(Bundle Size)를 줄이고, 로딩 속도(Loading Speed)를 개선할 수 있다.
거대한 이미지(Image) 사용의 위험성
글에서는 큰 백그라운드 이미지(Background Image) 사용이 LCP(Largest Contentful Paint) 성능 저하를 유발한다고 설명한다.
문제점: 초기 로딩 시 거대한 이미지(Image) 다운로드로 인해 사용자 체감 성능 저하
원인: 개발 환경에서는 문제없이 보이지만, 느린 네트워크 환경(Slow Network Environment)에서 성능 저하 발생
해결책: AVIF, WebP 사용, 이미지 압축, Lazy Loading, Preload 등 다양한 최적화 기법 적용
결론적으로 최적화되지 않은 이미지(Image) 사용은 사용자 경험(User Experience)을 해치는 주요 원인이 될 수 있다.
