자바스크립트 성능 이야기, 웹 사이트 최적화

최근 들어 자바스크립트 성능 최적화에 대한 공부에 흥미가 생겨 관련 자료를 찾고 있었다.

그러던 중, 도서관에서 자바스크립트 성능 관련 책을 우연히 발견하게 되었고, 책 제목은 <자바스크립트 성능 이야기> 이다.

책의 목차를 넘겨보니 요즘 내가 고민하던 것들이 담겨 있었다.

'웹 사이트 최적화', '렌더링', ' 성능을 높이는 코드 스타일 ' 같은 주제들이 내가 공부하고 싶었던 부분과 딱 맞아떨어졌다.

2012년에 나온 오래된 책이지만, 기본기를 다지기엔 좋지 않을까 싶어 천천히 읽기 시작했다.

이 책을 통해 성능 최적화라는 큰 주제를 더 깊이 이해하고 싶다. 그냥 단순히 코드 한 줄을 줄이는 걸 넘어서, 브라우저가 코드를 어떻게 처리하는지, 그리고 사용자에게 더 나은 경험을 제공할 방법을 알고 싶다.

읽으며 배운 내용을 차근차근 내 글로 정리하면서 이해를 다지고 실무에 적용해볼 예정이다.

---

브라우저의 단계별 요청 처리 과정

우선 웹 페이지의 성능을 최적화하려면 브라우저가 페이지를 처리하는 방식부터 이해해야 한다는 내용을 읽었다.

브라우저가 사용자 요청을 처리하는 단계는 크게 다섯 단계로 나뉘며, 각 단계마다 성능을 개선할 포인트가 있다고 한다.

간단히 정리해 보면 다음과 같다.

 

1. 서비스 이동 단계

• 브라우저가 메모리 해제를 통해 리소스를 관리.
• 성능 저하를 방지하려면 이벤트 리스너 해제 및 불필요한 객체 삭제로 메모리 누수를 방지해야 함.
• SPA(Single Page Application)에서는 라우트 변경 시 메모리 관리가 더욱 중요.

2. 리다이렉트 단계

• 리다이렉트는 요청-응답 사이에 추가적인 대기 시간을 초래하므로 가능한 피해야 함.
• 서버에서 리다이렉트를 처리하는 것이 사용자 경험(UX) 향상에 유리.
• 최신 개발 환경에서는 초기 설정이 잘 된 **CDN(Content Delivery Network)**을 활용해 리다이렉트를 최소화.

3. 애플리케이션 캐시 확인 단계

• Cache-Control과 max-age를 활용해 브라우저 캐시를 세밀히 제어.
• 변경된 파일만 요청하기 위해 ETag와 If-Modified-Since 사용.
• Service Worker를 사용한 최신 캐싱 전략(PWA 기술)을 적용하면 오프라인 접근성과 성능을 동시에 개선 가능함.

4. 네트워크 통신 단계

• HTTP/2 및 HTTP/3를 사용하여 다중 연결 및 낮은 대기 시간 제공.
• 리소스는 병렬 다운로드를 통해 네트워크 대역폭을 효율적으로 사용.
• 요청 헤더를 최적화하고 쿠키 크기를 줄여 네트워크 부하 감소.
• 리소스 압축(Gzip, Brotli)을 통해 파일 크기 줄이기.

5. 브라우저 처리 단계

• HTML, 이미지, 스타일시트를 받아 화면을 구성하는 단계에서 DOMContentLoaded 이벤트를 활용해 사용자에게 빠르게 콘텐츠 제공.
• 초기 화면 구성 시 필요한 최소 리소스만 로드하여 첫 번째 의미 있는 페인트(FMP)를 앞당김.

---

기본적인 웹 성능 최적화 방법 정리

HTTP 요청 최소화

• CSS 스프라이트 기법으로 여러 이미지를 하나의 파일로 통합.
• 필요 없는 리소스를 제거하고 요청 수 줄이기.
• JavaScript와 CSS를 통합하고 CDN으로 제공.

파일 크기 최소화

• 모듈 번들러(Webpack, Vite)를 사용해 코드 압축 및 정리.
• 사용하지 않는 코드 제거(Tree Shaking)와 Dead Code Elimination 적용.
• CSS와 JavaScript를 Gzip 또는 Brotli로 압축해 전송.

쿠키 크기 최소화

• 비필수 데이터는 쿠키에 포함하지 않고 세션 스토리지 또는 로컬 스토리지 활용.
• 쿠키 사용 시 Secure 및 SameSite 옵션으로 보안 및 효율성 강화.

렌더링 성능 향상

• HTML 파싱 및 DOM 트리 구성 → CSSOM 트리 결합 → 렌더 트리 생성 → 레이아웃 → 페인트 단계 최적화.
• 불필요한 스타일 규칙 제거 및 중복 CSS 파일 방지.
• 초기 렌더링에 필요한 리소스만 포함(Critical CSS).

마크업 최적화

• DOM 트리 간소화:
  • <table> 대신 <div> 기반 레이아웃 사용.
  • 중첩된 태그를 줄여 성능 부담 감소.