웹에 날개를 달아주는 웹 성능 최적화 기법 Chapter3

By Gyumyung Lee
book

웹에 날개를 달아주는 웹 성능 최적화 기법

  • 본 책을 읽고 책의 내용을 간략하게 정리한 글입니다.

Chapter 3. 웹 사이트 성능을 개선하는 기본적인 방법

HTTP 요청 수 줄이기

  • 웹 페이지에서 요청하는 컨텐츠 수가 많을수록 로딩 완료 시간 증가
  • 반대로 컨텐츠 수가 적은 페이지는 매우 빠르게 로딩 완료
  • 하지만 기업 홍보, 상품 판매를 위해 많은 사용자를 끌어들여야 하는 실제 상황을 고려하면 웹 성능을 위해 컨텐츠를 줄이는 것은 적절하지 않음
  • 컨텐츠 수는 동일하게 유지하며 HTTP 요청 수를 줄이는 방법을 찾아야 함
스크립트 파일 병합
  • 소프트웨어 공학에서 최소 기능 단위로 소프트웨어 모듈을 나누어 개발하는 것을 모듈화 (modulation) 라고 함
  • 웹 서비스에서도 웹 사이트 기능에 해당하는 자바스크립트나 CSS 파일들을 기능별로 분리하여 저장하고 호출하는 방식 사용
  • 하지만 소프트웨어 공학에서 제안하는 정복과 분할 모듈화는 HTTP 요청 수를 증가시키므로 웹 성능에 좋지 않음
  • 따라서 기능 단위로 모듈화된 여러 파일들을 하나로 합치고 이 하나의 파일을 브라우저가 실행하는 것이 동일한 결과를 만들 수 있다면 HTTP 요청 수를 줄일 수 있음
    • 합쳐진 파일 크기가 너무 크면 로딩 과정에서 길어질 수 있으므로 적절한 크기를 유지해야 함
인라인 이미지
  • HTML 파일의 CSS 안에 해시 정보를 통해 웹 페이지 내 이미지 파일을 삽입
  • 이러한 방식은 HTML 파일의 바이트 크기가 소폭 상승하나 이미지 파일을 따로 호출하여 파일을 받아오는 방식과 비교하면 전체 로딩 시간은 단축됨
    • 이러한 기법을 인라인 이미지라고 함
    • 인라인 방식은 별도의 이미지 파일이 존재하지 않아 인터넷이나 브라우저에 캐시할 수 없으며, HTML이 캐시되어야 동시에 캐시할 수 있음
  • 원본 파일이 존재하는 웹 서버에서 아무리 빨리 인터넷 응답을 준다고 해도 사용자 위치의 캐시 서버나 사용자의 PC, 모바일 기기에 캐시된 컨텐츠를 사용하는 것이 성능 면에서 훨씬 빠른 방법
CSS 스프라이트
  • 여러 개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방식
  • 주로 아이콘이나 버튼 등 작은 이미지 사용 시 유용
  • HTML에 필요한 이미지 영역을 이미지 맵 좌표로 표시
.sprite_rss {
    background: url('imgs/sprites_image.png');
    background-position: -57px -64px;
     (생략)
}

.sprite_linked {
    background: url('imgs/sprites_image.png');
    background-position: -114px -64px;
    (생략)
}

컨텐츠 파일 크기 줄이기

  • 파일 내용은 변하지 않고 크기를 줄일 수 있는 방법에 대해 고안
스크립트 파일 압축 전달
  • 각 웹 서버가 지원하는 방식으로 스크립트 형태 컨텐츠를 압축해 클라이언트에게 더 작은 크기로 내려주고, 클라이언트는 이를 다운로드 후 압축 해제하여 사용하는 방식
  • 파일 압축하여 내려주기 전에 웹 서버와 클라이언트가 서로 지원하는 압축 방식 중 어떤 것을 사용할지 하나를 골라 정해야 함
  • HTTP 프로토콜은 Accept-Encoding, Content-Encoding 헤더를 사용해 이러한 압축 방식의 정보를 교환
    • 클라이언트의 요청 헤더 - 브라우저는 gzip, deflate, sdch 압축 방식 지원함
      • Accept-Encoding: gzip, deflate, sdch
    • 웹 서버의 응답 헤더 - 클라이언트가 지원하는 압축 방식 중 gzip 사용
      • Content-Encoding: gzip
스크립트 파일 최소화
  • HTML, CSS, 자바스크립트 같이 코딩된 스크립트 파일에 포함된 주석문, 공백, 기행 문자 등 실제 로직에 아무 영향을 주지 않는 부분을 제거하여 전반적인 파일 크기를 줄이는 방식
  • Minify 사이트를 이용해 스크립트 파일 최소화 가능
이미지 파일 압축
  • 이미지 파일은 어떤 카메라로 촬영했는지, 해상도는 무엇인지 등 메타 데이터에 파일 정보를 포함해 저장
  • 메타 데이터는 사람의 눈에 실제 이미지로써 보이지 않으므로 불필요한 부분을 제거하면 크기를 상당히 줄일 수 있음
브라우저가 선호하는 이미지 포맷 사용
  • 브라우저가 동일 품질의 이미지 크기를 더욱 줄일 수 있도록 개발된 대표적인 형식으로 WebP, JPEG XR 존재
  • WebP
    • 손실 압축 방식을 사용하는 이미지 형식
    • 구글에서 개발하여 크롬 브라우저와 안드로이드 계열에 적용
    • JPEG 이미지 형식을 대체하기 위해 처음부터 웹 사이트 트래픽 감소, 로딩 속도 단축을 목적으로 개발
  • JPEG XR
    • 마이크로소프트가 JPEG 형식에 장점을 추가해 개발한 이미지 압축 형식
    • 손실 압축과 비손실 압축 방식 모두 지원
    • 마이크로소프트 웹 브라우저와 어도비사의 이미지 제작 툴에서 대표적으로 지원
  • 웹 서버는 동일한 이미지를 각 형식으로 2장씩 준비하여 클라이언트에 따라 다르게 내려주던가 JPEG 원본 이미지만 가지고 있다가 요청한 브라우저에 맞게 변환하여 내려주는 방식도 사용 가능
큰 파일은 작게 나누어 전송
  • 사용자가 영상을 처음부터 끝까지 보기도 하지만 앞 또는 중간 부분부터 보는 사용자도 있음
  • 이런 경우를 대비해 큰 파일의 일부분을 순서대로 다운로드하는 부분 요청 응답 방식을 사용
  • 동영상 뿐만 아니라 고화질의 큰 이미지, 매우 긴 문서 형태의 파일, 게임 패치 파일 등의 대용량 파일 전송에 사용
// 파일의 특정 부분 요청하기
curl -v http://www.example.com/bigfile.jpg -H "Range: bytes=0-1023"
  • 부분 파일 요청에 웹 서버는 206 Partial Content 응답으로 전체 파일 중 부분만 전달했음을 명시
// 웹 서버의 206 응답
HTTP/1.1 206 Partial Content
Content-Range: bytes 0-1023/50000000
Content-Length: 1024
(생략)
(실제 파일의 해당 부분 컨텐츠)
  • Content-Range: bytes 0-1023/50000000
    • 전체 파일 범위 (50000000) 중 처음부터 1023 바이트까지만 전달한다는 의미
  • Content-Length: 1024
    • 현재 전달한 부분 파일의 전체 용량이 시작 위치와 끝 위치를 알려주는 데이터를 포함하여 1024 바이트임을 명시
// 여러 범위를 가진 부분 파일 요청
curl -v http://www.example.com/bigfile.jpg -H "Range: bytes=0-50, 100-150"
  • 부분 파일을 요청할 때 여러 범위의 파일을 쉼표를 사용해 동시 요청할 수 있음을 나타냄
  • 특정 부분의 영상을 재생하면서 뒷부분 영상을 살짝 드러내고 싶을 경우 유용

캐시 최적화하기

  • 컴퓨터 공학에서 캐시는 본래 컴퓨터 자원을 절약하려는 방법에서 시작
  • 인터넷 캐시는 캐시 영역에 미리 데이터를 복사해두는 PUSH 방식과 실제 요청이 있을 때만 캐시에 저장하는 PULL 방식으로 분류
  • 빠른 자원 전달을 위한 인터넷 캐시가 발달하면서 해당 컨텐츠를 소모하는 브라우저도 컨텐츠를 캐시하기 시작
인터넷 캐시 사용
  • 인터넷 캐시를 주로 담당하는 시스템은 프록시 서버로 인터넷의 수많은 경로에 존재
  • 프록시 서버는 클라이언트가 처음 요청한 컨텐츠를 원본 서버에 대신 요청하여 클라이언트에게 전달해주고 이를 저장함
  • 프록시 서버는 사용자가 많은 지역에 여러 곳을 선택하여 설치
    • 사용자 부근의 프록시 서버의 응답 속도가 원래 서버의 응답 속도보다 빠름
    • 원본 서버로 몰릴 수 있는 인터넷 트래픽을 프록시 서버로 분산해 원본 서버의 자원 절약
브라우저 캐시 사용
  • 프록시가 클라이언트와 서버 중간에 위치한 인터넷상의 캐시라면, 브라우저 캐시는 클라이언트 위치의 캐시
  • 받아온 웹 컨텐츠 중 브라우저가 저장할 수 있는 컨텐츠들을 클라이언트 측에 저장해 인터넷상의 요청을 아예 하지 않겠다는 개념
  • 특정 컨텐츠가 브라우저 캐시를 사용할지 아닐지는 일반적으로 웹 서버에서 먼저 결정
  • 특정 컨텐츠를 브라우저에서 캐시할 수 있게 하고, 얼마나 긴 시간동안 캐시해도 되는지 결정 후 웹 서버는 Cache-Control 응답 헤더로 설정 내용을 클라이언트에게 전달
    • Cache-Control 헤더에는 캐시 기간을 초 단위로 표시하여 브라우저에게 전달
    • 이 기간을 캐시가 생존하는 시간이라는 의미로 TTL (Time To Live) 라고도 함
    • // 캐시 TTL 설정
Cache-Control: max-age=3600
  • 컨텐츠가 개인 정보 등 민감한 정보를 가지고 있거나 절대 브라우저에 캐시하지 말아야 할 컨텐츠라면 다음과 같이 캐시하지 않도록 설정 
    • // 캐시하면 안 되는 컨텐츠의 헤더 값
Cache-Control: no-store
  • 브라우저가 원본 서버에 업데이트된 컨텐츠 대신 캐시되었던 예전 컨텐츠를 사용할 수도 있음
  • 브라우저 캐시를 사용하고 원본 서버의 컨텐츠 갱신 여부를 미리 조사해 변경이 없을 때만 캐시된 컨텐츠를 사용하도록 설정 
    • // 원본 서버의 컨텐츠 변경 확인
Cache-Control: no-cache
  • 브라우저 캐시 사용 전 웹 서버에서 설정한 캐시 가능 주기를 먼저 확인하여 해당 시간 범위 내에서만 캐시 사용 설정 
    • // 캐시 가능 주기 확인
Cache-Control: must-revalidate
  • 여러 설정 값을 동시에 설정할 수도 있음 
    • // 캐시가 절대 불가능함을 알려주는 헤더 값
Cache-Control: no-cache, no-store, must-revalidate
  • 명확히 캐시할 수 있을 때는 public 지시자 사용 
    • // 캐시할 수 있음을 알려주는 헤더 값
Cache-Control: public, max-age=31536000
  • 특정 시간까지 캐시할 수 있는지 일정 자체를 설정하고자 할 떄는 Expires 응답 헤더 사용 
    • Expires: <캐시 사용이 가능한 날짜>

// 예시
// GMT 시간대 기준, 2020/11/30 오전 7시까지만 캐시 사용 가능
Expires: Mon, 30 Nov 2020 07:00:00 GMT

CDN 사용하기

  • CDN (Content Delivery Network) 는 인터넷상에서 생산 및 소비되는 웹 컨텐츠를 사용자에게 빠르게 전달하기 위해 캐시 서버 또는 에지 서버라고 불리는 대용량 인터넷 캐시 영역에 컨텐츠를 저장해 사용하는 네트워크 방식
  • CDN은 촘촘히 분산된 서버로 이루어졌으며 사용자의 웹 컨텐츠 요청에 직접 응답
  • CDN은 주로 실제 인터넷 사용자가 가입한 ISP의 데이터 센터 내에 캐시 서버를 두고 이를 직접 사용자와 연결해 데이터를 전송함
  • CDN 사용 시 장점
    1. 인터넷상 원거리에 있는 컨텐츠를 전달받는 과정에서 클라이언트와 웹 사이에 발생할 수 있는 네트워크 지연과 패킷 손실 현상을 줄일 수 있음
    2. 사용자는 가까운 에지 서버에 캐시된 컨텐츠를 전달받으므로 전송에 필요한 RTT가 줄어들어 빠르게 컨텐츠를 받을 수 있음
    3. CDN의 에지 서버가 캐시된 컨텐츠를 전달하므로 원본 서버의 부하를 줄일 수 있으며, 인프라를 확충하는 데 드는 인력과 경비를 줄일 수 있음
    4. 컨텐츠가 에지 서버와 주변 에지 서버 사이에 ICP (Internet Cache Protocol) 를 이용한 서버 전파를 할 수 있어 캐시 컨텐츠의 재사용률이 매우 높음
    5. CDN 사업자들은 사용자 요청 트래픽이나 기술적 특이 사항을 모니터링하는 시스템을 갖추고 있어 인터넷 전송이 필요한 컨텐츠의 시스템과 인적 관리 비용이 절감됨
  • 최근 컨텐츠와 시스템이 데이터 센터에서 클라우드로 이동하는 추세로, 인터넷상에서 컨텐츠를 전달할 때 발생할 수 있는 문제점을 개선하거나 성능을 유지하고 관리해야 하는 새로운 가속화 과제 등장함
  • 이러한 문제를 해결하려는 CDN 기술 또한 진보 중

웹에 날개를 달아주는 웹 성능 최적화 기법, 강상진, 윤호성 저, 루비페이퍼 출판