Labor omnia vincit improbus!

26 feb. 2011

Optimizează Blogul pentru Viteză cu CSS Sprites


Spuneam în postul intitulat 10 Lucruri care-mi Plac ca Blogger că obişnuiesc să-mi bag degetele în codul HTML sau CSS al blogului meu. Am învăţat câteva chestii interesante, unele le-am introdus în blog, altele am încercat şi mai mult rău am făcut, dar aşa înveţi, experimentând. Nimeni nu s-a născut atotştiutor!

Ceea ce am reuşit totuşi să fac e să folosesc CSS Sprites. Nu sunt în măsură să vă explic pe îndelete ce este această metodă de optimizare a unui site dar mai multe detalii găsiţi pe site-ul A List Apart. Ceea ce vă pot spune în câteva cuvinte e faptul că atunci când aveţi pe site mai multe imagini care se repetă e bine să combinaţi acele imagini într-una singură, astfel browserul va face mai puţine cereri (requests) către serverul unde e pagina web deci blogul vostru se va încărca mai rapid.

Un exemplu de Sprites folosit la mine pe blog e acesta de mai jos (pe gare o să o găsiţi parţial - numai Facebook şi Twitter - la baza acestui post):

În loc să folosesc cinci imagini diferite pentru fiecare site (Facebook, Reddit, Digg, Twitter sau Stumbleupon) am folosit doar o singură imagine. Veţi observa de-altfel că atunci când da-ţi click pe partea cu F , de la Facebook, se va deschide o pagină specifică Facebook. Acelaşi principiu e şi pentru toate celelalte.

Nefiind un specialist în HTML, CSS sau web design nu-mi permit să explic cum să creaţi un CSS Sprites cu toate că eu am reuşit şi am înţeles cum se face. De aceea am să vă îndrum doar la unele pagini web care vă explică această metodă foarte bine şi am să vă fac cunoştinţă cu câteva instrumente ajutătoare pentru a putea crea sprites.

Tool-uri pentru crearea de CSS Sprites:
Sunt sigur că pe Internet sunt mii de articole despre acest subiect dar din păcate nu am găsit niciunul în limba română. Nu pentru mine ar fi fost interesant un tutorial în română ci pentru cei care nu stăpânesc bine engleza, până la urmă nu ne-am născut toţi cu engleza în cap...

Lectură plăcută! Şi ca un ultim sfat, înainte de a pune codul pe blog ar fi bine să încercaţi offline ceea ce aţi creat deoarece sigur nu vreţi să vă stricaţi tot template-ul doar pentru că aţi vrut să faceţi o mică modificare. Eu folosesc Dropbox (link cu referral, în caz că vă faceţi cont de pe acest link capăt şi eu în plus 250MB spaţiu) pentru a uploada fişierele test pe Internet şi pentru a le încerca cu toate că le-aş fi putut lăsa direct pe calculator.

Sper să vă ajute cumva acest post şi dacă nu vă merge această metodă pe blogul vostru să nu aruncaţi cu roşii stricate în mine, eu doar v-am îndrumat spre unele resurse de informare...

Baftă!

0 comments:

Trimiteți un comentariu

Lăsați un comentariu (Leave a comment please):