Warum ist meine Webseite im Browser halb so groß wie auf der Festplatte?

Warum ist meine Webseite im Browser halb so groß wie auf der Festplatte?

Meine Webseite mit all ihren Assets ist 1,7 MB groß auf der Festplatte. Und nur 700 KB im Chrome Dev Tool (Registerkarte „Netzwerk“). Beispielsweise ist mein 140 KB CSS laut Google jetzt nur noch 26 KB groß. Dasselbe gilt für mein JS-Paket, es geht von 330 KB auf 90 KB. Außerdem habe ich es in einer privaten Sitzung getestet, also ohne Browser-Caching.

Antwort-Header, die ich in Chrome sehen kann:

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

Netzwerk-Zeitleiste

echte Größe

GZIP-Problem

Antwort1

Es sieht so aus, als ob Sie in Ihren Entwicklertools nicht alles sehen.

Verwenden Sie keine kleinen Anforderungszeilen, da Ihnen sonst NUR die gzippte Größe Ihrer Webdateien angezeigt wird.

  1. Die vom Server gesendete gzippte Dateigröße
  2. Ihr Browser hat die gzippte Datei extrahiert und sie enthält so viele KB

Bildbeschreibung hier eingeben


Der Grund dafür, dass Ihre Bilder eine größere Komprimierungsgröße aufweisen, liegt darin, dass PNG und JPG komprimierte Formate sind. Ihr Webserver erzeugt also durch den Versuch einer erneuten Komprimierung tatsächlich unnötigen Overhead und dieser zusätzliche Overhead führt sowohl zu verschwendeter CPU-Zeit als auch zu zusätzlichen KB.

Wenn Sie Apache ausführen und Zugriff darauf haben httpd.conf, würde ich vorschlagen, eine Zeile hinzuzufügen, die wie folgt aussieht:

# Diese Bilder nicht komprimieren
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) kein GZIP, nicht variieren

Dies gilt für Bilder, die bereits stark optimiert und komprimiert sind.

In meinem Screenshot können Sie sehen, dass 1+2 größere und nicht optimierte Bilder sind, aber 3.jpg ist bereits auf das Wesentliche reduziert, sodass die Komprimierung bei Nr. 3 nicht geholfen hat, bei 1+2 jedoch schon:

Bildbeschreibung hier eingeben

verwandte Informationen