2009-10-19 20 views
13

Jak zmniejszyć liczbę żądań http css?Jak zmniejszyć liczbę żądań http css?

1 duży plik css

plik

lub jeden css który importowanie wszystkich innych css

jest to samo?

Jakie są korzyści z korzystania z tego

 
@import url('/css/typography.css'); 
@import url('/css/layout.css'); 
@import url('/css/color.css'); 

Odpowiedz

11

1 duży plik css lub jeden plik css, który importowanie wszystkich innych css jest to samo?

No jak klient nadal musi załadować każdy plik CSS (z jednym HTTP żądanie każdego)

kilka linków, aby dowiedzieć się więcej o zmniejszenie żądań HTTP:

Jeśli korzystasz z przeglądarki Firefox, bardzo polecam Firebug, który oferuje widok ze szczegółowymi informacjami o żądaniach HTTP.
EDIT:
Jak fly-by-wire zwraca uwagę w komentarzach: YSlow to rozszerzenie do Firefoksa, który integruje się z Firebug analizować skuteczność strony internetowej

3 proste rzeczy chciałbym spróbować najpierw:

  • Kombajny globalny CSS (rzeczy, które używasz na każdej stronie)
  • Kompresuj CSS (z YUI compressor lub innym narzędziem online)
  • Inline strona specyficzne rzeczy (rzeczy, które nie są współdzielone między stron)

Większość z tych rzeczy, stosuje się również do plików JavaScript.

+4

A jeśli używasz Firebug, bardzo polecam YSlow – flybywire

3

A import styl będzie nadal wyzwalać żądania HTTP. Polecam obsłużyć tylko jeden plik CSS. Można połączyć wiele plików CSS za pomocą importu ze strony serwera, aby wysłać jeden plik bez zarządzania wszystkimi regułami CSS z jednego pliku.

+2

I zminimalizuj z tego życie! – random

0

Możesz użyć komendy żądania HTTP, aby określić listę wspólnych plików css, które powinny zostać dostarczone jako pojedynczy plik css do przeglądarki. Zmniejszy to rozmiar, a także znacznie zmniejszy liczbę żądań.

Dobrym przykładem tej pracy w kontekście Net: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

1

W przypadku korzystania asp.net mvc - sprawdź this approach. Nadal działa jak urok. Zasadniczo - używa on httphandler do łączenia, kompresowania i buforowania plików aktywów.

Ale to jest specyficzne dla asp.net. Nie mogę powiedzieć, czy to pomaga.


Offtopic:

Tę samą technikę można zastosować do plików Javascript (to wspaniałe uczucie mieć ładne strukturyzowane pliki JS i nieruchomych - aby uniknąć wielu żądań HTTP).

Zdjęcia - sprawdź numer spriting. Ten bookmarklet może być również bardzo pomocny.

1

Czy chcesz zmniejszyć liczbę żądań http lub ich rozmiarów?

Polecam umieścić wszystkie najczęściej używane selektorów do jednego dużego pliku CSS (wraz ze wszystkimi swoimi libraries/wtyczek używanych) i minify go internetowych optymalizatorzy/minimizers

0

pisałem kilka postów na blogu na ten temat . Zobacz Supercharging CSS in PHP. Mimo że jest napisany dla PHP, zasady są uniwersalne.

Zasadniczo Twoim celem jest zmniejszenie zewnętrznych żądań HTTP. Możesz to zrobić za pomocą kombinacji łączenia plików CSS i/lub wersjonowania plików CSS i używania przyszłego nagłówka Expires.

Wreszcie, zawsze powinieneś Gzip CSS (i JavaScript), jeśli klient je akceptuje.

1

Jeśli będzie obsługujących pliki css z farmy internetowej lub jest to miejsce duża ilość, chciałbym zaproponować zaglądając do: http://code.google.com/p/talifun-web/wiki/CrusherModule Używa Watcher pliku w poszukiwaniu zmian na CSS/JS akta. Pliki css/js należą do zestawów plików określonych w pliku web.config. Po wykryciu zmiany w jednym z plików js/css komponentu tworzy on nowy zmiksowany plik css lub jss dla zestawu plików.

Ma również proste sterowanie wyjściami do zestawów plików css/js. Kontrola doda zapytanie do quizu z hashem pliku, więc masz gwarancję poprawnej zawartości pliku.

Oznacza to, że można bezpośrednio obsługiwać zmanipulowany plik przy użyciu usług IIS. Następnie możesz skorzystać z buforowania trybu jądra. oznacza również, że nie trzeba się martwić o wdrożeniach buggy wsparcia nagłówka http:

  • ETag
  • Wygasa
  • Last-Modified
  • Jeśli-Match
  • If-None-Match
  • If-Modified-Since
  • If-Unmodified-Since
  • O ile nie zmodyfikowano - od

Lepiej skompresować wszystkie pliki js/css do jednego olbrzymiego pliku dla całej witryny, a następnie dynamicznie wyświetlać tylko wymagane pliki js/css dla strony. Przeglądarki mogą buforować jeden gigantyczny plik, a następnie nigdy nie muszą się martwić o ponowne pobranie css/js z witryny.

Powiązane problemy