Ubrzavanje vaše web stranice s 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 radimo na stranicama naših klijenata. Osim prelaska na moćne poslužitelje i korištenja alata poput Mreže prikazivanja sadržaja, 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 s stilovima također su važne jer se pohranjuju lokalno u predmemoriju vašeg preglednika. Kao rezultat toga, kako ljudi nastavljaju posjećivati ​​vašu stranicu, ne preuzimaju svaki put stilsku tablicu ... samo sadržaj stranice.

Jedan od elemenata CSS-a koji se često nedovoljno koristi su CSS duhovi. Kad 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 stilske tablice, za sve priložene JavaScript datoteke, a zatim za svaku sliku. Ako imate temu koja sadrži niz slika za obrube, navigacijske trake, pozadine, gumbe itd., Preglednik mora tražiti svaku, jednu po jednu s vašeg web servera. Pomnožite to s tisućama posjetitelja i to može biti desetke tisuća zahtjeva upućenih vašem poslužitelju!

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

O tome možete pročitati kako CSS Sprite rade na CSS-trikovima or Razbijajući CSS Sprite časopisa Smashing post. Moja poanta nije pokazati vam kako ih koristiti, već samo savjetovati vas da ih osigura da vaš razvojni tim ugradi u web mjesto. 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 stvarno ćete obrijati neke resurse!

globalnavFranjevački jabuka navigacijska traka je sjajan primjer. Svaki gumb ima nekoliko stanja ... bilo da ste na stranici, izvan nje ili prijeđete mišem preko gumba. CSS definira koordinate gumba i korisnicima prikazuje preglednik područja ispravnog stanja. Sva su ta 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, CSS Sprite Generator projekta Fondue, Sprite Master Web, A SpriteMe Bookmarklet.

Snimak zaslona Sprite Master Web:
spritemaster web

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

2 Komentari

  1. 1

    Čekajte ... nije li cijela kolekcija "slika" (ili "ravnina"), a svaka podslika (ili podskupina slika u slučaju animiranih ili interaktivno mijenjajućih) "sprite"?

    Možda su stvari preimenovane od prošlog puta kad 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 tablica" ... to nije bilo to?)

    • 2

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

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.