Recimo da ste kreirali ste svoj wordpress blog, ne vodeći baš previše računa o težini samih stranica, malo ste editirali css, dodali nekoliko novih klasa (vjerovatno i nekoliko previše), ubacili ste nekoliko slika i neku flash animaciju ili banner, i iznenada shvatite da vaša stranica ima previše kilobajta. Danas je vrijeme brzog interneta i moguće je prenijeti daleko veće količine podataka nego nekada, pa su se kreatori web stranica prilično opustili po pitanju težine istih. Ipak je i dalje dobro da web stranica bude što je moguće lakša, ali da ne gubimo mišta od nama dragocjenog stila, slika ili animacija. Tako je i moj style.css narastao do prilične veličine prilikom razvoja ovih stranica. Nedavno sam našao sjajno rješenje kako drastično smanjiti težinu css file-a. Preporučam svima ovo.
Rješenje se bazira na kompresiji css file-a pomoću php-a a pronašao sam ga na stranicama paulstamatiou.com. Uz pomoć par linija php koda moguće je drastično smanjiti težinu file-a, ja sam svoj, na primjer, smanjio sa 47 KB na samo 10 KB.
-
Postupak je sljedeći:
- kopirajte glavni css file vaše teme i promjenite mu ime. Ako vam se na primjer glavni css file zove style.css (što je uobičajeno) kopiju nazovite style.css.php
- sljedeći korak je da pozovete novi css file u headeru vaše stranice. Pronađite liniju koda u kojoj pozivate glavni css u file-u header.php
header.php
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> |
i izmjenite ga u sljedeće
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/style.css.php"/> |
- sada još morate samo izmjeniti novokreirani style.css.php file. Dodajte nove dvije linije koda, jednu na početak file-a i drugu na kraj
style.css.php
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?> . . /* css sadržaj */ . , <?php if(extension_loaded('zlib')){ob_end_flush();}?> |
- i to je sve. Osvježite vaše stranice i provjerite rezultat. Vaš css file biće višestruko lakši nego prije.
Mana ovoga je što to sada više nije css file već php, što znači da će biti teže editirati. U Dreamweaveru, na primjer, nećete više imati ponuđene opcije kako unosite vrijednosti. Meni ovo prilično nedostaje i otežava mi izmjene. Možete si pomoći tako što ćete uvijek editirati stari file style.css a nakon izmjene kopirati ga i ponoviti gore navedeni postupak. Meni su benefiti koje dobijam primamljiviji od ovog malog nedostatka. I naravno, da napomenem da ovaj postupak radi u svim danas aktualnim browserima.
Ovaj post raspoloživ je i na drugom jeziku: English