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

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

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

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

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

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

다음 은 Apache 및 IIS 에서 Gzip 을 설정하는 방법에 대한 링크가 있는 Gzip에 대한 자세한 설명입니다 .

WebReference에 관한 기사에 따르면 mod_gzip Apache 모듈을 사용할 때 다음과 같은 성능 향상이 있습니다.

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

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

나는 한 HTML에서 공백을 제거 연주 Gzip으로 압축 한 후 페이로드 만 10 %의 크기 감소를 조금하고, 보았다.

실제로 공백과 줄 바꿈 제거는 압축이 우리에게 해줄 일을하고 있습니다. 우리는 단지 인간이 지원하는 효율성을 추가하고 있습니다.

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

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

문제는,

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

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

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

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

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

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

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

또한 Google 의 폐쇄 컴파일러 를 확인하십시오 . 나는 그것을 사용하지는 않았지만 자바 스크립트를 다운로드하고 더 빠르게 실행한다고 주장합니다.

다른 사람들이 말했듯이, 가장 큰 이점은 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>

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

해결책은 .net 코드에 있습니다.

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

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

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

일반적으로 간과되는 전략은 페이지에서 불필요한 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/

다른 사람들은 그것을 말했지만, 그들은 집에 포인트를 충분히 짓밟 지 못했습니다 : gzipping.

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

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

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

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

/programming/728260/html-minification