Dlaczego warto optymalizowa
Najwiksze witryny na wiecie w cigu sekundy musz odpowiedzie nawet na kilka tysicy zapyta. Myl teraz o popularnej Wikipedii, której to serwery pracuj nieustannie na do wysokich obrotach, ale przy tym nie koniecznie szczególnie si mcz. Czy moecie sobie wyobrazi ich dziaanie gdyby nagle odci ich od moliwoci „cachowania” zapyta do baz danych oraz kompresowania zwracanej treci w locie? Z dowiadczenia wiem, e nawet najtsze serwery i cza odmówiyby posuszestwa.
Jednake w tym wpisie nie bd omawia techniki, takiej jak na przykad owe buforowanie wyników zapyta bazodanowych, czy pakowania zwracanej treci po stornie serwera. Zwróc jednak uwag na bardzo proste i praktyczne narzdzie, które z pewnoci mio zaskoczy projektantów stron WWW, którzy jeszcze z podobnych narzdzi nie korzystali.
Minify to kompresor rónorakiego kodu. Obsuguje pliki CSS oraz JS. Do plików PHP istniej oczywicie podobne rozwizania, ale w tym wpisie skupi si na optymalizacji arkusza stylów.
Skrypt dostpny jest online pod tym linkiem: Minify CSS Compresor
Jak to dziaa?
Zasada dziaania jest oczywicie banalna. Zaómy zatem, e mamy swój kod CSS na przykad ja posu si takim wstukanym na szybko nic nie robicym arkuszem.
body{
font-family: Arial;
font-size: 12pt;
color: #ffffff;
margin: 0;
}
.main{
font-size: 12pt;
color: #ff0000;
}
.container{
font-size: 12pt;
color: #ff0000;
}
.super-container{
font-size: 12pt;
color: #ff0000;
}
.submain{
color: #ff0000;
margin: 0;
}
.mycalss{
overflow: hidden;
}
.newstyleclass{
font-family: Georgia;
margin: 15px;
overflow: hidden;
}
W powyszym przykadzie trzy klasy (main, container i super-container) maj identyczn zawarto. W trakcie pisania duych arkuszy stylów to si przytrafia i moe atwo zosta przeoczone. I tutaj z pomoc przychodzi kompresor, który po wczeniu funkcji „Regroup selectors: Merge selectors with the same properties”, czyli zczanie selektorów klas z identycznymi wasnociami, wyapie kade takie powtórzenie i scali je do kupy. Dodatkowo mona aktywowa funkcj kompresowania kolorów oraz wielu innych waciwoci. Poniszy przykad zosta zoptymalizowany w trybie „Standard” polegajcym na zachowaniu równowagi pomidzy czytelnoci, a objtoci.
body {
font-family:Arial;
font-size:12pt;
color:#fff;
margin:0;
}
.submain {
color:red;
margin:0;
}
.mycalss {
overflow:hidden;
}
.newstyleclass {
font-family:Georgia;
overflow:hidden;
margin:15px;
}
.main,.container,.super-container {
font-size:12pt;
color:red;
}
Przyjrzyjmy si teraz jak bdzie wyglda kod w trybie „High”, który zmniejsza czytelno kodu, ale proporcjonalnie do objtoci caego pliku. Dodatkowo aktywowaem równie funkcj, która usuwa rednik w ostatniej waciwoci selektora.
body{font-family:Arial;font-size:12pt;color:#fff;margin:0}
.submain{color:red;margin:0}
.mycalss{overflow:hidden}
.newstyleclass{font-family:Georgia;overflow:hidden;margin:15px}
.main,.container,.super-container{font-size:12pt;color:red}
A co jeli chcemy upchn wszystko w jedn linijk, gdy zupenie nie zaley nam na jakiejkolwiek czytelnoci kodu? Nie ma problemu – tryb „Higest” zrobi to szybko i precyzyjnie. Oto nasz kod po zastosowaniu najwikszej kompresji.
body{font-family:Arial;font-size:12pt;color:#fff;margin:0}.submain{color:red;margin:0}.mycalss{overflow:hidden}.newstyleclass{font-family:Georgia;overflow:hidden;margin:15px}.main,.container,.super-container{font-size:12pt;color:red}
Oczywicie w przypadku tak maej objtoci pliku wszystko jest widoczne, ale wyobracie sobie odczyt arkusza liczcego sobie kilkaset linijek po przetworzeniu do takiego stopnia, gdzie praktycznie usuwane s znaki nowej linii.
Podsumowanie i wnioski
Po zastosowaniu zabiegu kompresji udao si zmniejszy objto pliku CSS prawie o poow. Skrypt po kadym cyklu informuje o tym, ile zawartoci udao si odci od arkusza. Narzdzie moe by wietnym uzupenieniem w przypadku kiedy zaley nam na optymalnym dziaaniu serwisu cieszcego si du popularnoci, ale równie pozwoli zachowa porzdek w kodzie co czyni je praktycznym dla kadego.
Podstawow wad moe by moliwo grupowania do kupy tylko tych selektorów, które posiadaj identyczne wszystkie waciwoci, a nie na przykad wybieranie z poszczególnych selektorów pojedynczych wasnoci, które si powtarzaj.
Jednake skrypt daje moliwo wprowadzania wasnego szablonu przetwarzania co czyni go jeszcze bardziej konfigurowalnym, a jego uyteczno sprawia, e bez wzgldu na wspomnian wad jest on godny uwagi.
Thank you so much for this aricelt, it saved me time!