Pagpapabilis ng Iyong Site sa mga CSS Sprite

spritemaster web

Sumusulat ako tungkol sa bilis ng pahina nang kaunti sa site na ito at ito ay isang mahalagang bahagi ng pagtatasa at mga pagpapabuti na ginagawa namin sa mga site ng aming mga kliyente. Bukod sa paglipat sa malakas na mga server at paggamit ng mga tool tulad ng Nilalaman Delivery Network, mayroong isang bilang ng iba pang mga diskarte sa pagprogram na maaaring magamit ng average na developer ng web.

Ang pamantayan para sa orihinal na Cascading Style Sheet ay higit sa 15 taong gulang ngayon. Ang CSS ay isang mahalagang ebolusyon sa pagbuo ng web dahil pinaghiwalay nito ang nilalaman mula sa disenyo. Tingnan ang blog na ito at anumang iba pa at ang karamihan ng pagkakaiba sa estilo ay nasa naka-attach na styleheet. Mahalaga rin ang mga estilo dahil ang mga ito ay lokal na nakaimbak sa isang cache sa loob ng iyong browser. Bilang isang resulta, habang patuloy na binibisita ng mga tao ang iyong site, hindi sila nagda-download ng isang sheet ng istilo sa bawat oras ... nilalaman lamang ng pahina.

Ang isang elemento ng CSS na madalas na underutilized ay Mga CSS Sprite. Kapag bumisita ang isang gumagamit sa iyong website, maaaring hindi mo mapagtanto na hindi lamang sila gumagawa ng isang kahilingan para sa pahina. Sila gumawa ng maraming kahilingan… Isang kahilingan para sa pahina, para sa anumang mga sheet ng estilo, para sa anumang nakalakip na mga JavaScript file, at pagkatapos ay bawat imahe. Kung mayroon kang isang tema na mayroong isang serye ng mga imahe para sa mga hangganan, mga bar ng nabigasyon, mga background, mga pindutan, atbp… ang browser ay kailangang humiling ng bawat isa, isa-isang mula sa iyong web server. I-multiply iyon ng libu-libong mga bisita at maaaring maging sampu-sampung libo ng mga kahilingan na ginawa sa iyong server!

Ito naman ay nagpapabagal sa iyong site. A mabagal na site ay maaaring magkaroon ng isang dramatikong epekto sa pakikipag-ugnayan at mga conversion na ginagawa ng iyong madla. Ang isang diskarte na ginagamit ng mahusay na mga developer ng web ay paglalagay ng lahat ng mga imahe sa isang solong file ... na tinatawag na a engkanto. Sa halip na humiling ng bawat isa sa iyong mga imahe ng file, ngayon kailangan lamang magkaroon ng isang solong kahilingan para sa solong sprite na imahe!

Maaari mong basahin ang tungkol sa kung paano gumagana ang CSS Sprites sa CSS-Tricks or Smashing Magazine's CSS Sprite post Ang punto ko ay hindi ipakita sa iyo kung paano gamitin ang mga ito, upang payuhan ka lamang na matiyak na isinasama ng iyong koponan sa pag-unlad ang mga ito sa site. Ang halimbawang ibinibigay ng CSS Tricks ay nagpapakita ng 10 mga imahe na 10 mga kahilingan at magdagdag ng hanggang sa 20.5Kb. Kapag natipon sa isang solong sprite, ito ay 1 request yan 13kb! Wala na ang kahilingan sa pag-ikot at mga oras ng pagtugon para sa 9 na mga imahe at ang dami ng data ay nabawasan ng higit sa 30%. I-multiply iyon sa bilang ng mga bisita sa iyong site at talagang aahitin mo ang ilang mapagkukunan!

globalnavAng mansanas ang navig bar ay isang mahusay na halimbawa. Ang bawat pindutan ay may ilang mga estado ... kung ikaw ay nasa pahina, off ang pahina, o mousing sa ibabaw ng pindutan. Tinutukoy ng CSS ang mga coordinate ng pindutan at ipinakita ang rehiyon ng tamang estado sa browser ng mga gumagamit. Ang lahat ng mga estadong ito ay sama-sama na gumuho sa isang solong graphic - ngunit ipinakita ang rehiyon ayon sa rehiyon ayon sa tinukoy sa style sheet.

Kung gusto ng iyong mga developer ang mga tool, mayroong isang tonelada doon na makakatulong sa kanila, kabilang ang Balangkas ng CSS ng Compass, RequestReduce para sa ASP.NET, CSS-Spriter para kay Ruby, Script ng CSSSprite para sa Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Ang CSS Sprite Generator ng Project Fondue, Sprite Master Web, at ang SpriteMe Bookmarklet.

Screenshot ng Sprite Master Web:
spritemaster web

Martech Zone Hindi gumagamit ng koleksyon ng imahe sa background sa buong tema nito, kaya hindi namin kailangang i-deploy ang diskarteng ito sa ngayon.

2 Comments

  1. 1

    Maghintay ... hindi ba ang buong koleksyon ay isang "imahe" (o isang "eroplano"), at ang bawat sub-imahe (o sub-pangkat ng mga imahe sa kaso ng mga animated o interactive na pagbabago ng mga) isang "sprite"?

    Marahil ang mga bagay ay napalitan ng pangalan mula noong huling oras na hawakan ko ang ganitong uri ng bagay ngunit maaari kong manumpa na ang Sprite ay ang elemento na natapos na maipakita, hindi ang malaking talahanayan ng data na hinugot nito.

    ("Sprite table" ... hindi iyan?)

    • 2

      Maaaring pinag-uusapan natin ang dalawang magkakaibang bagay, Mark. Sa CSS, maaari mong tiyak na tukuyin kung aling 'bahagi' ng isang file ng imahe upang ipakita ang paggamit ng mga coordinate. Pinapayagan kang maglagay ng lahat ng iyong mga imahe sa isang solong 'sprite' at pagkatapos ay ituro lamang ang lugar na nais mong ipakita sa CSS.

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.