Web 서비스 속도개선

오늘은 web 서비스 속도 개선을 위해 실무에서 어떤일들을 할 수 있는지 경험에 기반해서 작성해보고자 합니다. 

 

1. 사이즈가 큰 이미지 체크하기

웹 서비스 속도를 가장 쉽게 개선할 수 있는 방법 중 하나는 이미지 최적화입니다.

브라우저의 캐시를 무효화하기 위해 강제 새로고침을 한 후, 개발자 도구의 네트워크 탭에서 img 필터를 적용하고 크기(size) 기준 내림차순 정렬을 해보세요.

만약 1MB 이상의 이미지가 있다면,

• 해당 이미지가 정말 필요한지
• 용량을 줄일 수 있는지

확인해보는 것이 좋습니다.

실제 프로젝트에서도 2MB 이상의 이미지를 발견하고 최적화한 경험이 있습니다.
이미지 압축이 필요하다면, 아래 사이트를 활용해보세요.

👉 TinyPNG

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

 

 

2. CDN 설정

CDN(Content Delivery Network)을 사용하고 있나요?
CDN은 이미지 및 정적 리소스를 사용자와 가까운 서버에서 제공하여 로딩 시간을 단축하는 데 도움을 줍니다.

📌 CDN 사용 여부 확인하는 방법

1. 개발자 도구(DevTools) → 네트워크 탭을 엽니다.
2. img 또는 js/css 같은 정적 리소스를 필터링합니다.
3. 도메인 확인 → cloudfront.net, akamai.net, fastly.net 등 CDN 제공업체 도메인이 포함되어 있는지 확인합니다.

만약 CDN이 적용되지 않았다면, 이미지와 정적 리소스를 CDN으로 서빙하도록 설정하는 것이 좋습니다.

 

🚀 이미지 및 정적 리소스 CDN 설정 방법

• AWS CloudFront 사용 예시
  1. S3 버킷을 오리진(Origin)으로 설정
  2. CloudFront 배포 생성
  3. 도메인 연결 및 캐시 정책 설정
  4. 웹 서비스에서 기존 URL을 CloudFront 도메인으로 변경

이외에도 Akamai, Fastly, Cloudflare 등의 CDN을 활용할 수 있습니다.
CDN을 적용하면 웹 페이지 속도 향상뿐만 아니라 트래픽 비용 절감과 보안 강화 효과도 기대할 수 있습니다. 

 

3. 이미지 캐시 헤더 설정

이미지 로딩 속도를 최적화하려면 캐시 헤더(Cache-Control, ETag 등) 설정이 중요합니다.
적절한 캐시 정책을 설정하면 불필요한 네트워크 요청을 줄이고 페이지 로딩 속도를 개선할 수 있습니다.

📌 대표적인 캐시 헤더 종류

헤더설명

Cache-Control	브라우저 및 CDN에서 리소스를 캐싱하는 방법을 지정
Expires	캐시 만료 날짜를 지정 (HTTP/1.0)
ETag	리소스 변경 여부를 식별하는 고유 값 제공
Last-Modified	리소스의 마지막 수정 날짜를 전달

🚀 이미지 캐시 헤더 설정 예시

• S3 + CloudFront 설정 (CDN 환경)
• 1년(31536000초) 동안 캐시 유지, 변경되지 않는 리소스(immutable)로 인식

Cache-Control: public, max-age=31536000, immutable

⚠️ 주의할 점

1. 자주 변경되는 리소스는 캐시 기간을 짧게 설정 (max-age=3600 등)
2. 파일명을 변경하여 배포(캐시 무효화) → image-v2.png 같은 버전 관리 방식 활용
3. ETag & Last-Modified 활용 → 불필요한 데이터 다운로드 방지

CDN과 적절한 캐시 정책을 함께 사용하면 트래픽 절감 + 로딩 속도 개선 효과를 극대화할 수 있습니다. 

 

4. 불필요한 API 요청 줄이기

API 성능을 최적화하려면 불필요한 API 요청을 줄이는 것이 중요합니다.
현재 API에서 필요한 데이터만 내려주는지, 중복 호출이 발생하지 않는지 점검해보세요.

🔍 점검해야 할 주요 사항

✅ 필요한 데이터만 응답하고 있는가?
✅ 한 화면에서 동일한 API가 중복 호출되고 있지는 않은가?

---

🚀 실제 경험 기반 최적화 사례

💡 📊 API 호출 빈도 분석 후 최적화

• 특정 기능의 사용률에 비해 API 호출 횟수가 과도하게 많음을 확인
• Redash & GCP 로그 분석을 통해
  • 피처 사용 빈도 대비 API 호출 횟수 확인
  • 화면 진입 시점에서 불필요한 API 호출 제거 정책 적용

tip: gcp > 모니터링 > 대시보드 에서 request count 를 api 별로 확인가능합니다. 

💡 🌍 글로벌 서비스 네트워크 최적화

• 특정 지역(예: 네트워크 속도가 느린 국가)에서 API 응답 속도 문제 발생
• API를 2개 → 1개로 통합하여 응답 횟수를 줄임
  • 예: api/user와 api/user/settings를 api/user?include=settings 형태로 통합

💡 📌 클라이언트 측 최적화

• React Query, SWR, Apollo Client 같은 데이터 패칭 라이브러리 활용
  • 중복 호출 방지 & 캐싱 적용

 

성능 개선을 위해 더 다양한 일들을 많이 할 수 있지만, 오늘은 제가 실무에서 실제로 행한 일들을 바탕으로 간단히 적어보았습니다. 

초안을 작성하고 gcp 에게 다듬어달라고했더니.. 표도 만들어줘서 더 가독성이 좋아진 듯 하네요!

 

이전 회사에서 인사팀 요청으로 작성한 angular lazy-loading 관련한 포스팅도 있으니 관심있으신 분은 참고 부탁드려요. 감사합니다. 

https://dragon-developer.tistory.com/48

Angular 서비스 속도개선 : lazy-loading