3-tier 웹서비스에서 웹 페이지가 느린 경우 개선 방법

Presentation 계층 개선

이미지, CSS, JavaScript 최적화

이미지를 압축하고, 적절한 포맷(WebP 등)을 사용한다.

WebP란? : gif, jpg, png 포맷을 대체하기 위해 구글에서 개발한 이미지 포맷으로, 이미지 품일이 같을 때 WebP 파일의 크기가 다른 포맷의 파일에 비해 훨씬 작다.

CSS, JavaScript 파일을 최소화(minify) 및 합쳐서 요청 수를 줄인다. 혹은 필요한 페이지에서만 JavaScript를 로딩하는 Lazy Loading을 적용한다.

Lazy Loading 이란? : 사용자 화면에 당장 보여지지 않거나 아직 유저의 인터렉션이 일어나지 않은 특정 리소스를 필요할 때 로드하는 기법

브라우저 캐시

자주 사용되는 리소스(이미지, CSS 등)를 브라우저에 캐싱하여 재요청을 줄인다.

브라우저 캐시란? : 브라우저나 HTTP 요청을 하는 클라이언트 애플리케이션에 의해 내부 디스크에 의해 이루어지는 캐시이며, http 캐시라고도 불린다. 이러한 캐시는 단일 사용자를 대상으로 하는 private cache 이며, 해당 사용자의 정보만을 저장한다. 브라우저에서 캐싱을 처리하는 속성 중 대표적인 것은 ETag, Cache-Contorl이 있다.

콘텐츠 전달 네트워크(CDN) 사용

전 세계적으로 분산된 서버에서 정적 리소스를 제공함으로써 사용자의 지리적 위치에 따라 빠른 로딩 속도를 제공한다. CDN은 각 지역의 엔드 유저에 따라 요청을 오리진 서버가 아닌 다른 서버로 가도록 분산시키는 역할을 하는데, 이 과정에서 캐싱이 사용된다. 최초 한 번은 오리진 서버에 반드시 갔다 와야 하므로 느릴 수 있지만, 그 다음부터는 CDN을 통해 빠르게 해당 콘텐츠를 내려받을 수 있다.

Business Logic 계층 개선

코드 최적화

비효율적인 알고리즘이나 중복 코드를 제거하여 로직 실행 시간을 줄인다.

비동기 처리

사용자가 기다릴 필요가 없는 작업(ex. 이메일발송, 로그 저장 등)은 비동기 처리로 전환하여 응답 속도를 개선한다.

로드 밸런싱

여러 서버로 트래픽을 분산시켜 부하를 줄인다.

API 호출 최적화

불필요한 API 호출을 줄이거나, 병렬 호출을 통해 응답 속도를 높인다.

Data 계층 개선

쿼리 최적화

데이터베이스 쿼리에서 인덱스를 사용하고, 불필요한 데이터 조회를 피하는 방식으로 쿼리 성능을 개선한다.

캐싱 사용

Redis, Memcached 같은 캐시 시스템을 사용하여 자주 조회되는 데이터를 메모리에 저장하고, 데이터베이스 호출을 줄인다.

데이터베이스 스케일링

데이터베이스의 수직/수평적 스케일링을 통해 더 많은 트래픽을 처리할 수 있도록 확장한다.

그 외 전반적인 최적화 방안

HTTP/2 및 압축 사용

HTTP/2를 사용하여 멀티플렉싱을 지원하고, GZIP이나 Brotli 압축을 통해 전송 데이터 크기를 줄인다.

멀티플렉싱이란? : HTTP/1.1은 리소스를 차례로 로드하므로 한 리소스를 로드할 수 없는 경우 그 뒤에 있는 다른 모든 리소스가 차단된다. 이와는 대조적으로, HTTP/2는 단일 TCP 연결을 사용하여 한 번에 여러 데이터 스트림을 보낼 수 있으므로 한 리소스 때문에 다른 리소스가 차단되지 않는다. HTTP/2는 데이터를 이진 코드 메시지로 분할하고 클라이언트가 각 이진 메시지가 속한 스트림을 알 수 있도록 이러한 메시지에 번호를 매겨 이를 수행한다.

프로파일링 및 모니터링

서비스 전반의 성능을 모니터링하고 병목 구간을 찾아낸다. APM(Application Performance Mornitoring)도구 (whatap 등)를 통해 성능을 분석한다.

TLS/SSL 최적화

HTTPS 프로토콜을 사용하는 경우, TLS/SSL 설정을 최적화하여 핸드셰이크 시간을 줄인다.