Redukcja CSS dla szybszego ładowania / mniejszej przepustowości

Czy kompaktowanie CSS / Usuwanie nieużywanych reguł dla konkretnej strony jest opłacalne pod względem przepustowości, czy też możemy polegać na buforowaniu (nagłówki / ostatnia modyfikacja), aby usunąć ten narzut?

Twoje zdrowie

Powodzenia z wersją beta wszystkim!

Zmniejszenie rozmiaru plików z pewnością zmniejszy przepustowość i skróci czas ładowania strony. Gdy użytkownik odwiedza Twoją witrynę po raz pierwszy, nie będzie niczego w pamięci podręcznej, a dla większości witryn odwiedzający po raz pierwszy stanowią większość ruchu.

Dodatkowo upewnij się, że masz włączoną kompresję gzip. Zrobi to drastycznie, aby zmniejszyć przepustowość.

Nie sądzę, że to albo. Zmniejszenie rozmiaru pliku pomoże użytkownikowi po raz pierwszy uzyskać dostęp do pliku. Buforowanie pomoże podczas ich drugiej wizyty.

Jest o wiele więcej potencjalnych miejsc do optymalizacji, które będą miały większy wpływ ...

Jeśli szukasz wyłącznie wzrostu wydajności, optymalizacja źródła CSS jest dość niska w łańcuchu pokarmowym.

Nadmiar cruft w źródle CSS będzie miał niewielkie trafienie przy pierwszym załadowaniu arkuszy stylów. Od tego momentu problem powinien zająć buforowanie.

Za każdym razem, gdy możesz usunąć rzeczy, poprawisz szybkość ładowania, choć tylko nieznacznie. Dobrą praktyką jest również usuwanie rzeczy, których nie używasz również dla przejrzystości kodu.

Podejrzewam, że zależy to od dynamiki Twojej witryny. Jeśli masz wielu powtarzających się użytkowników i niewielu nowych, buforowanie prawdopodobnie wystarczy. Jeśli jednak masz wielu nowych użytkowników (a zwłaszcza jeśli chcesz zrobić dobre pierwsze wrażenie), myślę, że powinieneś jak najbardziej zmniejszyć rozmiar swojego CSS.

Usunięcie nieużywanego CSS oczywiście skróci czas ładowania na jednej stronie, ale musisz również zrównoważyć to z efektem na kilku stronach. Chcesz także uniknąć zbyt wielu żądań HTTP.

Pamiętaj, gzipping CSS jest zdecydowanie najskuteczniejszym sposobem na przyspieszenie ładowania CSS. Różnica między jednym plikiem, w którym jest wszystko, a drugim z kilkoma usuniętymi niepotrzebnymi blokami jest znikoma po gzip.

Nawet jeśli wydajność zostanie zmniejszona przez usunięcie nieużywanego CSS na stronie (i jestem całkiem przekonany, że buforowanie przeważałoby nad tym, chyba że mówisz o radykalnie różnych stronach), musisz wziąć pod uwagę czas konserwacji wymagany do tego . Chyba że jesteś Google, prawdopodobnie nie warto spędzać kilku dni w ciągu życia witryny, aby zaoszczędzić każdemu użytkownikowi jedną dziesiątą sekundy.

Wiele z tego ma związek z profilem użytkowania witryny. Jeśli jesteś naprawdę lepki, wtedy buforowanie wygrywa bez reszty. Jeśli jednak masz wysoki współczynnik odrzuceń, możesz lepiej korzystać ze zoptymalizowanego CSS (lub tracić czas na optymalizację CSS, co sprawia, że ​​Twoja strona jest trudniejsza!).

Jednym ze sposobów, które można zastosować, jeśli masz znaczniki specyficzne dla strony, jest posiadanie ogólnego pliku CSS dla całej witryny i osadzanie reguł dla każdej strony w nagłówku dokumentu HTML.

Możesz uzyskać to, co najlepsze z obu światów, zminimalizować plik w czasie wykonywania i wypakować dane wyjściowe.
Plik źródłowy jest nadal czytelny, gdy trzeba go edytować, ale jest skompresowany podczas pobierania

po pierwsze: użyj htaccess, aby powiedzieć apache'owi, aby traktował wszystkie pliki css jako skrypty php i kompresował dane wyjściowe, gdy jest typu text / css

w .htaccess AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

po drugie: użyj buforowania danych wyjściowych z funkcją wywołania zwrotnego, aby zminimalizować kod css przed rozpoczęciem pobierania, a także ustaw czas wygaśnięcia, aby plik był buforowany

w twoim pliku css

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

Po trzecie: zysk?