모든 자산이 포함된 내 웹페이지의 디스크 용량은 1.7MB입니다. 그리고 Chrome 개발 도구(네트워크 탭)에서는 700kb에 불과합니다. 예를 들어, Google에 따르면 내 140kb CSS는 이제 26kb만 무겁습니다. 내 js 번들과 동일하며 330kb에서 90kb로 증가합니다. 또한 개인 세션에서 테스트 중이므로 브라우저 캐싱이 없습니다.
Chrome에서 볼 수 있는 응답 헤더는 다음과 같습니다.
Connection:Keep-Alive
Date:Wed, 30 Sep 2015 14:25:35 GMT
ETag:"e621f4-42c5-520f72d888210"
Keep-Alive:timeout=3, max=100
Server:Apache/2.2.16 (Debian)
Vary:Accept-Encoding
답변1
개발 도구에 모든 내용이 표시되지 않는 것 같습니다.
작은 요청 행을 사용하지 마십시오. 그렇지 않으면 웹 파일의 gzip 압축된 크기만 표시됩니다.
- 서버에서 전송된 gzip 파일 크기
- 브라우저가 gzip 파일을 추출했으며 여기에는 다음과 같은 KB가 포함되어 있습니다.
이미지가 더 큰 압축 크기로 표시되는 이유는 PNG 및 JPG가 압축 형식이므로 웹 서버가 실제로 이미지를 다시 압축하려고 시도하여 불필요한 오버헤드를 생성하고 추가 오버헤드가 CPU 시간 낭비와 추가 오버헤드로 전환되기 때문입니다. KB.
Apache를 실행 중이고 액세스 권한이 있는 경우 httpd.conf다음과 같은 줄을 추가하는 것이 좋습니다.
# 이 이미지를 압축하지 마세요 SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) no-gzip dont-vary
이는 이미 최적화되고 압축된 이미지의 경우에도 마찬가지입니다.
내 스크린샷에서 1+2는 더 크고 최적화되지 않은 이미지이지만 3.jpg는 이미 기본 상태이므로 압축은 #3에는 도움이 되지 않았지만 1+2에는 도움이 되었습니다.
