✔︎ 웹 사이트 성능 개선을 위한 기본적인 방법

1. HTTP 요청 수 줄이기

웹 페이지에서 요청하는 컨텐츠의 수가 많을수록 로딩 완료 시간은 길어진다. 하지만 현대 웹 사이트에서는 콘텐츠 수를 줄이는 것이 불가피하기때문에, HTTP 요청 수를 줄이는 것이 중요!

a. 스크립트 파일 병합

• 현대 웹에서 필수적인 모듈화는 HTTP 요청 수를 증가시킴
• 따라서 모듈화 된 여러개의 파일을 적절히 하나로 병합하는 과정이 필요 👉 WebPack 등장 배경
• HTTP 요청 수를 줄일 뿐만 아니라, 프록시나 브라우저에 캐시될 확률을 높임

b. 인라인 이미지

• HTML의 CSS 안에 해시 정보를 통해 이미지 파일을 삽입하는 방식. 별도의 이미지 파일은 존재하지 않음
• HTML 바이트 크기가 소폭 커지나, 전통 방식에 비해 로딩 시간이 단축됨
• 별도의 파일이 존재하지 않아 캐시할 수 없고, HTML이 캐시되어야 동시에 캐시되므로 전체적인 성능 개선 여부를 확인하고 취사 선택 필요

c. CSS sprite

• 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
• 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용함
• 일반적으로 작은 아이콘, 버튼에 적용
• example
  • https://www.toptal.com/developers/css/sprite-generator
  • https://github.com/twolfson/gulp.spritesmith
• 단점 : 아이콘이 바뀔때마다 일일이 작업을 다시 해줘야함

2. 콘텐츠 파일 크기 줄이기

파일 크기와 인터넷 전송 시간은 비럐하기 때문에, 파일 수를 줄이는 것만큼 파일 자체 크기를 줄이는 것도 중요. 파일 내용은 변하지 않으면서 크기를 줄이는 것이 중요

a. 스크립트 파일 압축 전달

• 스크립트 파일 : HTML, JS, CSS, XML, JSON 타입 파일 등등
• 웹 서버와 클라이언트가 모두 지원하는 방식으로 스크립트 파일을 압축할 필요성
  • 클라이언트 : Accept-Encoding Header (gzip, deflate, sdch 방식)
  • 서버 : Content-Encoding Header

b. 스크립트 파일 최소화

• 주석, 공백, 개행문자 등의 제거
• https://www.minifier.org/
• 단, 유지보수가 필요한 경우 사용하기 어려움 👉 개발 서버(스크립트 원본 파일)와 운영 서버(최소화시킨 스크립트 파일)의 분리 필요
• 스크립트 파일 최소화로 불필요한 부분을 제거한 후, gzip 등의 파일 압축 방식으로 서버가 내려준 파일을 클라이언트가 압축 해제하는 두 방법을 모두 적용하면 효과적

c. 이미지 파일 압축

• 손실 압축 방식으로 이미지 파일 압축 가능
  • 손실 압축 : 눈에 보이지 않는 약간의 데이터를 제거. 품질이 최우선이 아닐때 주로 사용. 데이터의 품질을 약간 떨어뜨리나, 데이터를 전송 및 저장할때 유용
  • 무손실 압축 : 원래 형식의 파일로 복원 할 수 있음. 데이터의 품질이 손상되지 않음.

d. 브라우저가 선호하는 이미지 포맷 사용

• webP
  • 구글이 개발한 이미지 형식 (크롬 및 안드로이드 계열에 적용)
  • 손실 압축 방식 사용
  • JPEG 이미지 형식 대체제로, 품질은 거의 동일하나 파일 크기는 평균 50% 감소 가능
• JPEG XR
  • 마이크로소프트사가 개발한 이미지 형식
  • 손실 압축, 비손실 압축 모두 지원
  • JPEG의 30% 정도 크기로 동일한 품질의 이미지 표시
• 각 형식으로 두 개의 이미지를 준비하는 방식 또는, JPEG 원본 이미지만 저장하고 있다가 요청한 사용자의 브라우저에 맞게 변환해서 내려주는 방식으로 많이 사용

e. 큰 파일은 작게 나누어 전송

• 큰 파일의 일부분을 순서대로 다운로드하는 부분 요청 응답 방식
  • 부분 요청 응답 방식은 웹 서버에 특정 부분 파일 전달을 지원하는 기능이 있을 때만 사용 가능 (웹 서버의 응답 헤더를 통해 확인 가능)
• 동영상, 고화질의 대용량 이미지, 문서 형태 파일, 게임 패치 파일 등 대용량 파일 전송에 사용
• 크기를 가늠할 수 없는 콘텐츠 전송시에도 유용

3. 캐시 최적화하기

static 한 컨텐츠인 이미지, 자바스크립트, css 파일 등을 프록시 서버에 캐시하거나 사용자의 브라우저도 해당 기기에 캐시한다

a. 인터넷 캐시 사용

• 인터넷 상에서 자주 요청되는 콘텐츠를 캐시하는 것은 중요한 작업
• 프록시 서버
  • 웹 서버와 클라이언트간 중계 기능을 수행하는 서버
  • 일반적으로 사용자가 많은 지역에 여러 곳을 선택하여 설치
  • 먼 곳에 있는 원본 서버의 콘텐츠를 캐싱하여 저장하고, 클라이언트가 요청했을 때 서버 대신 응답해주는 방식
  • 빠른 응답 속도와 인터넷 트래픽 분산 장점이 있음

b. 브라우저 캐시 사용

• 클라이언트 위치의 캐시
• 특정 컨텐츠가 브라우저 캐시를 사용할지 여부는 웹 서버 측에서 먼저 결정
• Cache-Control 헤더를 통해 설정 내용을 클라이언트에 전달
  • max-age : 캐시 할 시간 (초단위)
  • no-store : 사용자의 주요 정보처럼 캐시하면 안되는 콘텐츠의 경우 설정
  • multi-revalidation : 캐시 가능 주기를 확인 후 그 시간 범위 내에서만 캐시를 사용하고싶을 때
  • public : 해동 콘텐츠를 명확히 캐시할 수 있을 때

// Example
Cache-Control: public, max-age=31536000

c. CDN 사용

• 인터넷상에서 생산 및 소비되는 웹 콘텐츠를 유저에게 빠르게 전달하기 위해 캐시 서버 혹은 에지 서버라 불리는 대용량 인터넷 캐시 영역에 콘텐츠를 저장해 사용하는 네트워크 방식
• 전세계 인터넷 트래픽 성능 개선
• 장점
  • 네트워크 지연과 패킷 손실 현상 줄일 수 있음
  • 사용자는 전송에 필요한 RTT(Rount Trip Time)이 감소하여 빠르게 컨텐츠를 받을 수 있음
  • 원본 서버의 부하 감소
  • 캐시 콘텐츠의 높은 재사용률
  • 인터넷 전송이 필요한 콘텐츠의 시스템과 인적 관리 비용 절감

Reference

• gzip : https://gitabout.com/18
• 손실 압축과 무손실 압축 : https://ko.gadget-info.com/difference-between-lossy-compression
• 웹 성능 최적화 기법 (강상진 윤호성 박성현 저)