대역폭을 줄이는 효과적인 방법 (따라서 페이지로드 시간)?

웹 사이트에서 페이지를 렌더링하는 데 필요한 대역폭의 양을 줄이는 데 가장 효과적인 방법은 무엇입니까?

공격적인 캐싱? JS / CSS를 축소 하시겠습니까? Gzip? CMS? 스프라이트?

모든 웹 사이트에서 쉽게 구현할 수있는 몇 가지 기본 방법 :

• 당신의 HTML, CSS 및 자바 스크립트를 압축 deflate또는 gzip요청 지원을했다 브라우저합니다.
• Google Closure Compiler로 자바 스크립트 축소
• YUI Compressor로 CSS 축소

조금 더 관여 :

• 페이지 나 이미지가 변경되지 않을 경우 브라우저에이를 캐시하도록 지시하십시오. 대부분의 웹 서버는 이미 정적 파일에 대해이 작업을 수행하므로 가능한 경우 동적 스크립트에 추가하기 만하면됩니다.
• CSS와 JS 파일을 하나의 파일로 자동 병합합니다 . 이는 HTTP 요청 (오버 헤드가 있고 특정 바보 브라우저가 있음)을 감소 시키므로 Internet Explorer를 의미하므로 도메인 당 한 번에 2 개의 요청이 기본적으로 제한됩니다.
• 정적 파일 (CSS, JS, 이미지 등)을 별도의 도메인 이름으로 이동하십시오. 이로 인해 쿠키 정보가 HTTP 요청으로 전송되지 않습니다.

• 자동으로 생성 된 스프라이트를 사용하십시오 . 스프라이트는 여러 개의 아이콘 또는 다른 작은 이미지를 포함하는 단일 이미지입니다. 그런 다음 CSS background속성 으로 표시 할 이미지를 선택하십시오 . 예 .

  클라이언트가 적은 HTTP 요청 (오버 헤드가 있음)을 만든다는 장점이 있습니다.

이러한 작업을 수동으로 수행하는 경우에는 그만한 가치가 없으며 코드 유지 관리가 악몽이되기 때문에 "자동으로"굵게 표시했습니다. 일반적으로 자동으로 수행하는 것은 맞춤 스크립트를 작성하는 것을 의미하므로 "좀 더 복잡합니다",

Google은 페이로드 크기를 최소화 하기위한 권장 사항을 설명하고 설명했습니다 . 여기에는 다음 기술이 포함됩니다.

1. 압축 사용
2. 사용하지 않는 CSS 제거
3. 자바 스크립트 축소
4. CSS 축소
5. HTML 축소
6. 자바 스크립트 로딩 지연
7. 이미지 최적화
8. 스케일 된 이미지 제공
9. 일관된 URL에서 리소스 제공

이러한 제안은 Page Speed 라는 오픈 소스 Firefox / Firebug 애드온 프로젝트의 일부입니다 . Yahoo!의 YSlow 플러그인과 유사합니다 . 실제 Page Speed ​​애드온은 해당 목록에 설명 된 것보다 더 많은 최적화가 있는지 확인합니다. Page Speed ​​사용 지침도 제공됩니다.

웹 사이트 속도 향상을위한 Yahoo!의 모범 사례 는 다음과 같은 모범 사례를 식별합니다.

1. HTTP 요청 최소화
2. 컨텐츠 전달 네트워크 사용
3. 만료 또는 캐시 제어 헤더 추가
4. Gzip 부품
5. 스타일 시트를 맨 위에 놓기
6. 스크립트를 맨 아래에 놓으십시오
7. CSS 표현식 피하기
8. JavaScript와 CSS를 외부로 만들기
9. DNS 조회 감소
10. …

(Yahoo!의 목록은 ~ 35 개 항목으로, 전체를 인용 할 필요는 없습니다.)

두 YSlow에 (이미지 링크) 및 페이지 속도 (이미지 링크) 당신이 할 수있는 일을 제안과 권고, 이미 구현되어 무엇을 보여주는, 당신이 당신의 페이지에 테스트를 실행할 수 있습니다.