캐싱 개념과 분류: 웹사이트 성능 최적화 | 원리와 활용 | 서버 측 캐시 5가지와 클라이언트 캐시

공정위 광고 문구 Ver 3.1
공정위 광고 문구 Ver 3.2(모바일 전용)

사이트 성능 최적화란 사용자에게 더 빠른 로딩 속도와 쾌적한 경험을 제공하기 위해 웹 자원과 서버 구조를 효율적으로 관리하는 작업입니다. 이를 위해 일반적으로 캐싱, 파일 최적화, 전송 최적화, 서버 최적화 네 가지 핵심 전략이 활용됩니다.

🛠️  성능 최적화
 ├── 캐시
 ├── 파일 최적화
 ├── 전송 최적화
 └── 서버 최적화

캐시를 통해 반복되는 데이터를 저장하고, 파일 최적화를 통해 CSS·JS·이미지 등의 용량을 줄이며, 전송 최적화에서는 압축과 CDN, HTTP/2 등을 활용해 데이터 전달 속도를 개선합니다. 마지막으로, Apache나 Nginx 같은 웹서버 설정을 조정하는 서버 최적화를 통해 서버의 응답 성능을 높일 수 있습니다.

Ⅰ. 캐싱이란 무엇인가?

컴퓨터에서 캐시는 일시적인 데이터를 빠르게 접근할 수 있도록 임시 저장하는 기술로, 웹에서도 동일한 원리로 작동해 성능 향상에 크게 기여합니다.

캐싱은 데이터를 저장함으로써 웹 사이트에 방문자가 접속할 때 매번 서버에서 새로 요청하지 않고, 저장된 데이터를 빠르게 불러와 페이지 로딩 시간을 단축 시킵니다. 이를 통해 서버 부하를 줄이고 사용자 경험을 개선할 수 있습니다.

웹 환경에서는 브라우저 캐시, 서버 캐시, 프록시 캐시 등 다양한 형태의 캐시가 사용되며, 각기 다른 위치와 방식으로 웹 콘텐츠를 효율적으로 제공하는 역할을 합니다.

💾 캐시
 ├── 서버  캐시
├── 사이트 캐시
    ├─ HTML 정적 파일로 변환(CSS, js )
    └─  캐시 저장 위치
        ├─ 메모리 캐시 (RAM)
        └─ 디스크 캐시 (HDD/SSD)

├── 페이지 캐시
    ├─ 전체 페이지 단위 캐싱
    ├─ PHP 실행 결과 저장
    └─ 메모리/디스크에 저장

├── HTTP 캐시
     ├─ HTTP 헤더 기반 캐시 (`Cache-Control`, `ETag`, `Expires`)
     └─ 클라이언트와 서버 사이 재사용 가능한 캐시 응답

├── 서버 캐시 (서버 소프트웨어 수준에서 제어)
     ├─ Object Cache [서버 애플리케이션 캐시]
        ├─ Memcached
        └─ Redis
     └─ Opcode Cache [PHP 실행 최적화 캐시]
         ├─ Zend OPcache
         ├─ APC (→ APCu로 대체)
         └─ Xcache

└── 프록시 캐시 [웹 캐시]
├─ 정방향 프록시 (클라이언트 )
└─ 역방향 프록시 (서버 )
├─ Varnish Cache
└─ CDN Cache (Cloudflare, Akamai )

 └── 클라이언트  캐시
      └─ 브라우저 캐시 [웹 캐시]
          ├─ HTML 파일
          ├─ 파일 최적화: CSS 파일
          ├─ JavaScript 파일
          └─ 이미지, 폰트  정적 리소스

Ⅱ. 서버 측 캐시

서버 측 캐시는 웹사이트의 서버 환경 내에서 데이터와 페이지를 임시로 저장하여, 반복되는 요청에 빠르게 응답할 수 있도록 하는 캐싱 기술을 의미합니다. 서버 자원 활용을 효율화하고, 사용자에게 더 빠른 페이지 로딩을 제공하는 데 핵심적인 역할을 합니다.

서버 캐시의 이해-Illustration-of-how-server-side-caching-works
출처: https://medium.com/@tmakhlay2/cache-me-outside-1b312e04ead6
※ 작동 방식
방문자가 웹사이트에 방문하면 웹사이트는 서버에서 데이터 검색 후 웹페이지가 캐시로 생성한 후 방문자에게 전송됩니다. 웹페이지 복사본이 생성된 후 다른 방문자가 사이트를 방문하면 이미 저장된 캐시가 웹페이지의 사본을 방문자에게 전달해서 웹사이트 로딩 속도가 빨라집니다.

1. 사이트 캐시

사이트 캐시는 서버가 웹페이지를 정적인 HTML 파일로 변환하여 저장해 두는 방식입니다. 동적인 PHP 기반 사이트라도 자주 요청되는 페이지를 미리 HTML 형태로 캐싱해 두면, 이후 요청에서는 PHP를 실행할 필요 없이 빠르게 해당 HTML을 전송할 수 있습니다.

💾 캐시
 ├── 서버  캐시
├── 사이트 캐시
    ├─ HTML 정적 파일로 변환
    └─  캐시 저장 위치
        ├─ 메모리 캐시 (RAM)
        └─ 디스크 캐시 (HDD/SSD)

저장 위치는 서버 메모리(RAM) 또는 디스크(HDD/SSD) 중 하나이며, 메모리는 속도가 빠르지만 비용이 높고 용량이 제한적이며, 디스크는 저장 용량은 넉넉하지만 상대적으로 속도가 느립니다.

2. 페이지 캐시

페이지 캐시는 전체 웹페이지의 실행 결과를 캐싱하여, 다시 같은 페이지를 요청할 때 PHP 코드 실행을 생략하고 저장된 결과를 바로 전송하는 방식입니다. 사이트 캐시와 유사하지만, 페이지 캐시는 동적 페이지 전체의 출력 결과를 저장하는 데 초점이 있습니다.

💾 캐시
 ├── 서버  캐시
├── 페이지 캐시
    ├─ 전체 페이지 단위 캐싱
    ├─ PHP 실행 결과 저장
    └─ 메모리/디스크에 저장

주로 메모리 캐시나 디스크 캐시에 저장되며, 방문자 수가 많은 웹사이트에서 서버 부하를 줄이고 응답 속도를 높이는 데 효과적입니다.

3. HTTP 캐시

HTTP 캐시는 서버와 클라이언트(또는 중간 프록시) 간의 캐시 제어를 위해 HTTP 헤더를 이용하는 방식입니다.
대표적인 헤더로는 Cache-Control, ETag, Expires 등이 있으며, 이들은 클라이언트가 응답을 재사용할 수 있도록 지침을 제공합니다.

💾 캐시
 ├── 서버  캐시
├── HTTP 캐시
     ├─ HTTP 헤더 기반 캐시 (`Cache-Control`, `ETag`, `Expires`)
     └─ 클라이언트와 서버 사이 재사용 가능한 캐시 응답

브라우저, 프록시 서버, CDN 등 다양한 위치에서 작동할 수 있으며, 서버의 설정에 따라 콘텐츠의 유효 기간이나 조건부 요청(304 Not Modified 등)이 처리됩니다.

4. 서버 캐시

  • 서버 소프트웨어 수준에서 제어

서버 캐시는 웹 서버 소프트웨어 또는 애플리케이션 수준에서 작동하는 캐시로, 크게 객체 캐시OpCode 캐시로 나뉩니다.

💾 캐시
 ├── 서버  캐시
├── 서버 캐시 (서버 소프트웨어 수준에서 제어)
     ├─ Object Cache [서버 애플리케이션 캐시]
        ├─ Memcached
        └─ Redis
     └─ Opcode Cache [PHP 실행 최적화 캐시]
         ├─ Zend OPcache
         ├─ APC (→ APCu로 대체)
         └─ Xcache
  • 객체 캐시는 DB 쿼리 결과나 내부 계산 데이터를 저장하며, Redis, Memcached 같은 인메모리 저장소를 사용합니다.
  • OpCode Cache는 PHP 코드를 미리 컴파일한 바이트코드를 저장하여, 반복 실행 시 PHP 파서를 거치지 않고 바로 실행되도록 도와줍니다. 대표적으로 Zend OPcache, APC, XCache 등이 있습니다.

이러한 캐시는 서버 내부에서만 작동하며, 웹사이트의 내부 처리 속도를 극대화하는 데 중요한 역할을 합니다.

5. 프록시 캐시 [웹 캐시]

프록시 캐시는 클라이언트 또는 서버 앞단에 위치한 중간 캐시 서버에서 작동합니다.

💾 캐시
 ├── 서버  캐시
└── 프록시 캐시 [웹 캐시]
├─ 정방향 프록시 (클라이언트 )
└─ 역방향 프록시 (서버 )
├─ Varnish Cache
└─ CDN Cache (Cloudflare, Akamai )

원본 서버와 협력하며 파일, 이미지, 웹페이지와 같은 웹사이트 데이터를 캐시하며, 정방향 프록시는 주로 기업 내 네트워크 환경에서 클라이언트 앞단에 설치되어 외부 웹 콘텐츠를 캐싱합니다. 역방향 프록시는 서버 앞단에 위치하여 외부 요청에 대한 서버 응답을 대신 캐싱합니다.

대표적인 역방향 프록시로는 Varnish Cache가 있으며, 전 세계적으로 사용하는 CDN 서비스(Bunny CDN, Akamai 등)도 프록시 캐시 구조를 따릅니다. 이 방식은 지리적으로 분산 된 사용자에게도 빠른 응답을 제공하며, 서버 부하를 획기적으로 줄일 수 있습니다.

프록시 서버(Proxy Server)

🔲 서버 측 캐싱 vs 서버 캐시

  • 서버 측 캐싱
  • 서버에서 작동하는 모든 종류의 캐시 전략과 기술을 포괄하는 상위 개념입니다.
    즉, 서버에서 리소스를 더 빠르게 제공하기 위해 적용하는 캐싱 방식 전반을 뜻합니다.
  • 서버 캐시
  • 서버 측 캐싱의 하위 개념으로 분류되며, 실제 캐시 저장소나 특정 캐시 유형을 가리킵니다.
  • 예: 오브젝트 캐시, Opcode 캐시 등이 모두 서버 캐시에 포함될 수 있습니다.

구분

캐싱 유형

설명 & 주요 저장 파일

사이트 캐시

서버 측 캐싱

· 웹페이지(HTML) 안에 포함된 콘텐츠(텍스트, 이미지 경로 등)를 정적 HTML 형태로 저장
· 이후 요청 시 PHP 실행 없이 바로 응답.

페이지 캐시

서버 측 캐싱

전체 웹페이지의 실행 결과를 저장. 동적 페이지 전체 출력 결과를 재사용.

HTTP 캐시

서버 측 /클라이언트

HTTP 헤더를 기반으로 브라우저, CDN, 프록시 등에서 응답을 재사용.

서버 캐시

서버 측 캐싱

DB 쿼리 결과, 내부 계산 데이터(Object Cache), PHP 바이트코드(OpCode Cache) 등 서버 내부 처리 속도 향상을 위한 캐시

프록시 캐시

서버 측 캐싱

· 클라이언트와 서버 사이의 중간 서버에서 응답 캐싱. 정방향/역방향으로 구분.
· CSS 스타일시트, JavaScript 스크립트, 이미지

Ⅲ. 클라이언트 측 캐시

  • Client-side Cache는 브라우저 캐시로도 불리는 웹 캐시
💾 캐시
 └── 클라이언트  캐시
      └─ 브라우저 캐시 [웹 캐시]
          ├─ HTML 파일
          ├─ 파일 최적화: CSS 파일
          ├─ JavaScript 파일
          └─ 이미지, 폰트  정적 리소스

클라이언트 측 캐시는 브라우저 캐시라고도 하며, 사용자의 웹 브라우저 내에 저장되는 임시 데이터입니다. HTML, CSS, JavaScript, 이미지, 폰트 등 웹페이지를 구성하는 다양한 정적 리소스를 저장하여, 동일한 자원에 대한 반복 요청 시 빠르게 로딩할 수 있도록 돕습니다.

클라이언트 측 캐싱

클라이언트 측 캐싱은 보통 정적인 자원(HTML, CSS, JS, 이미지 등)을 저장하는 데 집중하지만, 동적인 콘텐츠도 조건에 따라 캐싱할 수 있습니다. 예를 들어, AJAX 요청 결과나 API 응답을 로컬 스토리지나 세션 스토리지에 저장해 다시 불러오는 방식도 클라이언트 캐싱의 일종입니다.

ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액(이벤트 할인 시 금액이 내려갑니다↓)은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.

Similar Posts

  • DOMContentLoaded vs Load: 웹 속도와 SEO에 미치는 영향

    크롬 개발자도구에서 네트워크 탭의 속도 테스트를 진행할 때 표시되는 항목 중 DOMContentLoaded와 로드 두 가지 항목을 확인할 수 있습니다. 웹사이트의 속도를 측정할 때 이 두 이벤트는 단순한 수치가 아니라, 실제 사용자 경험과 SEO 평가에 직결되는 중요한 지표입니다. 특히 Google은 웹사이트의 초기 로딩 속도, 상호작용 가능 시점, 전체 페이지 로딩 완료 시점 등을 기준으로…

  • 페이오니아: 가입, 수취 계좌 등록, 현지 은행 계좌 연결 방법(데스크탑)

    페이오니아는 미국에 본사를 둔 글로벌 금융 서비스 기업으로, 주된 목적은 국제 온라인 송금, 글로벌 결제 처리, 프리랜서·기업을 위한 현지 통화 계좌 제공입니다. 예를 들어 아마존 어소시에이트 등을 할 때 연동이 필요한 경우 페이오니아를 사용할 수 있습니다. 해외 클라이언트로부터 대금을 받을 때, 혹은 글로벌 플랫폼(예: 아마존, 업워크, 피버 등)의 수익금을 인출할 때 페이오니아는 합리적인…

  • 웹 성능 최적화: 구조와 정의

    사용자 경험(UX), 검색 엔진 최적화(SEO), 전환율, 그리고 사이트 유지 비용까지 – 웹 성능은 단순히 ‘사이트 속도 향상’이 아닌 적용된 이후의 여러가지 효과에 복합적인 영향을 주는 핵심 요소입니다. 일반 웹사이트 그리고 워드프레스와 같이 다양한 테마와 플러그인이 공존하는 환경에서는, 성능 저하의 원인을 파악하고 그에 맞는 최적화 기법을 적용하는 것이 필수입니다. 이 글은 웹 성능 최적화를…

  • 구글 CCPA 및 GDPR 메시지 확인 테스트

    구글의 GDPR과 CCPA 설정을 한 후에 메시지가 나오는지 궁금할 수 있습니다. “구글의 CCPA 및 GDPR 메시지 확인을 진행할 수 있는 방법이 있는가?” 라는 의문으로 시작하여 2가지 메시지를 직접 확인해 보기로 했습니다. 유럽 규정 메시지에 대한 정보에서 확인 했을 때는 두 개의 버튼(옵션 관리, 동의)이 있는 유럽 규정 메시지가 나온다는 내용을 확인하였으며 아래와 같은…

  • 크롬 개발자 도구 정의와 목적 5가지

    크롬 개발자 도구란 웹 개발자와 디자이너가 웹사이트의 코드 구조, 성능, 반응형 디자인, 보안, SEO 품질을 점검·개선하기 위해 사용하는 크롬 브라우저 내장 기능입니다. 페이지 속도 측정, 디버깅, 네트워크·리소스 분석 등 웹사이트 품질을 높이는 모든 과정을 한 곳에서 수행할 수 있습니다. Ⅰ. 크롬 개발자 도구의 목적 크롬 개발자도구는 단순한 코드 확인 도구가 아니라, 웹사이트의 품질…

  • SEO: 검색 의도(Search Intent) 및 4가지 분류

    구글을 포함한 검색 엔진에서 검색 의도(Search Intent)는 사용자 의도(User Intent)로도 불리며, 사용자가 검색 엔진에서 검색어를 입력할 때 갖는 주요 목표입니다. 일반적으로 4가지 유형이 포함됩니다. 검색 의도의 4가지 분류 사용자 의도는 4가지로 분류되며, 다음과 같습니다. 1. 상업적 의도 사용자가 구글링을 통해 서비스를 구매하려고 하지만 아직 제품을 구매하기 전입니다. ‘고양이 사료 비교’등과 같이 사전 조사가…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Prove your humanity: 10   +   5   =