Pierwszy krok w moim cyklu wpisów na temat „Optymalizacji stron internetowych”.

Mając na myśli optymalizację CSS myślę o uproszczeniu kodu i skróceniu do jak najmniejszej liczby wierszy. Poniżej opiszę przykłady skracania kodu, które w rezultacie poprawią czytelność i rozmiar pliku. Jeśli poruszam temat rozmiaru plików, to są dostępne darmowe programy do optymalizacji plików CSS takie jak Icey’s CSS Compressor czy CleanCSS ich średnia skuteczność to około 25%, czyli o tyle potrafią zmniejszyć rozmiar pliku CSS. Ich wada po takiej kompresji kod staje się nieczytelny, innymi słowy nasze piękne drzewko CSS i poukładane klasy zlewane są w jedną całość. Jeśli ktoś dysponuje portalem o średniej unikalnej porównywalnej do największych portali to jest to narzędzie pozwalające zaoszczędzić kilka cennych KB. Jednak musimy pamiętać o zachowaniu kopi z drzewkiem ponieważ edycja takiego skompresowanego CSS przyprawia o ból głowy. Jest to chyba ich jedyna wada przez którą osobiście nie używam takich czarodziejów. Klient czy programista od Back-end’u oczekuje czytelnego, prostego i łatwego w edycji CSS, a nie koszmarka z którego nie wiele można wyczytać.
Czytaj dalej…

Optymalizacja stron temat dość rzadko poruszany przy Front-end’dzie. Jeżeli zajrzymy do Back-endu i stron poświęconych programowaniu optymalizacja i szybkość działania danego skryptu czy programu jest bardzo istotna. Jednak co z szybkiej wyszukiwarki czy innego Back-end’owego dobrodziejstwa skoro nasza strona wczytuje się 10s. Postanowiłem poświęcić optymalizacji stron cały cykl artykułów. Każdy kto zajmuje się Front-end’em na poważnie powinien skupić się nie tylko na identycznym wyglądzie strony pod najpopularniejszymi przeglądarkami, ale również na optymalizacji strony w kilku płaszczyznach.

Optymalizacja CSS
Czyli jak zmniejszyć rozmiar naszych styli.
Optymalizacja HTML pod względem SEO
Czyli jak dobierać znaczniki aby wyszukiwarki nas dobrze zrozumiały.
Optymalizacja grafiki PNG, JPG, GIF
Czyli jak zmniejszyć rozmiar naszych plików graficznych jednocześnie nie tracąc ich jakości.
Poprawna semantyka HTML
Czyli jak poprawnie używać znaczników, podpisywać klasy czy tworzyć drzewko html.
Usability
Czyli projektowanie funkcjonalnych serwisów internetowych.