Nopeuttaa sivustoasi CSS-spriteillä

spritemaster-verkko

Kirjoitan sivujen nopeudesta melko vähän tällä sivustolla, ja se on tärkeä osa analyysejä ja parannuksia, joita teemme asiakkaidemme sivustoille. Sen lisäksi, että siirrytään tehokkaisiin palvelimiin ja hyödynnetään esimerkiksi Sisällönjakeluverkot, on olemassa useita muita ohjelmointitekniikoita, joita keskimääräinen web-kehittäjä voi käyttää.

Alkuperäisen CSS-tyylisivun standardi on nyt yli 15 vuotta vanha. CSS oli tärkeä kehitys verkkokehityksessä, koska se erotti sisällön suunnittelusta. Katso tätä blogia ja muita. Suurin osa tyylieroista on yksinkertaisesti oheisessa tyylitaulukossa. Tyylitaulukot ovat tärkeitä myös siksi, että ne tallennetaan paikallisesti selaimesi välimuistiin. Tämän seurauksena, kun ihmiset vierailevat edelleen sivustollasi, he eivät lataa tyylitaulukkoa joka kerta ... vain sivun sisältöä.

Yksi CSS: n osa, jota käytetään usein liian vähän, ovat CSS Sprites. Kun käyttäjä vierailee verkkosivustollasi, et ehkä ymmärrä, että hän ei yksinkertaisesti pyydä yhtä sivua. Ne tehdä useita pyyntöjä… Pyyntö sivulle, tyylisivuille, liitetyille JavaScript-tiedostoille ja sitten jokaiselle kuvalle. Jos sinulla on teema, jossa on sarja kuvia reunuksista, siirtymispalkkeista, taustat, painikkeet jne. ... selaimen on pyydettävä kukin yksi kerrallaan verkkopalvelimeltasi. Kerro tämä tuhansilla kävijöillä, mikä voi olla kymmeniä tuhansia palvelimellesi tehtyjä pyyntöjä!

Tämä puolestaan ​​hidastaa sivustoasi. A hidas sivusto voi vaikuttaa dramaattisesti sitoutumiseen ja tuloksiin jonka yleisösi tekee. Hyvien verkkokehittäjien käyttämä strategia on, että kaikki kuvat asetetaan yhteen tiedostoon ... kutsutaan a keijukainen. Sen sijaan, että pyytäisit kutakin tiedostokuvaa, nyt tarvitaan vain yksi pyyntö yhdelle sprite-kuvalle!

Voit lukea kuinka CSS Sprites toimii CSS-Tricksissä or Smashing Magazinen CSS Sprite lähettää. Tarkoitukseni ei ole näyttää sinulle, miten niitä käytetään, vaan vain neuvoa sinua varmistamaan, että kehitystiimisi sisällyttää ne sivustoon. CSS-temppujen tarjoama esimerkki näyttää 10 kuvaa, jotka ovat 10 pyyntöä ja yhteensä 20.5 kt. Yhdessä spriteessä se on 1 pyyntö, joka on 13 kt! Yhdeksän kuvan edestakaisen matkan pyyntö ja vasteajat ovat nyt poissa ja datan määrä vähenee yli 9%. Kerro se sivustosi kävijämäärällä ja aiot todella ajaa joitain resursseja pois!

globalnav- omena navigointipalkki on loistava esimerkki. Jokaisella painikkeella on muutama tila ... olitpa sivulla, poissa sivulta vai hiiren painikkeen päällä. CSS määrittelee painikkeen koordinaatit ja näyttää oikean tilan alueen käyttäjien selaimelle. Kaikki nämä tilat on tiivistetty yhteen kuvaksi - mutta ne näytetään alueittain tyylisivulla määritetyllä tavalla.

Jos kehittäjät rakastavat työkaluja, siellä on paljon, jotka voivat auttaa heitä, mukaan lukien Kompassi CSS-kehys, RequestReduce varten ASP.NET, CSS-Spritter Rubyn puolesta CSSSprite-komentosarja Photoshopille, SpritePad, SpriteOikea, SpriteCow, ZeroSprites, Project Fonduen CSS Sprite Generator, Sprite Master Web, ja SpriteMe Kirjanmerkki.

Kuvakaappaus Sprite Master Web:
spritemaster-verkko

Martech Zone ei käytä taustakuvia koko teemalla, joten meidän ei tarvitse käyttää tätä tekniikkaa tällä hetkellä.

2 Kommentit

  1. 1

    Odota ... eikö koko kokoelma ole "kuva" (tai "taso") ja kukin alikuva (tai kuvien alaryhmä animoitujen tai vuorovaikutteisesti muuttuvien tapauksessa) ei ole "sprite"?

    Ehkä tavaroita on nimetty uudelleen siitä lähtien, kun viimeksi käsittelin tällaista asiaa, mutta voisin vannoa, että Sprite oli elementti, joka päätyi näyttämään, ei iso tietotaulukko, josta se vedettiin.

    ("Sprite-pöytä" ... eikö se olekin?)

    • 2

      Me voimme puhua kahdesta eri asiasta, Mark. CSS: n avulla voit periaatteessa määrittää, mikä kuvatiedoston "osa" näytetään käyttämällä koordinaatteja. Tämän avulla voit laittaa kaikki kuvat yhdeksi "spriteiksi" ja osoittaa sitten vain alueen, jonka haluat näyttää CSS: n kanssa.

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.