Optymalizacja kodu CSS cz.1
Rozmiar kodu CSS na stronach jest bardzo zróżnicowany. Jeśli mamy do czynienia ze stroną pełniącą rolę wizytówki firmy w Internecie to kod CSS zajmuje prawdopodobnie jedynie kilka KB. Wtedy optymalizując kod CSS nie zyskamy zbyt wiele. Jak jest w przypadku dużych portali? Zdarza się, że zawierają kilka plików z kodem CSS o łącznym rozmiarze nawet kilkaset KB!
Niezoptymalizowany kod CSS jest bolączką wielu dużych portali. Wystarczy spojrzeć na kod CSS używany w jednym z najczęściej odwiedzanych polskich portali rozrywkowych:
http://www.wrzuta.pl/css/styles11261903.css
Plik zawiera blisko 5 000 linijek i zajmuje prawie 100 kB. Patrząc tylko tak „na oko” mogę stwierdzić, że można zmniejszyć jego objętość prawie o połowę….
Umieszczenie kodu CSS na stronie
Przejdźmy do rzeczy. Kod CSS należy umieszczać w sekcji head kodu strony, aby umożliwić progresywne renderowanie strony. Można go umieścić na dwa sposoby:
1. Wykorzystując odnośnik do zewnętrznego pliku:
2. Przez znacznik style:
<style type="text/css">...kod CSS...</style>
Którą metodę wybrać? Zależy z jakim typem serwisu mamy do czynienia. Pierwszy sposób jest dobry, np. dla serwisów contentowych, tzn. takich w których użytkownik przechodzi na kolejną podstronę po długim czasie, bo np. czyta artykuł. Przykład: papilot.pl (swoją drogą serwis wyróżniający się wśród polskich portali pod względem SEO). Wadą takiego rozwiązania jest zwiększenie się czasu ładowania strony o jedno żądanie zewnętrzne (zwykłe około 0.3 sekundy). Jednak w tym przypadku ten czas nie jest istotny. Zaletą jest cacheowanie, przeglądarki zapisują w pamięci podręcznej zawartość plików CSS i JS.
Drugi sposób jest dobry dla stron, w których użytkownik nie spędza dużo czasu na jednej stronie, a jego zachowanie polega raczej na dość szybkim przełączaniu się pomiędzy podstronami. Przykłady: google.com, bing.com. Zaletą takiego rozwiązania jest skrócenie czasu ładowania się strony o czas jednego żądania zewnętrznego. Wadą jest brak cacheowania, czyli za każdym razem przeglądarka pobiera kod CSS. W dobie szybkich łączy DSL pobranie dodatkowych kilku kB nie ma większego znaczenia.
Podsumowując, wybór metody umieszczenia styli CSS na stronie jest ściśle uzależniony od charakteru tej strony.
To jest pierwsza część artykułu, możesz przejść do drugiej części artykułu o optymalizacji kodu CSS.
Grzegorz Getka