HTML 또는 XHTML 페이지 크기를 줄이기 위해 수행되는 일반적인 최적화는 무엇입니까? 떠오르는 일부는 다음과 같습니다.
- 댓글 삭제
- 불필요한 공백을 제거하고
- 반복적 인 인라인 스타일을 CSS 스타일 시트로 이동
- 기타
다른 사람은 무엇입니까? 어느 것이 가장 큰 벅스 팟을 제공합니까? 아니면 툴이나 모듈에 의해 자동으로 수행 될 수 있습니까?
답변
Google은 페이로드 크기를 최소화 하기위한 권장 사항을 설명하고 설명했습니다 . 여기에는 다음 기술이 포함됩니다.
- 압축 사용
- 사용하지 않는 CSS 제거
- 자바 스크립트 축소
- CSS 축소
- HTML 축소
- 자바 스크립트 로딩 지연
- 이미지 최적화
- 스케일 된 이미지 제공
- 일관된 URL에서 리소스 제공
이러한 제안은 Page Speed 라는 오픈 소스 Firefox / Firebug 애드온 프로젝트의 일부입니다 . Yahoo!의 YSlow 플러그인과 유사합니다 . 실제 Page Speed 애드온은 해당 목록에서 자세히 설명하는 것보다 더 많은 최적화를 확인합니다. Page Speed 사용 지침도 제공됩니다.
웹 사이트 속도 향상을위한 Yahoo!의 모범 사례 는 다음과 같은 모범 사례를 식별합니다.
- HTTP 요청 최소화
- 컨텐츠 전달 네트워크 사용
- 만료 또는 캐시 제어 헤더 추가
- Gzip 부품
- 스타일 시트를 맨 위에 놓기
- 스크립트를 맨 아래에 놓으십시오
- CSS 표현식 피하기
- JavaScript와 CSS를 외부로 만들기
- DNS 조회 감소
- …
(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에도 적용됩니다)
문제는,
- GZIP는 90 %의 작업을 수행하므로 미시적 최적화입니다. 아마도 당신이 구글이나 야후라면
- “소스보기”에서 완전히 읽을 수없는 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>