웹 애플리케이션 성능 최적화 👍
1️⃣ 코드 스플리팅
코드 스플리팅을 통해서 자바스크립트 파일을 필요한 부분만 나눠서 로드할 수 있다.
➡️ 페이지 로딩 속도 개선 가능‼️
2️⃣ 레이지 로딩 기법
페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드할 수 있다.
ex) 페이지 스크롤 시 하단의 이미지가 필요해지면 그때 이미지를 불러온다.
➡️ 리소스 로딩을 줄여 성능 향상 가능‼️
3️⃣ 이미지 파일의 물리적 크기 줄이기 & WebP 포맷으로 변환
이미지 파일의 물리적인 크기를 줄이거나 WebP와 같은 가벼운 포맷으로 변환할 수 있다.
➡️ 용량 감소, 로딩 속도 향상 가능‼️
4️⃣ 캐싱 활용
캐싱을 통해 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용할 수 있다.
➡️ 성능 향상 가능‼️ But 적절한 캐시 정책 설정 중요‼️
5️⃣ 비동기 로딩(async) & 지연 로딩(defer)
자바스크립트가 DOM을 차단하지 않도록 하면서 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬로 불러오거나, 적절한 타이밍에 로드하게 할 수 있다.
➡️ 사용자 경험이 쾌적해 질 수 있음‼️
