Urýchlenie vášho webu pomocou CSS Sprites

spritemaster web

O rýchlosti stránok na tomto webe píšem dosť a je to dôležitá súčasť analýzy a vylepšenia, ktoré robíme na stránkach našich klientov. Okrem prechodu na výkonné servery a využívania nástrojov ako Siete dodávania obsahu, existuje množstvo ďalších programovacích techník, ktoré môže priemerný webový vývojár použiť.

Štandard pre pôvodný kaskádový štýl je už viac ako 15 rokov. CSS bolo dôležitým vývojom vo vývoji webu, pretože oddeľovalo obsah od dizajnu. Pozrite sa na tento blog a na všetky ďalšie a väčšina rozdielov v štylistike sa nachádza v priloženej šablóne so štýlmi. Šablóny štýlov sú tiež dôležité, pretože sú uložené lokálne v pamäti prehliadača. Výsledkom je, že keď ľudia naďalej navštevujú vaše stránky, nestahujú zakaždým šablónu štýlov ... iba obsah stránky.

Jedným z prvkov CSS, ktorý je často nedostatočne využívaný, je CSS Skřítci. Keď používateľ navštívi váš web, možno si neuvedomíte, že nevykonáva iba jednu požiadavku na stránku. Oni podať viac žiadostí… Požiadavka na stránku, na akékoľvek štýly, na všetky pripojené súbory JavaScriptu a potom na každý obrázok. Ak máte tému, ktorá obsahuje sériu obrázkov pre hranice, navigačné lišty, pozadia, tlačidlá atď., Musí prehliadač vyžadovať každý jeden po druhom od vášho webového servera. Znásobte to tisíckami návštevníkov a môžu to byť desiatky tisíc požiadaviek na váš server!

To zase spomalí váš web. A pomalý web môže mať dramatický vplyv na zapojenie a konverzie ktoré vaše publikum vytvára. Stratégia, ktorú používajú skvelí weboví vývojári, je vloženie všetkých obrázkov do jedného súboru ... zvaného a škriatok. Namiesto žiadosti o každý zo svojich obrázkov súborov teraz stačí iba jedna žiadosť o jediný obrázok Sprite!

Môžete si prečítať ako fungujú CSS Sprites v CSS-Tricks or CSS Sprite zo Smashing Magazine príspevok. Mojou úlohou nie je ukázať vám, ako ich používať, iba vám odporučiť, aby ste sa uistili, že ich váš vývojový tím začlení do stránky. Príklad, ktorý poskytuje CSS Tricks, zobrazuje 10 obrázkov, ktoré sú 10 požiadavkami a pridávajú až 20.5 kB. Keď sa zhromaždia v jedinom škriatkovi, je to tak 1 žiadosť, to je 13 kB! Okružná cesta požiadavka a časy odozvy pre 9 obrázkov sú teraz preč a množstvo dát je znížené o viac ako 30%. Vynásobte to počtom návštevníkov na vašom webe a skutočne oholíte nejaké zdroje!

globalnavو jablko navigačný panel je skvelým príkladom. Každé tlačidlo má niekoľko stavov ... či už sa nachádzate na stránke, mimo stránky alebo umiestnite kurzor myši na toto tlačidlo. CSS definuje súradnice tlačidla a prehľadávaču používateľov zobrazí oblasť správneho stavu. Všetky tieto stavy sú zbalené dohromady v jednej grafike - ale zobrazená oblasť po oblasti, ako je uvedené v šablóne so štýlmi.

Ak vaši vývojári milujú nástroje, existuje veľa takých, ktoré im môžu pomôcť, vrátane Rámec CSS kompasu, Žiadosť Znížiť pre ASP.NET, CSS-Spriter pre Ruby, CSSSprite skript pre Photoshop, SpritePad, SpriteRight, Sprite Krava, ZeroSprites, Generátor CSS Sprite projektu Projectue, Sprite Master Web, A SpriteMe Záložka.

Screenshot z Sprite Master Web:
spritemaster web

Martech Zone nevyužíva v celej svojej téme obrázky na pozadí, takže túto techniku ​​teraz nemusíme nasadzovať.

2 Komentáre

  1. 1

    Počkajte ... nie je celá kolekcia „obrázkom“ (alebo „rovinou“) a každý podobraz (alebo podskupina obrázkov v prípade animovaných alebo interaktívne sa meniacich) „sprite“?

    Možno boli veci premenované od doby, keď som naposledy riešil tieto veci, ale mohol som odprisahať, že Sprite bol prvkom, ktorý sa nakoniec zobrazil, nie tabuľka veľkých údajov, z ktorej sa vytiahol.

    („Sprite table“ ... to bolo, že?)

    • 2

      Možno hovoríme o dvoch rôznych veciach, Marku. Pomocou CSS môžete v zásade určiť, ktorá „časť“ obrazového súboru sa má zobraziť pomocou súradníc. To vám umožní vložiť všetky vaše obrázky do jedného „skřítka“ a potom len ukázať na oblasť, ktorú chcete zobraziť pomocou CSS.

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.