it-gundan.com

HTML 또는 XHTML 페이지 크기를 줄이기위한 일반적인 최적화?

HTML 또는 XHTML 페이지 크기를 줄이기 위해 수행되는 일반적인 최적화는 무엇입니까? 떠오르는 일부는 다음과 같습니다.

  • 댓글 삭제
  • 불필요한 공백을 제거하고
  • 반복적 인 인라인 스타일을 CSS 스타일 시트로 이동
  • 기타.

다른 사람은 무엇입니까? 어느 것이 가장 큰 벅스 팟을 제공합니까? 아니면 툴이나 모듈에 의해 자동으로 수행 될 수 있습니까?

15
Chris W. Rea

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

누군가 마크 업을 압축해야한다고 말하고있을 것입니다.

다음은 GzipApacheIIS 에서 설정하는 방법에 대한 링크와 함께 설명합니다.

WebReference onartReference 는 mod_gzip Apache 모듈을 사용할 때 다음과 같은 성능 향상을 얻을 수 있음을 나타냅니다.

웹 마스터는 일반적으로이 모듈을 사용하여 웹 서버 성능이 150-160 % 증가하고 HTML/XML/JavaScript 대역폭이 70 %-80 % 감소합니다. 전체 대역폭 절약은 약 30-60 %입니다

18
jessegavin

아마 가치가 없을 것입니다.

나는 HTML에서 공백을 제거하면서 연주 조금했고 gzipping 후 페이로드의 크기가 10 % 줄었습니다.

실제로 공백과 줄 바꿈 제거는 압축이 우리에게 도움이되는 작업을 수행하고 있습니다. 우리는 단지 인간 보조 효율의 소량을 추가하고 있습니다 :

 원시 압축 
 최적화되지 않은 CSS 2,299 바이트 671 바이트 
 최적화 된 CSS 1,758 바이트 615 바이트 

(예, 이것은 CSS라고 말하지만 동일한 기본 규칙이 HTML에도 적용됩니다)

문제는,

  1. GZIP는 90 %의 작업을 수행하므로 미시적 최적화입니다. 아마도 당신이 구글이나 야후라면.
  2. "소스보기"에서 완전히 읽을 수없는 HTML의 다소 가파른 비용으로 10 % 추가 크기 축소가 발생합니다.
10
Jeff Atwood

좋아, 작은 것 : 태그 이름과 속성을 소문자로 일관성있게 유지하십시오 (표준 명령으로). 압축 비율을 백분율로 증가시킵니다.

6
Thomas Bonini

볼륨이 매우 큰 사이트 인 경우 HTML 페이지와 CSS 페이지의 크기를 줄이기 위해 매우 짧은 엔터티 ID와 클래스 이름을 사용하는 것이 좋습니다.

또한 지나치게 구조화 된 사이트 구성에주의하십시오. 실제로 필요하지 않을 때 div 및 span 섹션을 쉽게 추가 할 수 있습니다. 큰 결과 집합에 대한 페이징 및 유사한 결과와 같은 전략을 고려할 수도 있습니다.

실제로 이러한 최적화는 Google과 같은 트래픽 카테고리에 속하지 않는 사이트에 대해 지불 제한 (및 페이징 전략, 잠재적 SEO 단점)에 대해 매우 제한적입니다. jessegavin 's recommendation 에 따라 GZip/Deflate 압축을 활성화하고 완료하십시오.

4
JasonBirch

일반적인 CSS, 이미지 및 자바 스크립트를 하나의 파일로 결합합니다. 파일 크기는 줄이지 ​​않지만 http 요청 수는 줄어 듭니다. 작은 파일의 경우 http 오버 헤드가 다운로드 시간보다 훨씬 큽니다. CSS와 자바 스크립트 파일을 결합하는 스크립트를 작성하면 개발 중에 쉽게 관리 할 수 ​​있지만 단일 파일로 배포 할 수 있습니다.

이미지 결합에 대한 자세한 내용은 http://css-tricks.com/css-sprites 를 참조하십시오.

또한 Google에서 Closure Compiler 를 확인하십시오. 나는 그것을 사용하지는 않았지만 자바 스크립트를 다운로드하고 더 빠르게 실행한다고 주장합니다.

3
mcrumley

다른 사람들이 말했듯이, 가장 큰 이점은 gzipping에서 비롯됩니다.

적절한 HTML 요소를 사용해야합니다. <div class="page-title">Hello World</div> 대신 <h1>Hello World</h1>를 사용하십시오.

그리고 명백한 것 : 레이아웃에 테이블을 사용하지 마십시오! 960.gs와 같은 간단한 그리드 시스템을 사용하십시오 (또는 자체 경량 버전을 롤링하십시오). 특히 중첩 테이블의 경우 HTML 크기간에 큰 차이가있을 수 있습니다. 비교:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

<div class="colSmall">...</div>
<div class="colLarge">...</div>
3
DisgruntledGoat

ASP.NET 웹 사이트를 사용하는 경우 ViewState 에주의하십시오. 페이지에서 매우 큰 숨겨진 필드를 생성하여 필요하지 않은 동안 종종 오버로드합니다 (ViewState가 나머지 페이지보다 무겁습니다).
AJAX를 사용하면 모든 요청에 ​​대해 ViewState가 앞뒤로 전송되어 웹 사이트 속도가 느려지고 트래픽 양이 증가하므로 AJAX를 사용하는 경우 특히 그렇습니다.

해결책은 . net 코드에서 입니다.

2
Julien N

다른 사람들은 그 말을했지만, 집에 흠집을 내지 않았다.

  1. 노력이나 단점이 거의 없습니다.
  2. 제한된 경험으로 HTML 크기를 60 %에서 90 %로 줄였습니다.

HTML에 적용 할 수있는 다른 모든 조정은 더 많은 노력/유지 보수가 필요하며, 단순히 지저분하고 잊어 버리는 것보다 거의 효과가 없습니다. Google이 아니라면 시간 가치가 없습니다. 귀하는 Google이 아닙니다.

(다른 사람들이 언급했듯이 HTML의 일관성이 높을수록 gzipping은 파일의 동일한 문자열을 찾고 반복되는 각 인스턴스를 작은 코드로 바꿉니다. 따라서 속성을 동일한 순서로 유지하고 모든 케이싱을 동일하게 유지하는 것과 같은 저작 관행은 gzipping이 작업을 수행하는 데 도움이 될 수 있습니다.)

아 — 그리고 빌드/서비스 프로세스의 어느 시점에서 HTML을 자동으로 축소하는 경우 더 많은 노력과 유지 관리가 필요하지 않습니다. 일부 HTML 축소 기는 다음과 같습니다.

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

무료 웹 성능 분석 및 최적화 도구 가 많이 있습니다. 생성 한 보고서에서 자체 큰 체크리스트를 컴파일 할 수 있습니다.

다음은 Zoompf 성능 평가의 몇 가지 설명입니다.

  • 동적으로 생성 된 컨텐츠 (이미지)를 피하십시오. 대신 이미지를 정적 이미지 파일로 오프라인으로 그리거나 크기를 조정하십시오.
  • 치수가없는 이미지 태그를 사용하지 마십시오.
  • Google Analytics (& Ads)는 JavaScript 파일의 비동기식 로딩을 지원합니다. 이를 사용하는 경우 비동기 적으로로드하도록 선택할 수 있습니다.
1
mvark

일반적으로 간과되는 전략은 페이지에서 불필요한 HTML 코드를 모두 제거하는 것입니다.

특정 프로젝트에 대해 사용중인 (X) HTML 버전과 웹 사이트 사용 방식에 따라 이러한 전략 중 어떤 전략을 사용해야하는지 결정해야합니다.

(분명히, 나는 새로운 사용자이기 때문에 답변 당 하나 이상의 하이퍼 링크를 게시 할 수 없으므로이 URL을 복사하여 붙여 넣어야합니다.

  • HTML4 및 HTML5에서는 많은 요소에 대해 닫기 태그가 필요하지 않습니다. body 요소의 여는 태그도 필요하지 않습니다. 보다:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

  • HTTP URL의 프로토콜 (http :) 부분은 생략 할 수 있습니다.

meiert.com/en/blog/20090218/performance-and-rfc-2396/

  • <br>와 같은 태그를 사용하면 실제로 XHTML을 사용할 필요가없는 한 XHTML 구문에 사용 된 슬래시 (<br />)를 생략 할 수 있습니다.

  • 다음은 작은 HTML 문서 구조의 예입니다.

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

1
dzollman