Accelerarea site-ului dvs. cu CSS Sprites

web spritemaster

Scriu destul de puțin despre viteza paginii pe acest site și este o parte importantă a analizei și îmbunătățirilor pe care le facem site-urilor clienților noștri. În afară de trecerea la servere puternice și utilizarea instrumentelor precum Rețele de distribuire a conținutului, există o serie de alte tehnici de programare pe care dezvoltatorul web mediu le poate folosi.

Standardul pentru foaia de stil originală în cascadă are acum peste 15 ani. CSS a fost o evoluție importantă în dezvoltarea web, deoarece a separat conținutul de design. Uitați-vă la acest blog și la oricare altul, iar majoritatea diferenței de stil este pur și simplu în foaia de stil atașată. Foile de stil sunt, de asemenea, importante, deoarece sunt stocate local într-o memorie cache din browserul dvs. Ca urmare, pe măsură ce oamenii continuă să vă viziteze site-ul, nu descarcă de fiecare dată o foaie de stil ... doar conținutul paginii.

Un element al CSS care este adesea subutilizat sunt Sprite CSS. Când un utilizator vă vizitează site-ul web, este posibil să nu vă dați seama că nu face doar o singură cerere pentru pagină. ei faceți cereri multiple… O cerere pentru pagină, pentru orice foi de stil, pentru orice fișier JavaScript atașat și apoi pentru fiecare imagine. Dacă aveți o temă care are o serie de imagini pentru margini, bare de navigare, fundaluri, butoane, etc ... browserul trebuie să solicite fiecare, una câte una, de la serverul dvs. web. Înmulțiți acest lucru cu mii de vizitatori și pot fi zeci de mii de cereri adresate serverului dvs.!

La rândul său, acest lucru vă încetinește site-ul. A site-ul lent poate avea un impact dramatic asupra implicării și conversiilor pe care o face publicul tău. O strategie pe care o folosesc marii dezvoltatori web este plasarea tuturor imaginilor într-un singur fișier ... numit a spirit. Mai degrabă decât să faceți o cerere pentru fiecare dintre imaginile fișierului dvs., acum trebuie să existe doar o singură cerere pentru o singură imagine sprite!

Puteți citi despre cum funcționează CSS Sprites la CSS-Tricks or CSS Sprite al revistei Smashing Magazine post. Ideea mea nu este să vă arăt cum să le utilizați, ci doar să vă sfătuiesc să vă asigurați că echipa dvs. de dezvoltare le încorporează pe site. Exemplul pe care îl oferă CSS Tricks arată 10 imagini care sunt 10 solicitări și adună până la 20.5 KB. Când este adunat într-un singur sprite, este 1 cerere de 13kb! Solicitările dus-întors și timpii de răspuns pentru 9 imagini au dispărut, iar cantitatea de date este redusă cu mai mult de 30%. Înmulțiți acest lucru cu numărul de vizitatori de pe site-ul dvs. și veți rade cu adevărat niște resurse!

globalnav măr bara de navigare este un exemplu excelent. Fiecare buton are câteva stări ... indiferent dacă vă aflați pe pagină, în afara paginii sau dacă treceți cu mouse-ul peste buton. CSS definește coordonatele butonului și prezintă regiunea stării corecte browserului utilizatorilor. Toate aceste stări sunt colapsate împreună într-un singur grafic - dar sunt afișate regiune după regiune, așa cum se specifică în foaia de stil.

Dacă dezvoltatorii dvs. adoră instrumentele, există o grămadă care îi poate ajuta, inclusiv Cadru CSS busolă, RequestReduce pentru ASP.NET, CSS-Spriter pentru Ruby, Script CSSSprite pentru Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Generatorul CSS Sprite al proiectului Fondue, Sprite Master Web, Şi SpriteMe Bookmarklet.

Captură de ecran a Sprite Master Web:
web spritemaster

Martech Zone nu utilizează imagini de fundal pe toată tema sa, deci nu trebuie să implementăm această tehnică în acest moment.

4 Comentarii

  1. 1

    Așteptați ... nu este întreaga colecție o „imagine” (sau un „plan”) și fiecare sub-imagine (sau subgrup de imagini în cazul celor animate sau care se schimbă interactiv) este un „sprite”?

    Poate că lucrurile au fost redenumite de când am tratat ultima dată acest lucru, dar aș putea jura că Sprite a fost elementul care a ajuns să fie afișat, nu tabelul mare de date din care a fost extras.

    („Masă Sprite” ... asta nu-i așa?)

    • 2

      S-ar putea să vorbim despre două lucruri diferite, Mark. Cu CSS, puteți specifica practic care „porțiune” dintr-un fișier imagine să fie afișată utilizând coordonatele. Acest lucru vă permite să puneți toate imaginile într-un singur „sprite” și apoi să indicați doar zona pe care doriți să o afișați cu CSS.

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.