웹사이트 성능 최적화 방법

웹사이트 최적화 방법론을 정리해본다. 어떤 항목들은 여러 라이브러리나 툴 등을 통해서 쉽게 해결 할 수 있는 부분도 있지만 개발시 신경써서 구현을 해줘야 하는 부분도 많이 있다.

 

1. HTTP 요청을 최소화

   - 페이지를 구성하고 있는 각 요소(이미지, 스타일시트, 스크립드 등)들을 줄이기

   - 방법 : 디자인을 단순화. 스크립트, 스타일시트 등 파일을 결합, 배경이미지들을 하나로 결합 

 

 

2. CDN(Content Delivery Network)  사용

   - 사용자 응답시간의 80%이상은 페이지의 구성요소(이미지, 스타일시트, 스크립트 등) 다운로딩에 소요 됨.

   - 사용자에게 효율적인 Content 제공을 위해 여러 지역에 분산된 웹서버의 집합체(응용프로그램 아니라 정적 컨텐츠에 대한 응답을 빠르게 함)

   - 사용자의 요청 시에 가장적은 네트워크 홉과 가장 빠른 응답시간의 서버가 선택 됨.

 

    

3. Expires or Cache-Control Header 추가

   - 사용자의 캐시를 사용하여 불필요한 HTTP 요청 방지.

 

 

4. Gzip 구성요소 

   - 압축을 통해 HTTP 응답의 크기를 줄임으로 응답시간을 단축

   - (요청)Accept-Encoding:gzip / (응답)Content-Encoding:gzip

   - Gzip은 가장 대중적이고 효과적인 압축방법(약 70%까지 응답크기 줄일 수 있음)

 

 

5. 스타일시트를 상단에 배치

   - 문서의 헤더에 스타일시트를 배치하면 순차적 페이징 로딩 -> 로딩속도가 빨라짐.

 

       

6. 스크립트는 하단에 배치

   - 스크립트는 병렬다운로드를 방해함 -> 예를 들어, 여러 host에 이미지가 있을때 스크립트가 다운로드 중이면 브라우저는 이미지들을  다운로드 하지 않는 문제 발생.

   - 스크립트에 컨텐츠의 일부를 삽입하기 위한 내용이 있을수도 있는데 이 상황에서는 컨텐츠 표시에 대한 다른 대안을 찾음(defer속성 등)

 

 

7.  CSS Expression 을 피하라

   - Ex> background-color:expression((new Date()).getHours()%2? “#b8d4ff”:”#f08a00”);

   - CSS는 생각보다 많이 사용됨(마우스 오버 등)으로 CSS 표현식은 피한다.

 

 

8. JavaScript, CSS는 외부파일로 분리

   - 외부로 분리된 JavaScript, CSS파일은 브라우저에서 캐시(HTML은 매번 다운로드 받기 때문에 HTML에 포함되어 있으면 성능상 문제) 

   - 캐시된 JavaScript, CSS는 다른 HTML에서도 재사용 가능으로 효율적

 

 

9. JavaScript, CSS 축소

   - 불필요한 공백, 줄바꿈, tab 등을 줄임으로써 다운로드 시간을 줄임

 

 

10. Etags 설정

   - Etag 브라우저 캐시에 있는 구성요소가 원본서버에 있는 구성요소와 일치하는지 여부를 확인하기 위해 웹서버와 브라우저가 사용하는 메커니즘.

   - Etag가 제공하는 검증 모델을 활용하지 않는다면 완전히 제거하는게 나음(사이즈만 커짐)

 

 

11. Ajax 요청에 대한 GET사용

   - XMLHttpRequest 사용 시 POST는 브라우저에서 2단계(헤더전송, 데이터전송) 됨.

   - 데이터 조회 시는 GET을 사용하자

 

    

12. DOM 요소의 수를 줄여라

    - 중첩된 Table 사용 등은 응답의 사이즈가 증가 및 DOM을 이용한 처리 시간 증가

 

 

13. 쿠키의 사이즈를 줄여라

   - 불필요한 쿠키를 제거하고, 응답시간에 미치는 영향을 최소화 하기 위해 쿠키 사이즈를 작게 유지하라    

 

 

14. HTML에서 이미지 사이즈 변경을 하지말자

   - 이미지 width, height = 100인 것이 필요하면 100x100 이미지를 사용하라.(500x500이미지를 사용해서 사이즈 변경을 하지마라)