Gibt es eine einfache Möglichkeit, das Ausmaß der Komprimierung in Chrome zu ermitteln?

33

Ich bin gerade damit beschäftigt zu überprüfen, wie mein Webserver gzip ausführt. Ich bin jetzt zuversichtlich, dass gzip aktiviert ist, da Chrome die Inhaltskodierung zeigt: gzip-Header.

Gibt es eine einfache Möglichkeit, festzustellen, wie stark eine Datei in den Chrome-Entwicklertools komprimiert wurde?

Peter Smit
quelle
1
Wenn es ein Plugin zum Anzeigen von HTTP-Headern gibt, können Sie die Dokumentgröße einfach mit der Content-LengthKopfzeile vergleichen.
Majestätsbeleidigung

Antworten:

32

Aktualisierte Antwort für 2017 : Ja.

Die Größenspalte auf der Registerkarte "Netzwerk" in den Chrome Developer Tools enthält sowohl die komprimierte als auch die nicht komprimierte Größe für gzip, brotli und alle zukünftigen Elemente. Z.B:

Hier beträgt die komprimierte Größe 242 KB, die unkomprimierte Größe 1,1 MB

Um beides zu sehen, stellen Sie sicher, dass Devtools große Anforderungszeilen anzeigt . Es ist das erste Symbol in den "Ansicht" -Optionen in der netzwerkspezifischen Symbolleiste.

Mikemaccana
quelle
7
Vielen Dank. Das ist leicht zu übersehen. Man muss auf "Use large request
rows
Sie können auch mit der rechten Maustaste auf die Spaltenüberschriften klicken und die Antwortüberschrift "Inhaltscodierung" anzeigen. Nachdem Sie dies getan haben, können Sie nach der Spalte sortieren, um eine schnelle Liste aller gezippten Antworten zu erhalten.
Thirdender
18

Die mit Abstand einfachste Methode ist die Verwendung eines Online-Tools. GIDZipTest zeigt Ihnen viele Details: Originalgröße, komprimierte Größe und Komprimierungsprozentsatz.


In Chrome ist dies jedoch mit ein wenig Aufwand möglich. (Aktualisiert für das neueste Chrome, September 2011.)

Wechseln Sie in den Entwicklertools zur Registerkarte "Netzwerk" und laden Sie die Seite neu. Sie sehen eine Liste aller abgerufenen Dateien in der linken Spalte. Klicken Sie links auf die entsprechende Seite / Datei und dann rechts auf die Registerkarte "Überschriften".

Unter "Antwortheader" sollte "Content-Encoding: gzip" gefolgt von einem "Content-Length" -Header angezeigt werden. Dies ist die Größe des komprimierten Inhalts.

Das Ermitteln der unkomprimierten Größe ist schwieriger. Wenn Sie statische Dateien bereitstellen, können Sie einfach deren Größe überprüfen. Für dynamischen Inhalt müssen Sie den HTML-Code in einen Texteditor kopieren und speichern, um die genaue Größe zu überprüfen.

Verärgerte Ziege
quelle
Wo befindet sich die Option "Ressourcenverfolgung aktivieren"?
Pacerier
@Pacerier: In der neuesten Version von Chrome ist das etwas anders. Ich habe meine Antwort mit neuen Anweisungen aktualisiert.
DisgruntledGoat
Ordentliches Werkzeug. Ich konnte nicht herausfinden, warum Antworten, die von meiner Google App Engine-App gesendet wurden, nicht die komprimierte Größe zeigten. Vom SDK gesendete Antworten (dh localhost) werden nicht komprimiert, während Antworten aus der Cloud komprimiert werden. Es stellt sich heraus, dass Chrome perfekt funktioniert.
Evan Plaice,
9

Update für 2017

Bei Verwendung großer Symbole zeigen die Chrome-Entwickler-Tools in den Netzwerkregistern eine Größe vor und nach der Komprimierung an.

Ich bestätigte durch Aus- und Einschalten von gzip auf meinem Webserver.

Screenshot der Chrome-Entwicklerwerkzeuge

Bildbeschreibung hier eingeben

CodeMonkey
quelle
5

Ein anderer Weg, dies zu erreichen, ist mit cURL:

curl -i -H "Accept-Encoding: gzip" http://someurl.com | wc -c

gegen

curl -i http://someurl.com | wc -c

Die nach jedem Befehl angezeigte Anzahl ist die Anzahl der Bytes, die die Leitung durchquert haben.

Stephen
quelle
2

Ich habe gehört, die in Chrom ist aufgrund eines Fehlers im Webkit fehlerhaft.

Das Y Slow Plugin für Firefox leistet hervorragende Arbeit. Gehen Sie zur Registerkarte Komponenten und erweitern Sie den Komponententyp, für den Sie die Werte festlegen möchten. Es wird die Originalgröße und die GZIP-Größe angezeigt.

XOPJ
quelle
2

Dies ist kein spezielles Chrome-Tool, aber ich verwende Fiddler, wenn ich HTTP-Verkehrs- / Header-Informationen überprüfe. Es ist ein großartiges Tool, funktioniert in jedem Browser und ist kostenlos!

BradB
quelle
1
Es gibt jetzt auch eine Chrome-Erweiterungsversion von Fiddler !
karlbecker_com
Vielen Dank für den Vorschlag. Fiddler zeigt keine "unkomprimierte Größe" an, aber Sie können Spalten für "CompressionSavings" und "CompressionSavings%" hinzufügen. Fügen Sie sie hinzu, indem Sie mit der rechten Maustaste auf die Spalten klicken ==> "Spalten anpassen" ==> "Verschiedenes" ==> Dropdown-Liste "Feldname".
JasonS
0

Für alle, die immer noch von einer allgemeinen Google-Suche hierher kommen (wie ich), ist es in modernen Versionen von Firefox möglich, die "rohe" und gezippte Größe direkt aus den Devtools heraus zu sehen, indem die Spalten "Übertragene Größe" und "Größe" verglichen werden. "Größe" ist die ungefähre Größe der Antwort, "Übertragene Größe" ist die tatsächliche Größe der für die Antwort übertragenen Daten, die im Falle von gzip unter der tatsächlichen Größe liegen kann, wie im folgenden Bild dargestellt, oder sogar 0 in In diesem Fall wurde die Antwort im Client zwischengespeichert.

Firefox Devtools gzipped Größe

Lieben
quelle