Webhelyének felgyorsítása CSS Sprites segítségével

spritemaster web

Elég sokat írok az oldal sebességéről ezen a webhelyen, és ez fontos része az elemzésnek és fejlesztéseknek, amelyeket ügyfeleink webhelyein végzünk. Eltekintve az erőteljes szerverekre való áttéréstől és az olyan eszközök használatától, mint a Tartalomszolgáltató hálózatok, számos más programozási technika létezik, amelyet az átlagos webfejlesztő használhat.

Az eredeti lépcsőzetes stíluslap szabványa már több mint 15 éves. A CSS fontos fejlemény volt a webfejlesztésben, mert elválasztotta a tartalmat a tervezéstől. Nézze meg ezt a blogot és minden más weboldalt, és a stílusbeli különbségek többsége egyszerűen a csatolt stíluslapban található. A stíluslapok azért is fontosak, mert azokat helyileg a böngésző gyorsítótárában tárolják. Ennek eredményeként, miközben az emberek továbbra is látogatják az Ön webhelyét, nem minden alkalommal töltenek le stíluslapot ... csak az oldal tartalmát.

A CSS egyik olyan eleme, amelyet gyakran kihasználnak CSS Sprites. Amikor egy felhasználó felkeresi az Ön webhelyét, nem biztos, hogy észreveszi, hogy nem egyszerűen egyetlen kérelmet nyújt be az oldalra. Ők több kérést is eljuttathat… Kérés az oldalra, bármilyen stíluslapra, bármilyen csatolt JavaScript fájlra, majd minden képre. Ha van olyan témája, amely képsorokkal rendelkezik a szegélyekhez, a navigációs sávokhoz, a háttérhez, a gombokhoz stb., Akkor a böngészőnek mindegyiket egyenként kell kérnie a webkiszolgálótól. Szorozza ezt meg több ezer látogatóval, és ez több tízezer kérést jelenthet a szerverére!

Ez viszont lelassítja webhelyét. A A lassú webhely drámai hatással lehet az elköteleződésre és a konverziókra amit a közönség csinál. A nagyszerű webfejlesztők által alkalmazott stratégia az összes kép egyetlen fájlba helyezése ... az úgynevezett a kobold. Ahelyett, hogy minden fájlképhez kérelmet intézne, most már csak egyetlen kérelmet kell benyújtania az egyetlen sprite képhez!

Olvashatsz róla hogyan működnek a CSS Sprites a CSS-Tricksnél or Smashing Magazine CSS Sprite post. Nem az a véleményem, hogy megmutassam nekik, hogyan kell használni őket, csak azt tanácsolom, hogy biztosítsa, hogy a fejlesztői csapat beépíti őket az oldalba. A CSS trükkök által bemutatott példa 10 képet mutat, amelyek 10 kérésből állnak, és 20.5 KB-ot tesznek ki. Ha egyetlen sprite-be gyűlik, akkor az 1 kérés, ami 13 kb! 9 kép oda-vissza igénylése és válaszideje eltűnt, és az adatok mennyisége több mint 30% -kal csökken. Ha ezt megszorozzuk a webhely látogatóinak számával, akkor valóban lerázza az erőforrásokat!

globalnavA Apple a navigációs sáv nagyszerű példa. Minden gombnak van néhány állapota ... függetlenül attól, hogy az oldalon tartózkodik, az oldalon kívül van, vagy egérmutatót mutat a gombra. A CSS meghatározza a gomb koordinátáit, és bemutatja a helyes állapot régióját a felhasználói böngészőnek. Mindezek az állapotok összecsukódnak egyetlen grafikában - de régiónként kerülnek megjelenítésre a stíluslapban meghatározottak szerint.

Ha fejlesztői szeretik az eszközöket, rengeteg segítség áll rajtuk, beleértve a Iránytű CSS keretrendszer, RequestReduce az ASP.NET számára, CSS-Spriter Rubynak, CSSSprite szkript a Photoshop számára, SpritePad, SpriteRight, SpriteCow, ZeroSprites, A Project Fondue CSS Sprite Generatorja, Sprite Master Web, És a SpriteMe Könyvjelző.

Képernyőkép Sprite Master Web:
spritemaster web

Martech Zone nem használja a háttérképeket a témája során, ezért jelenleg nem kell ezt a technikát telepítenünk.

2 Comments

  1. 1

    Várjon ... az egész gyűjtemény nem „kép” (vagy „sík”), és mindegyik alkép (vagy animált vagy interaktívan változó esetén a képek alcsoportja) nem „sprite”?

    Lehet, hogy a cuccokat átnevezték, mióta utoljára kezeltem ilyesmit, de megesküdhettem, hogy a Sprite volt az az elem, amely végül megjelent, nem pedig a nagy adattábla, ahonnan kihúzták.

    ("Sprite asztal" ... ez nem igaz?)

    • 2

      Két különböző dolgot beszélhetünk, Mark. A CSS segítségével alapvetően megadhatja, hogy a képfájl melyik „részét” jelenítse meg a koordináták felhasználásával. Ez lehetővé teszi, hogy az összes képet egyetlen "sprite" -be helyezze, majd csak mutasson arra a területre, amelyet a CSS-sel együtt szeretne megjeleníteni.

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.