[TIL] 프론트엔드 성능 최적화

성능 최적화 방법:
코드 스플리팅: 큰 자바스크립트 번들을 작은 청크로 분리하여 필요한 부분만 로드합니다

이미지 최적화: 이미지를 압축하거나 lazy loading을 사용하여 로딩 시간을 줄입니다

CDN 사용: 콘텐츠를 빠르게 전달하기 위해 콘텐츠 전송 네트워크(CDN)를 사용합니다

캐싱 전략: 브라우저 캐싱을 활용하여 재방문 시에 빠르게 페이지를 로드합니다

비동기 로딩: async나 defer 속성을 사용하여 비동기 스크립트 로딩을 가능하게 합니다

서버 사이드 렌더링 (SSR) 또는 사전 렌더링: 초기 페이지 로드 속도를 향상시키기 위해 사용합니다

웹 워커 사용: 복잡한 연산을 백그라운드에서 처리하여 메인 스레드를 블로킹하지 않습니다

프로젝트에서 활용한 경험:
이미지 최적화: imageCompression으로 압축하고 리사이징을 적용했습니다

CDN 사용: AWS CloudFront를 사용하여 전세계적으로 빠르게 콘텐츠를 제공하였습니다
이를 통해 페이지 로드 시간이 대폭 줄었습니다

비동기 로딩: async await을 활용하여 Kakao Maps API와 같은 외부 라이브러리를 비동기로 로드하여 초기 페이지 렌더링 시간을 최적화했습니다

이러한 방법들을 통해 프로젝트의 프론트엔드 성능을 신경 쓰면서 개발을 진행했습니다
최적화를 통해 페이지 로드 시간이 줄어들고, 사용자 경험이 향상되는 것을 명확하게 느낄 수 있었습니다