캐싱 개념과 분류: 웹사이트 성능 최적화 | 원리와 활용 | 서버 측 캐시 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

  • [WP] 워드프레스 블록에디터 개요 및 구텐베르크

    워드프레스를 시작하게 되면 워드프레스 블록에디터인 구텐베르크(Gutenberg) 편집기란 단어를 접하게 됩니다. 예전 워드프레스 편집기는 클래식 편집기를 사용했지만 보다 직관적인 웹 구축 경험을 위해 Gutenberg 편집기로 대체되었습니다. 워드프레스 블록에디터: 구텐베르크란? Gutenberg란 Wordpress 플랫폼의 블록 기반 편집기입니다. 워드프레스 5.0으로 업데이트 되면서 구텐베르크라는 에디터가 기본 편집기로 변경되고 기존 클래식 편집기를 그대로 사용하는 유저가 적응하지 못하고 클래식 편집기를…

  • TTFB 속도(Time To First Byte Speed)

    TTFB란 서버에 HTTP 요청이 보내진 후 클라이언트의 브라우저가 첫 정보를 수신하는데(첫 번째 바이트를 읽는데 걸린 시간) 소요된 시간을 의미합니다. TTFB는 DNS 속도 측정 이후에 계산되는 것으로 오해하는 경우가 많지만 네트워킹에서 TTFB는 DNS를 포함한 네트워크 대기 시간이 포함됩니다. 1. TTFB 과정 3단계 1.1 TTFB 서버 요청 클라이언트가 도메인을 입력 후 웹 사이트를 방문했을 때…

  • 한국의 서비스 종료된 블로그 플랫폼 종류

    전 세계적으로 꾸준히 사랑 받고 있는 CMS는 워드프레스, 쇼피파이, 윅스, Squarespace, 드루팔, 줌라, Ghost CMS 등 다양합니다. 그리고 언제 없어질지 불안감을 가질 필요가 없습니다. 한국의 서비스 종료된 블로그가 많다는 사실을 우리는 경험을 통해서 알고 있습니다. w3techs에서 글로벌 순위를 확인할 수 있습니다. 가치 있는 콘텐츠를 생산해서 여러가지 방법으로 수익을 창출할 수 있다는 것은 콘텐츠는…

  • Awin Affiliate 회원가입

    Awin Affiliate에 회원 가입을 진행했습니다. 순서에 대해 확인 해 보겠습니다. 1. Awin Affiliate란? 아마존 어필리에이트와 같이 해외에서 인지도 있는 광고대행 회사입니다. Awin Affiliate (이전 명칭: Affiliate Window)은 온라인 마케팅 분야에서 선도적인 국제적인 CPA (Cost-Per-Action) 네트워크 중 하나입니다. 전 세계의 다양한 판매자와 어필리에이트를 연결해서 제품 홍보 및 어필레이에트에게는 커미션(수수료)을 지급하는 방식의 기업입니다. Awin의 대표적인…

  • [Chrome] 크롬 개발자도구 실행과 한국어 변경 방법

    구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다. 1. 개발자모드 실행 방법 실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에…

  • [Chrome]구글 디스커버란?|디스커버 관심분야 설정 방법

    전 세계의 수 많은 사람들이 웹을 이용한 뉴스 기사와 관심 키워드를 구글링을 통해 소비합니다. 발견하다는 이름처럼 구글 디스커버(Google Discover)는 보다 쉽게 온라인 사용자의 관심사를 자동으로 보여주는 기능입니다. 구글 디스커버의 역사 Google Discover는 2012년 ‘Google Now’라는 이름으로 시작되었습니다. 취지는 사용자가 구글에서 검색 없이 정보를 제공하는데 있습니다. 구글에서 대신 관심 주제를 제공하는 것이 목적입니다. 안드로이드…

답글 남기기

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

Prove your humanity: 10   +   2   =