Dlaczego moja strona internetowa jest o połowę mniejsza w przeglądarce niż na dysku twardym?

0

Moja strona ze wszystkimi zasobami ma 1,7 MB na dysku. I tylko 700 kb w narzędziu chrome dev (karta sieciowa). Na przykład, mój 140kb css jest teraz, według Google'a, tylko 26kb ciężki. To samo dotyczy mojego pakietu js, zmienia się z 330 kb na 90. Ponadto testowałem na sesji prywatnej, więc nie buforowałem przeglądarki.

Nagłówki odpowiedzi, które widzę na 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

oś czasu sieci

prawdziwy rozmiar

problem z gzip

Antonin Cezard
źródło
Jak uzyskujesz dostęp do strony? Czy jest hostowany na serwerze, czy otwierasz go lokalnie?
slhck,
jest na lokalnym serwerze php 5.3
Antonin Cezard
3
Czy twój serwer obsługuje kompresję gzip?
heavyd
Z jakiego serwera korzystasz? Apacz? Nginx?
heavyd
Zrzut ekranu Twojej osi czasu devtools sieci byłby bardzo przydatny ...
MonkeyZeus

Odpowiedzi:

3

Wygląda na to, że nie widzisz wszystkiego w narzędziach programistycznych.

Nie używaj małych wierszy żądań, bo zobaczysz TYLKO spakowany rozmiar plików internetowych.

  1. Rozmiar skompresowanego pliku wysłanego z serwera
  2. Twoja przeglądarka wyodrębniła plik spakowany gzip i zawiera on tak wiele KB

wprowadź opis zdjęcia tutaj


Powodem, dla którego twoje obrazy wykazują większy rozmiar kompresji, jest to, że PNG i JPG są formatem skompresowanym, więc twój serwer internetowy faktycznie generuje niepotrzebny narzut, próbując go ponownie skompresować, a ten dodatkowy narzut jest tłumaczony zarówno na zmarnowany czas procesora, jak i dodatkowe KB.

Jeśli korzystasz z Apache i masz do niego dostęp httpd.conf, sugeruję dodanie do niego wiersza wyglądającego tak:

# Nie kompresuj tych obrazów
SetEnvIfNoCase Request_URI. (?: gif | jpe? G | jpg | ico | png) no-gzip nie zmieniaj

Dotyczy to obrazów, które są już mocno zoptymalizowane i skompresowane.

Na moim zrzucie ekranu widać, że 1 + 2 są większymi i niezoptymalizowanymi obrazami, ale 3.jpg jest już w wersji podstawowej, więc kompresja nie pomogła # 3, ale pomogła 1 + 2:

wprowadź opis zdjęcia tutaj

MonkeyZeus
źródło
tak, teraz widzę obie wartości. Ale w przypadku plików takich jak obrazy i czcionki pierwsza wartość jest zawsze wyższa niż druga wartość. Dla js i css jest odwrotnie
Antonin Cezard
@topleft Cóż, to dziwne, czy możesz zaktualizować swoje pytanie innym zrzutem ekranu?
MonkeyZeus
Zaktualizowałem ekran, ponieważ widać, że wartości wydają się dziwne?
Antonin Cezard,
@topleft Dzięki, proszę spojrzeć na moją zaktualizowaną odpowiedź
MonkeyZeus
Teraz rozumiem problem, dzięki. Ale czy twoje obrazy nie byłyby tego samego rozmiaru w obu liniach? Widzę, że nie ma tego na twoim zrzucie ekranu
Antonin Cezard