Web 성능 최적화 방법 5가지

성능 최적화 방법 5가지

1. HTTP 요청 수 줄이기

• 스크립트 파일 병합

2. CSS Sprite

• 여러개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방식
• 10개의 이미지가 필요한 경우(또는 아이콘) 10개를 전부 로딩하면 성능이 떨어짐.
• 하나의 이미지 파일로 구현하고 필요한 좌표를 찍어서 이미지를 얻어온다.

.sprite-ps {
	background: url(...);
    background-position: 0 -64px;
    width: 50px;
    height: 50px;
}

3. script 압축 파일 전달

• http 프로토콜은 헤더를 통해 압축 방식의 정보를 교환한다.
• 웹 서버에 컨텐츠 요청시 자신이 지원하는 압축 알고리즘을 헤더에 실어서 보냄.
• 그러면 웹 서버는 여러 알고리즘 중, 하나를 선택해 응답 헤더에 실어 보냄.
• 해당 방식으로 압축 해제

4. script 파일 최소화

• 주석, 공백, 개행 등 실제 로직에 아무런 영향을 주지 않는 부분을 제거하여 스크립트 파일을 줄임

5. 캐시 최적화

1) 인터넷 캐시 사용

• 프록시 서버를 사용하여 캐시
• 사용자 부근의 프록시 서버는 원본 서버 응답속도보다 빠르다.
• 원본 서버로 몰릴 수 있는 트래픽을 분산처리 한다. (= 서버 자원 절약)

2) 브라우저 캐시 사용

• 브라우저가 저장할 수 있는 콘텐츠들을 클라이언트 측에 저장해 인터넷상의 요청을 하지 않겠다는 의미
• 브라우저 캐시 사용여부는 웹서버가 결정(응답 헤더 cache-control)

• 참고 자료
  • 웹 성능 최적화 기법: https://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=344587219&gclid=Cj0KCQjw29CRBhCUARIsAOboZbJ0ql-oCRK2Euea2ZFFXR0yAYn3HiG6fyndjVpv0Eesg64jbFkpKXsaAprEEALw_wcB