it-gundan.com

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

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

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

12
Mark Henderson

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

  • 요청한 브라우저에서 지원하는 경우 deflate 또는 gzip을 사용하여 HTML, CSS 및 Javascript를 압축하십시오.
  • Google Closure Compiler 로 자바 스크립트 축소
  • YUI Compressor 로 CSS를 축소하십시오

조금 더 관여 :

  • 페이지 나 이미지가 변경되지 않을 경우 브라우저에이를 캐시하도록 지시하십시오. 대부분의 웹 서버는 이미 정적 파일에 대해이 작업을 수행하므로 가능하면 동적 스크립트에 추가하기 만하면됩니다.
  • CSS 및 JS 파일을 단일 자동 으로 병합하십시오. 이는 HTTP 요청 (오버 헤드가 있고 어떤 어리석은 브라우저가 있으며 Internet Explorer를 의미하므로 도메인 당 한 번에 2 개의 요청이 기본적으로 제한됨)을 줄임으로써 유리합니다.
  • 정적 파일 (CSS, JS, 이미지 등)을 별도의 도메인 이름으로 이동하십시오. 이로 인해 쿠키 정보가 HTTP 요청으로 전송되지 않습니다.
  • 자동으로 생성 된 스프라이트 를 사용하십시오 . Sprite는 여러 개의 아이콘 또는 다른 작은 이미지를 포함하는 단일 이미지입니다. 그런 다음 CSS background 속성에 표시 할 이미지를 선택하십시오. .

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

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

10
Thomas Bonini

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

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

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

Yahoo!의 웹 사이트 속도를 높이기위한 모범 사례 유사한 모범 사례를 식별하십시오.

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

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

YSlow (이미지 링크) 및 Page Speed (이미지 링크) 모두 페이지에서 테스트를 실행하여 수행 할 수있는 작업을 제안하고 해당 페이지에서 수행 할 수있는 작업을 보여줍니다. 권장 사항은 이미 구현되었습니다.

5
Bryson