HTTP-Anfragen vs Dateigröße?

9

An welchem ​​Punkt ist es besser, mehr HTTP-Anfragen zu haben, wenn das bedeutet, dass die Seitengröße sinkt? Zum Beispiel, wenn ich ein Bild habe, das 20KB ist, wie viel Größe müsste ich reduzieren, bevor es sinnvoller ist, zwei Bilder zu verwenden?

    
Mike H 24.03.2012, 20:54
quelle

1 Antwort

17

Die praktische Antwort ist nie , besonders wenn Sie von relativ kleinen Datenmengen wie einem Kilobyte oder zwei sprechen.

Der wahre Feind der Leistung einer Webseite ist nicht die Anzahl der übertragenen Bytes; es ist eher Netzwerklatenz . Nehmen wir Ihr Beispiel und betrachten Sie eine 5-Mbit / s-Verbindung (die durchschnittliche Verbindungsgeschwindigkeit in den USA ist etwas darüber) mit einer Ping-Zeit von 80ms auf Ihrem Server:

%Vor%

Diese "Optimierung" kostet nur mindestens 62ms, wobei alle anderen Variablen gleich sind. In der realen Welt würde ich wetten, dass die Leistung aufgrund von zusätzlichen Serverlasten noch schlimmer wäre.

Bedenken Sie auch, dass Sie jetzt eine zusätzliche der wenigen parallelen Anfragen verwenden, die ein Browser (je nach Browser zwischen 2 und 8) für ein halbes Bild statt für etwas Wertvolleres wie Skript, CSS, anlegt oder ein anderes nicht spendables Bild. Dies verlangsamt die Ladezeit Ihrer Seite.

Außerdem habe ich den Verdacht, dass Ihre gesamte Prämisse fehlerhaft ist . Im Allgemeinen kann das Aufteilen eines Bilds in zwei Dateien nicht wirklich zu einer kleineren Gesamtdateigröße führen, da jedes Bildcontainerformat über Kopfdaten verfügt. Zum Beispiel hat eine PNG-Datei mindestens 57 Bytes Overhead vor irgendwelchen tatsächlichen Bilddaten. Darüber hinaus bedeutet eine zusätzliche HTTP-Anforderung einen zusätzlichen ± 800-900 Byte Overhead über die Leitung.

Ich vermute, dass Sie feststellen werden, dass eine richtig komprimierte PNG-Datei nicht größer als die Gesamtgröße von zwei PNGs ist, die dasselbe darstellen Bild.

Ссылка (1027 Byte)

Ссылка Ссылка (730 + 809 = 1539 Bytes)

Auch wenn das erste einzelne PNG 150x100 Pixel von "totem" transparentem Raum hat, ist es 33% kleiner als die beiden PNGs, die dasselbe Bild darstellen. (Ignorieren Sie, dass ich die <img> -Tags hier nicht richtig ausrichten kann, damit die beiden Beispiele gleich aussehen.)

    
josh3736 24.03.2012 23:46
quelle

Tags und Links