[매일메일] 웹 애플리케이션의 성능을 최적화할 수 있는 방법

코드 스플리팅을 통해 자바 스크립트의 파일을 필요한 부분만 나누어 로드

이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분 먼저 로드하여 페이지 로드 속도를 개선할 수 있습니다.

 

레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식으로  적용

예를 들어, 사용자가 페이지를 스크롤할 때 하단에 이미지가 필요해지면 그때 이미지를 불러오는 것으로 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다.

 

 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법

이를 통해 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다. 예를 들어 이미지, 비디오, JS, CSS 파일의 물리적인 용량을 줄이는 것을 말합니다.

 

캐싱을 활용하여, 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능 향상

적절한 캐시 정책을 설정하는것이 매우 중요합니다.

 

로딩시에는 비동기 로딩(async) 이나 지연 로딩(defer) 을 적용하여 자바스크립트가 DOM을 차단하지 않도록 할 수 있습니다

이를 통해 페이지가 로딩되는 동안 자바스크립트 파일을 병렬로 불러오거나, 적절한 타이밍에 로드되어 사용자 경험이 쾌적해질 수 있습니다.