Urychlení vašeho webu pomocí skriptů CSS

web spritemaster

Na této stránce hodně píšu o rychlosti stránek a je to důležitá součást analýzy a vylepšení, která na stránkách našich klientů provádíme. Kromě přechodu na výkonné servery a využití nástrojů jako Sítě pro poskytování obsahu, existuje řada dalších programovacích technik, které může průměrný webový vývojář použít.

Standard pro původní kaskádový styl je nyní přes 15 let. CSS byl důležitý vývoj ve vývoji webových aplikací, protože oddělil obsah od designu. Podívejte se na tento blog a jakýkoli jiný a většina rozdílů ve stylingu je jednoduše v přiložené šabloně stylů. Stylové šablony jsou také důležité, protože jsou uloženy lokálně v mezipaměti ve vašem prohlížeči. Výsledkem je, že když lidé i nadále navštěvují váš web, nestahují pokaždé šablonu stylů ... pouze obsah stránky.

Jedním z prvků CSS, který je často nedostatečně využíván, je Sprite CSS. Když uživatel navštíví váš web, možná si neuvědomíte, že na stránku jednoduše neprovede jeden požadavek. Ony podat více požadavků… Požadavek na stránku, na všechny šablony stylů, na všechny připojené soubory JavaScriptu a poté na každý obrázek. Pokud máte motiv, který obsahuje řadu obrázků pro ohraničení, navigační lišty, pozadí, tlačítka atd., Musí prohlížeč vyžadovat každý jeden po druhém od vašeho webového serveru. Znásobte to tisíci návštěvníky a to mohou být desítky tisíc požadavků na váš server!

To zase zpomalí váš web. A pomalý web může mít dramatický dopad na zapojení a konverze které vaše publikum dělá. Strategie, kterou skvělí weboví vývojáři používají, je vkládání všech obrázků do jednoho souboru… zvaného a skřítek. Místo požadavku na každý z vašich obrazů souborů nyní stačí pouze jediný požadavek na jediný obrázek sprite!

Můžete o tom číst jak fungují CSS Sprites v CSS-Tricks or Smashing Magazine's CSS Sprite pošta. Mým cílem není ukázat vám, jak je používat, jen vám poradit, abyste se ujistili, že je váš vývojový tým začlení do webu. Příklad, který poskytuje triky CSS, ukazuje 10 obrázků, které jsou 10 požadavky a přidávají až 20.5 kB. Když se shromáždí v jediném sprite, je to tak 1 požadavek, který je 13 kB! Požadavky na zpáteční cestu a doby odezvy pro 9 obrázků jsou nyní pryč a množství dat je sníženo o více než 30%. Vynásobte to počtem návštěvníků na vašem webu a některé zdroje opravdu oholíte!

globalnavSpolečnost jablko navigační lišta je skvělým příkladem. Každé tlačítko má několik stavů ... ať už jste na stránce, mimo stránku nebo na ní najedete myší. CSS definuje souřadnice tlačítka a prezentuje oblast správného stavu v prohlížeči uživatelů. Všechny tyto stavy jsou sbaleny dohromady v jedné grafice - ale zobrazená oblast podle oblasti, jak je uvedeno v šabloně stylů.

Pokud vaši vývojáři milují nástroje, existuje řada, která jim může pomoci, včetně Rámec CSS kompasu, RequestReduce pro ASP.NET, CSS-Spriter pro Ruby, CSSSprite skript pro Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Generátor CSS Sprite projektu Fondue, Sprite Master WebA SpriteMe Bookmarklet.

Screenshoty z Sprite Master Web:
web spritemaster

Martech Zone nevyužívá v rámci svého tématu snímky na pozadí, takže tuto techniku ​​v tuto chvíli nemusíme nasazovat.

2 Komentáře

  1. 1

    Počkejte ... není celá kolekce „obrazem“ (nebo „rovinou“) a každý podobraz (nebo podskupina obrázků v případě animovaných nebo interaktivně se měnících) „sprite“?

    Možná, že věci byly přejmenovány od doby, kdy jsem naposledy řešil takové věci, ale mohl jsem přísahat, že Sprite byl prvek, který se nakonec zobrazil, ne velká tabulka dat, ze které byl vytažen.

    („Sprite stůl“ ... to bylo, že?)

    • 2

      Možná mluvíme o dvou různých věcech, Marku. S CSS můžete v zásadě určit, která „část“ obrazového souboru se má zobrazit pomocí souřadnic. To vám umožní vložit všechny vaše obrázky do jediného „sprite“ a poté pouze ukázat na oblast, kterou chcete zobrazit pomocí CSS.

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.