웹 애플리케이션의 성능을 최적화할 수 있는 방법
웹 서비스를 만들다 보면 “아… 왜 이렇게 느리지?” 싶은 순간이 온다.
사실 요즘 프론트엔드 환경은 점점 복잡해지고 있고, 번들 크기, 이미지 용량, 불필요한 스크립트 같은 요소들이 로딩 속도를 잡아먹기 때문이다. 본 글에서는 웹 성능을 향상시키기 위해 널리 사용되는 주요 기법들을 정리해보고자 한다.
👉 코드 스플리팅(Code Splitting): 필요한 것만 먼저 불러오기
웹팩(Webpack), Vite, Next.js 등과 같은 빌드 도구는 기본적으로 모든 JS 파일을 하나의 번들로 묶어 한번에 로드한다. 그런데 지금 당장 안 보는 페이지의 코드까지 전부 불러오니까, 첫 화면이 느릴 수밖에 없다.
그래서 등장한 게 바로 코드 스플리팅.
- 라우트 단위로 분리하거나
- 특정 기능을 사용할 때만 동적으로 import 하거나
이런 식으로 “지금 필요한 코드만” 먼저 불러온다.
이 방식은 초기 페이지 렌더링 속도를 크게 개선하며, 전체적인 사용자 경험을 향상시키는 효과가 있다.
👉 레이지 로딩(Lazy Loading): 안 보이면 로드하지 않는다
이미지, 비디오처럼 무거운 리소스는 사실 화면에 보이기 전까지 로드할 필요가 없다.
- 특정 요소가 화면(viewport)에 진입할 때 로딩을 시작
- 보이지 않는 요소는 네트워크 요청조차 발생시키지 않음
이러한 점진적 로딩 방식은 초기 로딩 시 불필요한 리소스 낭비를 줄여 각종 페이지 성능을 개선하는 데 매우 효과적이다.
👉 이미지 최적화: 파일 용량 감소를 통한 빠른 로딩
아무리 코드 최적화를 잘 해도, 이미지 용량이 커버리면 로딩 속도는 답이 없다. 미세한 코드 최적화보다 이미지 용량을 줄이는 것이 체감 성능에 더 큰 영향을 미치기도 한다.
대표적으로는:
- 이미지 리사이징 (필요한 크기만 사용)
- WebP, AVIF 등 최신 이미지 포맷 사용
- 이미지 압축 (TinyPNG 같은 서비스 활용)
특히 WebP는 JPG 대비 훨씬 가볍고 품질도 좋기 때문에 요즘 거의 기본 옵션처럼 쓰인다.
👉 캐싱(Caching): 한 번 받은 건 다시 받지 말자
캐싱은 성능 최적화에서 빼놓을 수 없는 핵심 기법이다.
한 번 로드된 리소스를 재활용할 수 있도록 적절한 캐시 정책을 설정하면, 동일한 자원을 다시 다운로드하지 않고도 빠르게 접근할 수 있다.
방법은 크게 세 가지:
- 브라우저 캐시 (Cache-Control, ETag 등)
- Service Worker 기반 PWA 캐싱
- CDN 캐싱
패키지 구조가 자주 바뀌는 SPA라면 파일 이름에 해시를 넣어서 변경된 파일만 새로 다운로드하도록 하는 게 효율적인 브라우저 캐싱을 구현하는 데 도움 된다.
👉 async / defer: 자바스크립트 때문에 DOM이 멈추는 걸 막자
HTML 문서에서 <script> 태그는 DOM 파싱을 중단시킨다는 특성이 있다.
그래서 큰 JS 파일을 <script>로 막 넣어버리면 페이지 표시가 늦어진다.
그래서 사용하는 방식이 바로:
🔹 async
- 스크립트를 비동기적으로 다운로드
- 다운로드 완료 시 즉시 실행
- 실행 순서가 중요하지 않은 스크립트에 적합합
🔹 defer
- HTML 파싱이 끝난 후 스크립트 실행
- 스크립트 실행 순서 보장
- 대부분의 상황에서 가장 안정적으로 사용 가능
웹 애플리케이션 성능 최적화는 단순히 로딩 속도를 높이기 위한 작업이 아니다.
이는 사용자 경험을 향상시키고, 서비스 품질을 높이며, 더 나아가 전환율까지 높이는 전략적 요소이다.