프론트엔드 성능 최적화 기법

이미지 최적화

이미지는 웹 페이지에서 많은 용량을 차지하기 때문에 최적화를 통해 페이지 로딩 속도를 크게 향상 시킬 수 있음

 

- 이미지 크기 축소

- 이미지 포맷 최적화 (JPEG, PNG, Webp 중 가장 적합한 포맷을 선택)

- 이미지 압축

 

 

 

코드 압축과 번들링

코드 압축은 코드의 크기를 줄여 로딩 속도를 빠르게 개선해줌

번들링은 여러 개의 파일을 하나로 합쳐 로딩 속도를 빠르게 해줌

 

- 불필요한 공백과 주석 제거

- 변수와 함수 이름 축약

 

 

 

캐싱

- 브라우저 캐싱 (자주 사용되는 리소스를 브라우저에 저장)

- 서버 캐싱

- CDN (Content Delivery Network) 캐싱 (분산된 서버에 저장)

 

 

 

비동기 로딩과 지연 로딩

비동기 로딩을 사용하면 리소스를 가져올때 페이지 로딩을 방해하지 않고 페이지 로딩과 동시에 리소스를 가져올 수 있음

지연 로딩을 사용하면 필요한 시점에만 리소스를 로드하여 초기 로딩 속도를 빠르게 할 수 있음

 

- 스크립트 태그에 async 추가

- 이미지 태그에 loading="lazy" 속성 추가하여 지연 로딩

- Intersection observer API 사용 (요소가 부 포트에 들어올때만 로딩)

 

 

 

 

 

 

Reference

프론트엔드 성능 최적화 기법