공부+

웹사이트 최적화 방법

1) CSS 스프라이트 기법 활용

이미지를 많이 사용하면 HTTP 요청이 많아질 수밖에 없습니다.

이미지를 많이 사용하면서도 HTTP 요청을 최소화하는

방법 가운데 하나가 CSS 스프라이트 기법입니다.

CSS 스프라이트 기법은 이미지 여러 개를 하나로 만들고

스타일시트에서 background-position 속성을 설정해

필요한 부분의 이미지만 보여주는 기술입니다.

여러 이미지를 하나의 이미지로 합치기 때문에

HTTP 요청 횟수를 줄일 수 있고,

이미지의 컬러 테이블과 같은 메타데이터를

하나로 합칠 수 있어 파일 크기가 줄어듭니다.

 

 

2)자바스크립트 파일 통합

웹서비스의 기능이 향상됨에 따라 자바스크립트 파일은

개수도 많아지고 크기도 커지고 있습니다.

이럴 때 성능을 높이는 방법은 여러개의 자바스크립트 파일을

하나의 파일로 합쳐 파일 개수를 최소화하는 것입니다.

 
성능 개선 사례로는 2008년 네이버 메일 3.0을 개발할 때

자바스크립트 파일의 개수는 무려 60개 정도였고,

캐시를 비운 상태에서 자바스크립트 파일을 로딩하는 데만

3초 이상의 시간이 걸렸습니다.

이 파일을 모두 합치고 최소화해 단 0.15초 만에

로딩하도록 성능을 개선했습니다.

 
웹 사이트의 성능을 개선할 때는 파일의 용량보다

파일의 개수가 더 중요합니다.

아주 용량이 작은 파일이라도 원격 서버에서 가져와야 한다면

네트워크 비용이 듭니다.

파일이 캐시에 있더라도 해당 파일이 유효한지 판단해야 합니다.

또한 병렬로 다운로드하는 데 한계가 있기 때문에

파일의 개수가 늘어나는 것은 성능에 치명적입니다.

스타일시트와 자바스크립트 배치를 이용한 성능 향상

스타일시트 파일은 페이지 제일 위쪽에 놓고

자바스크립트 파일은 페이지 맨 아래쪽에 놓아야 합니다.

 

브라우저 렌더링 단계에 따르면 사용자에게

화면을 보여 주기 전에 렌더 트리를 생성해야 하는데,

이때 스타일시트 파일이 반드시 필요합니다.

스타일시트 파일을 최대한 빨리 다운로드해야하는 이유입니다.

그리고 파이어폭스나 인터넷 익스플로러는 스타일시트

파일을 모두 다운로드할 때까지 화면을 렌더링하지 않고 기다립니다.

래서 스타일시트 파일은 페이지의 제일 위쪽인 <head> 태그와

</head> 태그 사이에 놓아서 최대한 빨리 다운로드 해야합니다.

 

자바스크립트 파일을 페이지 아래에 놓아야 하는 가장 큰 이유는

파일을 다운로드해서 실행하기 전까지 브라우저가

DOM 파싱도 중지하고 아무것도 렌더링하지 않기 때문입니다.

자바스크립트에는 document.write() 메서드가 있어 마크업을

렌더링하는 도중에도 DOM을 추가할 수 있습니다.

이로 인해 이미 서버 통신을 완료하고 필요한 구성 요소를

모두 브라우저에 가져왔음에도 자바스크립트를 수행하느라

렌더링이 멈추게 됩니다.

이때 사용자에게는 마치 화면이 멈춘 것처럼 보여 체감 속도가 느려집니다.

 

 

3) 자바스크립트와 css 파일을 외부로 분리하기

자바스크립트와 css 파일을 문서 내에 배치하는것 보다

외부로 분리하여 link, script 태그로 불러오는 방식을 사용하는 방법으로

응답시간을 줄일 수 있습니다.

브라우저에 의해 캐시에 저장된

자바스크립트와 css 파일은 재사용 되어 사용되기 때문입니다.

 

4) HTML에서 이미지 크기를 줄이지 않기

html안에서 이미지 사이즈를 변경할 수 있습니다.

html내에서 사이즈를 수정하지 않고 원하는 사이즈로

컷팅된 이미지를 넣어 사용하는 것이 최적화에 좋습니다.

 

5) @import보다 link를 선택하라
ie에서 @import는 태그를 페이지의 하단에 사용하는 것과 같으므로

최적의 사용방법이 아닙니다.

 

6) CDN (Content Delivery Network)의 사용
cdn은 사용자에게 보다 효율적으로 컨텐츠를 제공하기 위해

여러 지역에 걸쳐 분산된 웹서버의 집합체로 사용자가 요청을 했을 때

고객의 네트워크에서 가장 가까운 서버를 측정하여 선택하기 때문에

가장 빠른 응답시간의 서버가 선택됩니다.

 

 

 

 

 

 

 

 

reference
- 12bme
https://12bme.tistory.com/128

- WJ
https://bearjin90.tistory.com/21

'공부+' 카테고리의 다른 글

gsap tween kill() 속성  (0) 2019.05.04
gsap tween overwrite 속성  (0) 2019.05.04
전화번호,이메일,지도 자동링크 방지  (0) 2019.04.24
css 선택자, 함수  (0) 2019.04.24
제목 넣어서 메일 보내기 : mailto: ?subject=''  (0) 2019.04.23