Ubrzavanje vaše stranice sa CSS spritovima

spritemaster web

Prilično pišem o brzini stranice na ovoj web stranici i to je važan dio analize i poboljšanja koja vršimo na web stranicama naših klijenata. Osim prelaska na moćne servere i upotrebe alata poput Sadržaj Networks isporuke, postoji niz drugih tehnika programiranja koje prosječni web programer može koristiti.

Standard za originalni Cascading Style Sheet sada je star više od 15 godina. CSS je bio važan razvoj u web razvoju jer je odvojio sadržaj od dizajna. Pogledajte ovaj blog i bilo koji drugi, a većina razlika u stilu je jednostavno u priloženom tablici stilova. Tablice stilova su također važne jer se pohranjuju lokalno u predmemoriju vašeg preglednika. Kao rezultat toga, kako ljudi nastavljaju posjećivati ​​vašu web lokaciju, oni ne preuzimaju tabelu stilova svaki put ... već samo sadržaj stranice.

Jedan od elemenata CSS-a koji se često nedovoljno koristi su CSS Sprites. Kada korisnik posjeti vašu web stranicu, možda nećete shvatiti da ne podnosi samo jedan zahtjev za stranicu. Oni podnijeti više zahtjeva… Zahtjev za stranicu, za bilo koje tabele stilova, za bilo koje priložene JavaScript datoteke, a zatim za svaku sliku. Ako imate temu koja sadrži niz slika za obrube, trake za navigaciju, pozadine, dugmad itd., Pregledač mora tražiti svaku, jednu po jednu od vašeg web servera. Pomnožite to sa hiljadama posjetitelja i to može biti desetine hiljada zahtjeva upućenih vašem serveru!

To zauzvrat usporava vašu web lokaciju. A spora web lokacija može imati dramatičan utjecaj na angažman i konverzije koje vaša publika pravi. Strategija koju koriste izvrsni web programeri je stavljanje svih slika u jednu datoteku ... koja se naziva a sprite. Umjesto da podnesete zahtjev za svaku vašu sliku datoteke, sada treba biti samo jedan zahtjev za jednu sliku spritea!

Možete pročitati kako CSS Sprites rade na CSS-trikovima or Razbijajući CSS Sprite časopisa Smashing pošta. Moja poanta nije pokazati vam kako ih koristiti, već samo savjetovati vas da ih osigura da vaš razvojni tim ugradi u web lokaciju. Primjer koji pruža CSS trikovi prikazuje 10 slika koje imaju 10 zahtjeva i dodaju do 20.5 KB. Kad se skupi u jedan sprit, to je 1 zahtjev koji je 13kb! Zahtjev za povratno putovanje i vrijeme odgovora za 9 slika sada su nestali, a količina podataka smanjena je za više od 30%. Pomnožite to s brojem posjetitelja na vašoj web lokaciji i zaista ćete obrijati neke resurse!

globalnavThe jabuka navigacijska traka je sjajan primjer. Svako dugme ima nekoliko stanja ... bilo da ste na stranici, izvan nje ili prelazite mišem preko gumba. CSS definira koordinate dugmeta i pregledaču korisnika predstavlja područje ispravnog stanja. Sva su ova stanja sažeta u jednu grafiku - ali prikazana su regija po regija kako je navedeno u tabeli stilova.

Ako vaši programeri vole alate, postoji mnogo toga što im može pomoći, uključujući i Compass CSS okvir, RequestReduce za ASP.NET, CSS-spriter za Ruby, CSSSprite skripta za Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Projekt Fondue CSS Sprite Generator, Sprite Master Web, A SpriteMe Bookmarklet.

Screenshot of Sprite Master Web:
spritemaster web

Martech Zone ne koristi pozadinske slike u cijeloj temi, tako da trenutno ne moramo primjenjivati ​​ovu tehniku.

2 Komentari

  1. 1

    Pričekajte ... nije li cijela kolekcija „slika“ (ili „ravnina“), a svaka podslika (ili podskupina slika u slučaju animiranih ili interaktivno promjenjivih) „sprite“?

    Možda su stvari preimenovane od prošlog puta kada sam se bavio ovakvim stvarima, ali mogao bih se zakleti da je Sprite element koji je na kraju prikazan, a ne velika tablica podataka iz koje je izvučena.

    („Sprite tabela“ ... to nije bilo zar ne?)

    • 2

      Možda razgovaramo o dvije različite stvari, Mark. Sa CSS-om u osnovi možete odrediti koji 'dio' slikovne datoteke želite prikazati koristeći koordinate. To vam omogućava da sve svoje slike stavite u jedan 'sprite', a zatim samo pokažete na područje koje želite prikazati CSS-om.

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.