Compresia fișierelor CSS on the fly

Cred că toată lumea vrea un site mai rapid. În urmă cu 10-15 ani, când toți se chinuiau să scoată un timp de încarcare de maxim zece secunde (parcă așa zicea Jacob Nielsen), viteza medie de conectare era în jur de 56kbs. Cam cum merge în realitate internetul mobil de la Vodafone sau RDS (că în teorie merge cu 7.2mbs e altă poveste). Acum însă, vitezele de conectare sunt amețitoare. Zeci de Mbs, totul zbârnâie, totul… Stai! A crescut viteza, au crescut și așteptările utilizatorilor. Astfel, cele zece secunde s-au transformat în 1-3 secunde. Au apărut biblioteci JS, au apărut framework-uri CSS, astfel încât odată cu viteza a crescut și dimensiunea paginilor.

Și dacă nu avem cum să mai creștem viteza, optimizăm dimensiunile!

Astfel, au apărut regulile de performanță de la yahoo. Și printre regulile astea, cele mai importante consider că sunt cele de micșorare:

  • gzip;
  • minification (pentru că minificare sună aiurea :D).

Cu gzip o rezolvi rapid. Câteva rânduri în .htaccess și ai terminat. Cu minificarea (?!) însă… E mai greu. Pentru că, nu-i așa, întotdeauna se găsește ceva de modificat la site când nu ești acasă. Iar editarea unui cârnat pe o singură linie de câteva zeci de mii de caractere poate fi o experiență nu tocmai plăcută.

Prin urmare poți folosi editarea on the fly. Nu știu însă cum se comportă pe site-uri cu un trafic considerabil… :)

Scriptul face următoarea chestie: Combină mai multe fișiere, șterge toate comentariile, spațiile aiurea, tab-urile aiurea și toate rândurile noi:

Cum se folosește?

  1. Faci un fișier, să zicem screen.php
  2. Înlocuiești
    <link rel='stylesheet' href='screen.css' type='text/css' />
    <link rel='stylesheet' href='style.css' type='text/css' />
    <link rel='stylesheet' href='comments.css' type='text/css' />
    

    Cu

    <link rel='stylesheet' href='screen.php' type='text/css' />
    
  3. Gata :D

21 Comentarii to “Compresia fișierelor CSS on the fly”

  1. Hmm… interesant. Totusi, intotdeauna mi-a fost destul de teama sa folosesc chestii de genul (chiar si un beautify) pentru ca nu sunt sigur daca nu cumva strica vreo regula mai importanta.
    Si intrebare de noob: unde se pune codul?

  2. Eu pastrez la fiecare markup versiunea minificata si versiunea de development (css formatat frumos) separat, in utilizare folosind doar versiunea minificata desigur. Da, e putin mai mult de munca din partea mea dar cel putin nu-i dau ceva in plus serverului de lucrat.

    Daca apar probleme ce necesita reparatii Firebug is the key. Css-ul in Firebug este afisat cu o formatare decenta zic eu si poti face modificari in Firebug le copy/paste-uiesti in dev si faci minification din nou la css-ul de dev punandu-l din nou in folosinta.

    Corecteaza-ma daca gresesc dar prioritatea numarul unu al unui server este de servire a paginilor, nu de a lucra in plus pentru minificare si etc.

    De asemenea, functia o sa fie executata de fiecare data cand o pagina este ceruta (daca nu folosesti cache / intretinerea unui site live devine greoaie).

    Daca vrei sa nu mai fie executata pentru fiecare request (futi serverul degeaba) iei frumos functia o oop-uiesti si folosesti pattern-ul singleton pentru ea, astfel nu mai incarci ram-ul saracului server pentru fiecare executie.

    Si totusi de ce pusca mea sa folosesti functia de mai sus, chiar si o versiune oop-uita cand ai la dispozitie Google Minify sau si mai bine, W3 Total Cache care in opinia mea este cel mai bun plugin de cache pentru WordPress.

    Desigur poti aduce contra argument la ce am zis eu, dar cel mai bine ar fi sa nu dai server-ului o munca in plus.

    Na, o lectie de development de la mine gratuita!

  3. Staicu Ionuț-Bogdan

    Na, o lectie de development de la mine gratuita!

    Unde?

    Daca vrei sa nu mai fie executata pentru fiecare request (futi serverul degeaba) iei frumos functia o oop-uiesti si folosesti pattern-ul singleton pentru ea, astfel nu mai incarci ram-ul saracului server pentru fiecare executie.

    Chestia asta am înțeles-o la fel de bine cum se pare că ai înțeles tu ce înseamnă OOP. Spune-mi și mie cu ce ar ajuta serverul să îi dai un cod OOP pentru asta?

    Corecteaza-ma daca gresesc dar prioritatea numarul unu al unui server este de servire a paginilor, nu de a lucra in plus pentru minificare si etc.

    Gzip-ul tot serverul îl face…

    Si totusi de ce pusca mea sa folosesti functia de mai sus, chiar si o versiune oop-uita cand ai la dispozitie Google Minify sau si mai bine, W3 Total Cache care in opinia mea este cel mai bun plugin de cache pentru WordPress.

    Am avut un vis urât azinoapte: se făcea că există site-uri ce nu sunt bazate pe wp! :o

    Din toată lecția ta, singurul lucru bun cred că a fost treaba despre caching :D

    Si intrebare de noob: unde se pune codul?

    Oups, cred că asta am omis să zic. Editez imediat ;)

  4. Desi compresia e un lucru bun, nu este neaparat si suficient cand vine vorba despre optimizarea aplicatiilor web. Sunt multe lucruri care se pot face cand vine vorba despre imbunatatirea performantei.

    Cei de la Yahoo au facut o lista de reguli destul de mare care va poate ajuta sa imbunatatiti dramatic timpul de incarcare a unei aplicatii web. Aici e link-ul cu regulile: http://developer.yahoo.com/performance/rules.html .

    Cand vine vorba despre aplicarea lor in practica, e ceva mai greu. Sunt multe probleme de rezolvat si este destul de greu de gasit un tool care satisfaca toate nevoile.

    Unul din tool-urile pe care va recomand, este un framework open-source numit wro4j (Web Resource Optimizer for Java). Aici puteti gasi mai multe despre cum se poate lucra cu el: http://code.google.com/p/wro4j/wiki/GettingStarted . Desi este facut in java si pentru aplicatii java, se poate cu usurinta integra si cu aplicatii care folosesc alte limbaje de programare, atata timp cat este deploy-it intr-un servlet container a carui scop sa fie de resource container.

    Alex

  5. Staicu Ionuț-Bogdan

    Desi este facut in java si pentru aplicatii java, se poate cu usurinta integra si cu aplicatii care folosesc alte limbaje de programare, atata timp cat este deploy-it intr-un servlet container a carui scop sa fie de resource container.

    Dacă îmi spui și cum aș putea să-l folosesc pe un server sharde, de ex, ar fi super :)

  6. Daca shared server este un tomcat sau un jetty sau orice altceva ce se bazeaza pe java, urmezi getting started guide din link-ul ce l-am dat mai sus. Tot ce trebuie sa faci acolo e sa creezi un xml care sa descrie resursele ce le vrei concatenate, minificate, comprimate, obfuscate, gzip-ate si ce vrei tu :)…

    Bineinteles ca procesarea are loc o singura data si nu pentru fiecare request, deci se foloseste caching.

    Printre multe feature-uri pe care le are, se gasesc:
    – procesarea atat a css-urilor cat si a js-urilor
    – rescrierea url-urilor din css-uri dupa concatenare
    – configurarea procesoarelor de compresare (poti sa optezi sa folosesti unul din mai multe comprimatoare puse la dispozitie: YUI, Google Closure sau altele care sunt default)
    – folosirea variabilelor css
    – folosirea altor meta framework-urilor de css, cum ar fi Less Css.
    – solutie build-time folosind maven plugin
    – Base64 data uri
    – … si multe altele.
    Lista completa de feature-uri, le gasiti aici: http://code.google.com/p/wro4j/wiki/Features

  7. Ideea era ca, scriptul scris de tine se executa la fiecare request (bad) daca scriai codul in oop dupa pattern-ul singleton se executa o data si atat.

    Era evident ca nu orice site e in wordpress (Doamne fereste!) dar google minify il poti aplica oriunde si te scuteste de o mare bataie de cap, de asemenea w3 total cache poate fi incorporat in orice vrei tu daca stii sa-l modifici.

  8. Stefan, pattern-ul singleton nu are nici o legatura cu un cod care se executa o singura data.

  9. Staicu Ionuț-Bogdan

    Stefan, pattern-ul singleton nu are nici o legatura cu un cod care se executa o singura data.

    Eh, hai! Știi tu! :D

  10. Patternul singleton previne a 2 a executie a aceluias cod! gen nu lasa se se execute a 2 a oara.

    @Ionut: Tu, cu gura ta ai zis ca nu stii programare web / oop si altele si acuma zici “Eh, hai! Știi tu!” :)) Wtf?!

  11. Stefan, desi nu sunt chiar sigur daca are rost sa-ti dau reply, dar insistenta ta se incadreaza perfect in proverbul: “de taceai, filozof ramaneai”. Puteai macar sa dau un search pe google inainte de a insista pe o … hai sa-i zicem incorectitudine :D.

    Si acum definitia singleton-ului: “In software engineering, the singleton pattern is a design pattern used to implement the mathematical concept of a singleton, by restricting the instantiation of a class to one object. “

  12. @Alex: Exact, restrictioneaza a 2 a instantiere, lasand sa fie folosit doar obiectul creat la prima instanta!

    Ceea ce vroiam sa zic este ca ar fi fost optim sa restrictioneze scriptul lui la o singura instantiere cu ajutorul lui Singleton. Ca in felul in care e acum se executa la fiecare incarcare de pagina – overkill.

    Si chiar si asa ar deveni redundant daca se foloseste w3 total cache modifica sa ruleze pe orice cms etc.

  13. Staicu Ionuț-Bogdan

    @Alex: Exact, restrictioneaza a 2 a instantiere, lasand sa fie folosit doar obiectul creat la prima instanta!

    Băi, poate tu știi ceva ce noi, muritorii de rând, nu știm… Dar oare singletonul ăla de care ne tot povestești nu se reinițializează la fiecare refresh?

    Caz în care nu prea este diferit de ce am făcut eu… :D

  14. Cred ca iti place pattern-ul singleton. Este o vorba la englezi: “when you have a hammer in your hands, everything looks like a nail”.
    Executia codului de 2 ori nu are nici o legatura cu crearea unei singure instante a unei clase. Cand vrei sa eviti executia aceluiasi cod de mai multe ori, folosesti caching, adica storezi rezultatul primei executii undeva pentru o refolosire ulterioara.

  15. In general obiectul instantiat de singleton ramane in ram pentru a preveni o alta instantiere. In php se creeaza in un alt obiect dar poti sa restrictionezi si asta cu diverse artificii mi se pare.

    Dar avand in vedere ca discutia a degenerat in cu totul altceva. Eu ma opresc aici.

    P.S.: @Alex: Respect!

  16. Am reusit pana la urma sa il fac sa mearga, dar imi strica meniul asa ca am lasat-o balta. Pacat totusi.

  17. Staicu Ionuț-Bogdan

    Andrei, imi poți trimite te rog un link cu fișierul CSS necompresat să vedem unde e buba? (dacă nu e online, pune-l pe pastebin; dacă nu vrei să fie public, trimite-mi un mail la slice at iamntz . com.)

  18. Pai e public, se vede in sursa. http://j.mp/9EOkSR

  19. Hai ca o sa rada toata lumea. Am gasit care era problema. In regula #menu li intre “menu” si “li” aveam doua spatii. Am sters unul si acum merge perfect. Din cate (putine) stiam eu, nu contau spatiile multiple in CSS.

  20. Staicu Ionuț-Bogdan

    Andrei, problema era la scriptul de minificare: ștergea spațiile duble complet :) Am ajustat un pic scriptul.

Show trackbacks
  1. […] aduci aminte de compresia fișierelor CSS on the fly? Uite cum poți face același lucru și cu […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter