[웹 성능 최적화] 웹 성능을 개선하는 기본적인 방법

1. HTTP 요청 수 줄이기

 

(1) HTTP 요청 : 웹 페이지에서 요청하는 콘텐츠의 수가 많을수록 로딩 시간이 길어진다.  콘텐츠는 동일하게 유지하며 HTTP 요청 수를 줄이는 방법을 찾아야 한다.

 

(2) 클라이언트가 웹 서버와 통신하는 법 : 

 

- 브라우저는 DNS 시스템으로 특정 도메인의 접속 IP를 알아내 접속을 하고

 

- HTML 파일을 먼저 응답받은 후 HTML 내에 있는 CSS, JS, Image 등을 차례로 호출한다.

 

- 브라우저가 HTML을 모두 해석하여 콘텐츠를 전부 받아오기까지 호출이 계속 진행 된다.

 

(3) 스크립트 파일 병합 :

 

-소프트웨어 공학에서 제안하는 정복과 분할 : HTTP 요청 수를 증가시키므로 웹 성능에 부정적인 영향을 미친다.

 

- 기능 단위 모듈화 : 여러 파일을 하나의 파일을 호출하는 동일한 결과를 만들 수 있으면 HTTP 요청 수를 줄일 수 있다. 하지만 합쳐진 파일이 너무 크다면 로딩 과정이 길어질 수 있다.

 

(4) 인라인 이미지 :

 

- 인라인 이미지 기법 : CSS안에 해시 정보를 통해 웹 페이지 배경 이미지를 파일을 삽입한다.

HTML 파일의 바이트 크기가 소폭 커진다. 하지만  이미지 파일을 따로 호출하여 전체 로딩 시간이 단축된다. 

 

(4) CSS 스프라이트 : 여러 개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방식. 주로 아이콘이나 버튼 등 작은 이미지를 사용할 때 유용하다.

 

- CSS 스프라이트 예시 : 

<style>
    .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
    .up { width: 21px; height: 20px; background-position: 0 0; }
    .down { width: 21px; height: 20px; background-position: -21px 0; }
    .right { width: 22px; height: 20px; background-position: -42px 0; }
    .left { width: 22px; height: 20px; background-position: -65px 0; }
</style>

 

 

 

 

 

2. 파일 크기 줄이기

 

(1) : 파일이 크면 인터넷 전송 시간이 길어진다. 파일 내용은 변하지 않고 크기를  줄여야 한다.

 

(2) 스크립트 파일 압축 전달 : 

 

- HTML, JS, CSS, XML, JSON 등 모두 눈으로 읽을 수 있는 스크립트 형태의 파일이다.

 

- HTTP 프로토콜은 Accept-Encoding, Center-Encoding 헤더를 사용해 압축 방식의 정보 교환을 지원한다.

 

- 클라이언트는 웹 서버에 콘텐츠를 요청하면서 자신이 지원하는 압축 알고리즘을 HTTP 요청 헤더에 나열하여 알려준다.

 

- 요청 헤더는  Accept-Encoding, 응답 헤더는 Center-Encodingdlek.

 

- 예시 헤더 :

Accept - Encoding : gzip, deflate, sdch

Content - Encoding : gzip

 

(3) 스크립트 파일 최소화 : 

 

-스크립트 파일 최소화란? : 실제 로직에 아무런 영향을 주지 않는 부분을 제거하여 파일 크기를 줄이는 방식이다.

 

-스트립트 파일 최소화 테스트 사이트 : www.minifier.org/

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

- 개발 서버 : 개발자들이 개발서버에서 스크립트 원본 파일을 둔다.

 

- 운영 서버 : 스크립트를 최소화해 운영 시에만 필요한 파일을 사용하는 방식.

 

(4) 이미지 파일 압축 : 메타 정보 등의 불필요한 부분을 제거한다.  사이트 이용 시 손실 압축 가능하다.

tinypng.com/

TinyPNG – Compress PNG images while preserving transparency

(5) 브라우저 선호하는 이미지 포맷 사용 :

 

- WebP : 손실 압축 방식을 사용하는 구글의 프로그램이다. JPEG 이미지 형식을 대체하기 위해 웹 사이트 트래픽 감소, 로딩 속도 단축을 목적으로 한다.

 

- JPEG XT : 손실, 비손실 압축방식 모두 지원하는 마이크로소프트 프로그램이다. 

 

- WebP는 크롬, JPEG XT는 익스플로러에 우선 지원한다.

 

(5) 큰 파일은 작게 나누어 전송 :  

 

- 모든 파일을 다운로드하는 방식은 버퍼링을 유발하며 실제 보지 않는 부분까지 다운하여서 낭비가 발생한다.

 

- 큰 파일의 일부분을 순서대로 다운로드하는 부분 요청 응답 방식을 사용하면 문제를 해결 가능하다. 

 

- 응답 헤더를 통해서 지원 가능 여부를 알 수 있다.

//byte 단위로 파일의 부분 지원기능을 수락한다는 의미
Accept -Range : byte 

//해당 파일의 전체 크기가 50MB라는 정보를 클라이언트에게 알려준다.
Content-Length : 50000000

 

 

 

 

3. 캐시 최적화하기

 

(1) :

 

- 캐시란? : 캐시는 자주 사용되는 콘텐츠나 데이터 등을 임의의 저장소에 복제해두고 재사용하는 방식을 의미한다. 일반적으로 캐시 저장소에 접근하는 시간이 원래 데이터 위치에 접근하는 시간보다 짧고, 시스템의 리소스를 아낄 수 있다.

 

- 인터넷 캐시 : 캐시 영역에 미리 데이터를 복사하는 PUSH방식과,  요청이 있을 때만 캐시에 저장하는 PULL 방식으로 분류된다. PUSH는 사용자의 요청이 과다하게 몰릴 것에 대비 가능하다.

 

- 브라우저 캐시 : 빈번히 접속하는 웹페이지에서 Image, JS, CSS 등을 해당 기기에 캐시 한다. 캐시 함으로써 다음 접속할 때 인터넷 요청하지 않아도 캐시 된 콘텐츠를 사용할 수 있다.

 

(2) 인터넷 캐시 : 

 

- 프록시란? : 인터넷 구간에서 서버 대신에 클라이언트의 자원 요청에 응답해주는 기능을 한다. 일반적으로 콘텐츠 소비자와 제공자 사이의 인터넷 구간이 멀 때 구간의 중간 정도에 프락시를 설치한다. 

 

- 프록시 서버 : 

중계 기능을 수행하는 서버를 프락시 서버라고 한다. 프록시 서버는 원본 서버에 대신 요청하여 클라이언트에게 전달해주고 이를 스스로 저장한다. 이후 다른 클라이언트가 동일한 컨테츠 요청시 자체 저장한 컨텐츠를 제공한다.

 

- 프록시 서버 장점 : 

1. 사용자 부근의 프록시 서버의 응답 속도가 원래 서버의 응답 속도보다 빠르다.

2. 인터넷 트랙핑을 프록시 서버로 분산해 원본 서버의 자원을 절약한다.

 

(3) 브라우저 캐시 :

브라우저 캐시는 클라이언트 위치의 캐시이다. 받아온 웹 콘텐츠들 중 브라우저가 저장할 수 있는 콘텐츠들을 클라이언트 측에 저장해 인터넷상의 요청을 아예 하지 않겠다는 개념.

 

- 브라우저 캐시를 사용할지 아닐지는 웹 서버에서 먼저 결정해야 한다. Cache-Control 응답 헤더를 통해 설정 내용을 클라이언트에게 전달한다.

 

 

 

 

4. CDN(Content Delivery Network)

 

(1) CDN이란? : 인터넷상에서 생산, 소비되는 웹 콘텐츠를 사용자에게 빠르게 전달하기 위해 캐시서버 혹은 에지 서버(Edge server)라 불리는 대용량 인터넷 캐시 영역에 컨텐츠를 저장해 사용하는 네트워크 방식이다. 프락시의 일종으로 전 세계 인터넷 트래픽 성능을 개선해 준다.

 

- CDN은 주로 가입한 ISP의 데이터 센터 내에 캐시 서버를 두고 이를 직접 사용자와 연결해 데이터를 전송한다.

 

(2) CDN 장점 : 

1. 과정에서 네트워크 지연, 패킷 손실 현상을 줄인다.

2. RTT가 줄어 빠르게 콘텐츠를 받을 수 있다.

3. 원본 서버의 부하를 줄일 수 있다. 인프라 비용을 줄일 수 있다.

4. 모니터링 시스템을 갖추고 있어 인터넷 전송이 필요한 콘텐츠의 시스템과 인전 관리 비용이 절감된다.