웹 애플리케이션의 성능을 최적화 할 수 있는 방법(+ 레이지 로딩)

 

웹 애플리케이션 성능 최적화에는 여러 가지 방법이 있습니다.

 

우선, 코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.

또한, 레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 있습니다.

 

이미지에 대해서는 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법이 있습니다. 이를 통해 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다.

또한, 캐싱을 활용하면, 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능을 크게 향상시킬 수 있습니다. 적절한 캐시 정책을 설정하는 것이 매우 중요합니다.

자바스크립트 로딩 시에는 비동기 로딩(async) 이나 지연 로딩(defer) 을 적용하여 자바스크립트가 DOM을 차단하지 않도록 할 수 있습니다. 이를 통해 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬로 불러오거나, 적절한 타이밍에 로드하게 되어 사용자 경험이 더 쾌적해질 수 있습니다.

 

출처 - 매일메일