Optymalizacja kodu CSS cz.4
Ostatnim krokiem optymalizacji kodu CSS jest usunięcie „białych” znaków oraz znaków nowej linii. Do tego celu doskonale nadają się programy kompresujące kod CSS dostępne online. Przykładowo jeśli jako daną wejściową podamy kod :
body{
font-family:Times New Roman,sans-serif;
font-size:Italic;
font-size:10pt;
}
td{
font-family:Times New Roman,sans-serif;
font-size:Italic;
font-size:10pt;
}
#top{
position:absolute;
text-align:center;
width:765;
height:293;
background:url(img/fin1.jpg) no-repeat
}
a.menu1{
font-family:Times New Roman,sans-serif;
font-size:10pt;
color:#333333;
font-weight:bold;
text-decoration:Italic;
}
Otrzymamy:
#top{background:url(img/fin1.jpg) no-repeat;height:293px;position:absolute;
text-align:center;width:765px}a.menu1{color:#333;font-family:Times New Roman,
sans-serif;font-size:10pt;fontweight:700;text-decoration:Italic}body,td{
font-family:Times New Roman, sans-serif;font-size:10pt}
Ostatni krok optymalizacji zmniejszył rozmiar pliku z 413 do 279 bitów, czyli o ponad 32%. Warto zauważyć, że kod przed optymalizacją i po optymalizacji działa identycznie.
W przedstawionych powyżej przykładach zysk z optymalizacji kodu CSS nie jest duży, ponieważ wyniósł od kilkunastu do kilkuset bitów. Należy jednak pamiętać, że na stronach WWW spotyka się pliki CSS o objętości 100KB lub nawet 200KB. Na wspomnianej wcześniej stronie wrzuta.pl jeden z arkuszy styli CSS ma objętość prawie 100KB. Jeśli wziąć pod uwagę użytkowników łączących się z Internetem za pomocą telefonów komórkowych lub korzystających z łączy radiowych to optymalizacja kodu CSS nabiera jeszcze większego sensu.
To jest czwarta część artykułu, możesz przejść do pierwszej części artykułu o optymalizacji kodu CSS.
Grzegorz Getka