[웹 성능 최적화 기법]웹 사이트 개선 방법

1. HTTP요청 수 줄이기

일반적으로 브라우저는 DNS시스템으로 특정 도메인의 접속 IP를 알아내 접속하고 HTML파일을 먼저 응답 받은 후 HTML에 있는 CSS나 자바스크립트, 이미지등의 콘텐츠를 차례대로 호출한다.

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

이 호출을 줄이는 방법을 찾아야한다.

방법1. 스크립트 파일 병합

편리한 유지보수를 위해 최소 기능 단위별로 소프트웨어 모듈을 나누어 개발하는 것을 제안한다. 이것을 모듈화라고 한다. 그러나 이런 모듈화는 HTTP요청 수를 증가시키므로 웹 성능에 부정적임. 따라서 기능단위로 모듈화된 파일을 하나로 합치고, 하나의 파이릉ㄹ 브라우저가 실행하는게 여러파일을 각각 호출하는 것과 동일한 결과를 만들면 HTTP요청을 줄일 수 있을것!

방법2. 인라인 이미지

ex> HTML파일의 CSS안에 해시 정보를 통해 웹페이지 배경이미지 삽입

HTML파일은 커지지만 해당 이미지 파일따로 호출하는 로딩 시간을 비교하면 훨씬 낫다. “인라인 이미지” 라고 한다. 그러나 인라인 방식으로 이미지 포함할 경우 별도의 이미지 파일이 존재하지 않아 인터넷 브라우저에 캐시하지 않으며 HTML이 캐시되어야 동시에 캐시 가능. 성능 개선여부를 확인하고 선택할 것!

방법3. CSS스트라이트

여러개의 이미지를 하나의 이미지로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방식.

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

파일이 크면 전송시간이 길어진다. 줄이기위한 방법

방법1. 스크립트 파일 압축 전달

HTML, css, Ajax, XML, JSON타입 파일 등은 사람의 눈으로 읽을 수 있는 스크립트 형태의 텍스트 파일이다. zip파일로 압축하듯이 스크립트 형태의 콘텐츠를 압축해 클라이언트에게 작은 크기로 내려 줄 수 있음. 지원하는 압축방식 어떤 걸 사용할지 골라야한다.

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

클라이언트→Accept-Encoding 으로 내가 지원하는 압축 알고리즘을 알려준다.→웹서버

클라이언트←Content-Encoding으로 받은 방식중에 지원하는 압축 알고리즘 하나를 선택해 응답한다.← 웹서버

방법2. 스크립트 파일 최소화

스크립트 파일에 포함한 주석, 공백, 개행문자등 필요없는 것들 제거. Minify사이트를 활용해 줄이면 반이상 줄일 수 있음

방법3. 이미지 파일 압축

이미지 파일은 해당 정보를 메타데이터에 포함해 저장한다. 메타데이터는 사람눈에 실제 이미지로써 보이지 않으므로 불필요한 부분을 제거하면 크기를 상당히 줄일 수 있음.

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

WebP와 JPEG XR이 대표적인 형식

방법5. 큰 파일은 작게 나누어 전송

큰용량의 파일의 일부분을 순서대로 다운로드해 부분 요청 응답 사용가능한다. 해당 기능이 웹서버에 있어야함

⇒ curl 로 웹서버 응답 지원여부 확인

curl - I xxxx.jpg

응답 200 ok

Accept-Range bytes

byte단위로 파일의 부분 지원기능을 수락한다는 의미이다.

Content-Length 50000000

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

⇒ curl로 부분파일 요청

curl -v xxx.jpg -H “Range: bytes-0-1023”

응답 206 Partical Content

<< 부분만 전달 명시 >>

3. 캐시 최적화

인터넷 상 캐시는 ISP회사가 지역에 분포된 특정 시스템에 사용자와 원격 시스템 사이에서 주고받은 데이터를 캐시하고 다음사용자에게 제공하는 방식으로 널리 사용된다.

콘텐츠를 캐시하는 이 시스템을 프록시 서버라고 부른다.

방법 1. 인터넷 캐시 사용

서버와 클라이언트 사이에서 통신을 대신 하는 기능 자체를 프록시, 그 중계 기능을 수행하는 서버를 프록시 서버 라고 한다.

---

클라이언트 ——- 프록시 서버 ——— 웹서버

---

프록시 서버는 클라이언트가 처음 요청한 콘텐츠를 원본 서버 대신 요청하여 클라이언트에게 전달해주고 스스로 저장한다. 다른 클라이언트가 동일한 콘텐츠 요청시 원본서버에 접속할 필요 없이 자체 저장한 콘텐츠를 제공하는 것!

방법2. 브라우저 캐시 사용

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

---

클라이언트 ——- 프록시 서버 ——— 웹서버

|

브라우저 캐시

---

브라우저 캐시 사용 여부는 웹서버에서 먼저 결정해야 한다. Cache-Control응답 헤더를 통해 서정 내용을 클라이언트에게 전달한다. “캐시가 생존하는 기간” TTL 이라고 한다.

4. CDN 사용하기

인터넷 상 생산 소비되는 웹 콘텐츠를 사용자에게 빠르게 전달하기 위해 캐시서버, 에지서버라 불리는 대용량 인터넷 캐시영역에 콘텐츠를 저장해 사용하는 네트워크 방식이다. 여러 노드를 가진 네트워크에 콘텐츠를 저장해 제공하는 프록시의 일종으로 오늘날 인터넷 환경에서 광범위하게 사용되어 전세계 인터넷 트래픽 성능을 개선해준다.