웹페이지 최적화, 브라우저 다이어트, 페이지 로딩 속도 빠르게 하는 방법 PageSpeed

백만년만에 네이버 블로그 포스팅

웹페이지를 최적화하고 로딩 속도를 조금이라도 빠르게 하기 위한 방법

일반 적인 경우는 특정한 요소 하나로 인해 로딩이 지연되기보다는 전반적으로 모든 요소들이 다 적용이 되므로 전체적으로 확인하는 것이 좋다. 

 

사이트가 느리면 사용자들은 짜증을 내며 금새 다른 사이트로 이동하거나 브라우저를 닫아 버린다.
사이트를 좀더 빠르게 띄워 사용자들의 만족도를 높이는 것이 사이트 존재의 목적이나 마찬가지이다.
어떻게 하면 웹페이지 로딩 속도를 좀 더 빠르게 할 수 있는지는 여러가지 방법이 있다.

 

 

Keep-Alive 사용

- 정의된 시간내에 access가 이루어진다면 계속 연결된 상태를 유지할 수 있어 연결을 끊고 다시 연결하는 것보다 시간을 줄일 수 있습니다. 

http://pungjoo.tistory.com/2

 

압축 사용 

- gzip 또는 deflate로 리소스를 압축하면 네트워크를 통해 전송되는 용량을 줄일 수 있습니다.

 

브라우저 캐싱 활용 

- 정적 리소스에 대한 HTTP 헤더에 만료일 또는 최대 수명을 설정하면 브라우저가 이전에 다운로드한 리소스를 네트워크를 통해서가 아닌 로컬 디스크로부터 로드합니다.

 

이미지 최적화

- 제대로 이미지의 형식을 지정하고 압축하면 데이터 용량을 크게 절약할 수 있습니다.

 

CSS 스프라이트로 이미지 통합

- CSS 스프라이트를 사용하여 이미지를 가능한 한 적은 파일로 통합하면 다른 리소스를 다운로드할 때 왕복 회수 및 지연이 줄고 요청 오버헤드가 줄어서 웹 페이지가 다운로드하는 전체 용량이 줄어듭니다.

 

자바스크립트 파싱 지연

- 페이지를 렌더링하는 데 필요한 자바스크립트의 양을 최소화하고 불필요한 자바스크립트의 파싱을 반드시 실행해야 할 때까지 연기하면 페이지의 초기 로드 시간을 줄일 수 있습니다.

 

자바스크립트 축소

자바스크립트 코드를 압축하면 데이터 용량을 크게 절약할 수 있고 다운로드, 파싱 및 실행 시간을 줄일 수 있습니다.

 

HTML 축소

본문 삽입 자바스크립트를 포함한 HTML 코드 및 그 안에 포함된 CSS를 압축하면 데이터 용량을 크게 절약하고 다운로드, 파싱 및 실행 시간을 줄일 수 있습니다.

 

본문에 작은 CSS 삽입

- 작은 스타일시트를 기본 HTML 페이지에 삽입하면 다른 리소스를 다운로드할 때 RTT 및 지연이 대폭 줄어듭니다.

 

리다이렉션 최소화

- 한 URL에서 다른 URL로의 HTTP 리다이렉션을 최소화하면 추가적인 RTT 및 사용자 대기 시간이 대폭 줄어듭니다.

 

스타일 및 스크립트 순서 최적화

- 외부 스타일시트와 외부 및 본문 삽입 스크립트의 순서를 제대로 정렬하면 다운로드 병렬화를 개선하고 브라우저 렌더링 시간을 줄일 수 있습니다.

 

CSS 축소

- CSS 코드를 압축하면 데이터 용량이 크게 절약되고 다운로드, 파싱 및 실행 시간이 줄어듭니다.

 

요청 크기 최소화

- 쿠키 및 요청 헤더를 최대한 작게 유지하면 HTTP 요청을 단일 패킷에 맞춰 넣을 수 있습니다.

 

이미지 크기 지정

- 모든 이미지의 너비와 높이를 지정하면 불필요한 리플로우와 리페인트의 필요성을 제거하여 신속하게 렌더링할 수 있습니다.

 

문자 집합 지정

- 초반부에 HTML 문서에 대한 문자 집합을 지정하면 브라우저가 스크립트를 즉시 실행하도록 할 수 있습니다.

 

Vary : Accept-Encoding 헤더 지정

프록시 서버가 압축한 버전과 압축하지 않은 버전의 두 가지 리소스를 캐시하도록 지시합니다. 그러면 Content-Encoding 헤더의 존재를 제대로 감지하지 못하는 공용 프록시 관련 문제가 생기지 않게 됩니다.

 

CSS @import 사용 안함

외부 스타일시트에서 'CSS @import'를 사용하면 웹 페이지를 로드하는 중에 추가적인 지연이 발생할 수 있습니다.

 

문서 헤드에 CSS 삽입

본문 삽입 스타일 블록 및 <link> 요소를 문서 본문에서 문서 헤드로 이동하면 렌더링 성능이 개선됩니다.

 

본문에 작은 JavaScript 삽입

- 작은 자바스크립트 파일을 기본 HTML 페이지에 삽입하면 다른 리소스를 다운로드할 때 RTT 및 지연이 대폭 줄어듭니다.

 

비동기 리소스 선호

- 리소스를 비동기적으로 가져오면 리소스로 인해 페이지 로드가 차단되지 않도록 할 수 있습니다.

 

일관된 URL 에서 리소스 제공

- 고유 URL에서 리소스를 제공하고 중복된 다운로드 용량 및 추가 RTT를 제거하는 것이 중요합니다.

 

잘못된 요청 사용 안함

- '깨진 링크' 즉 404/410 유형 오류로 귀결되는 요청 내용을 삭제하면 불필요한 요청을 줄일 수 있습니다.

 

정적 리소스에서 검색어 문자열 삭제

- 정적 리소스에 대해 HTTP 헤더에 공개 캐싱이 가능하도록 설정하면 브라우저가 원래의 원격 서버로부터가 아니라 가까운 프록시 서버로부터 리소스를 다운로드할 수 있습니다.

 

조정된 이미지 제공

- 이미지의 크기를 적절하게 조정하면 데이터 용량을 크게 절약할 수 있습니다.

 

캐시 유효성 검사기 지정

- 캐시 유효성 검사기(Last-Modified 또는 ETag 헤더)를 지정함으로써 캐시된 리소스의 유효성을 효율적으로 확인할 수 있습니다.

 

 

위의 내용들을 클릭 한번으로 알려주는 훌륭한 툴이 있어 소개한다.
바로 구글에서 제공하는 PageSpeed라는 브라우저 플러그인이다.
크롬과 파이어폭스의 플러그인을 제공한다.

플러그인 다운로드 - https://developers.google.com/speed/pagespeed/insights_extensions

[출처] 웹페이지 최적화, 브라우저 다이어트, 페이지 로딩 속도 빠르게 하는 방법 PageSpeed|작성자 파로스