Pagreitinkite savo svetainę naudodami „CSS Sprites“

spritemaster internetas

Nemažai rašau apie puslapio greitį šioje svetainėje ir tai yra svarbi mūsų klientų svetainių analizės ir patobulinimų dalis. Be perkėlimo į galingus serverius ir tokių įrankių kaip Turinio Pristatymo tinklai, yra daugybė kitų programavimo metodų, kuriuos vidutinis žiniatinklio kūrėjas gali naudoti.

Originalaus kaskadinio stiliaus lapo standartas yra daugiau nei 15 metų. CSS buvo svarbi interneto kūrimo raida, nes ji atskyrė turinį nuo dizaino. Peržiūrėkite šį ir kitą tinklaraštį, o didžioji dalis stiliaus skirtumų yra tiesiog pridedamame stiliaus lape. Stilių lapai taip pat svarbūs, nes jie saugomi jūsų naršyklės talpykloje. Todėl žmonės ir toliau lankydamiesi jūsų svetainėje kiekvieną kartą neatsisiunčia stiliaus lapo ... tik puslapio turinį.

Vienas iš CSS elementų, kuris dažnai yra nepakankamai naudojamas, yra CSS „Sprites“. Kai vartotojas lankosi jūsų svetainėje, galite nesuvokti, kad jis paprasčiausiai nepateikia vienos puslapio užklausos. Jie pateikti kelis prašymus... puslapio, bet kokių stiliaus lapų, visų pridėtų „JavaScript“ failų ir kiekvieno vaizdo užklausa. Jei turite temą, kurioje yra sienų, naršymo juostų, fonų, mygtukų ir kt. Vaizdų serija ... naršyklė turi prašyti kiekvieno po vieną iš savo žiniatinklio serverio. Padauginkite iš tūkstančių lankytojų ir tai gali būti dešimtys tūkstančių užklausų, pateiktų jūsų serveriui!

Tai savo ruožtu sulėtina jūsų svetainę. A lėta svetainė gali turėti dramatišką poveikį įtraukimui ir konversijoms kurį daro jūsų auditorija. Strategija, kurią naudoja puikūs interneto kūrėjai, yra sudėti visus vaizdus į vieną failą ... vadinamą a kaukas. Užuot pateikę užklausą kiekvienam failo vaizdui, dabar reikia pateikti tik vieną prašymą dėl vieno sprite vaizdo!

Galite paskaityti apie kaip „CSS Sprites“ veikia „CSS-Tricks“ or „Smashing Magazine“ CSS „Sprite“ paštu. Noriu ne parodyti, kaip juos naudoti, o tik patarti, kad jūsų kūrėjų komanda juos įtrauktų į svetainę. CSS gudrybių pateiktame pavyzdyje rodoma 10 vaizdų, kurie yra 10 užklausų ir kurių bendra suma siekia 20.5 KB. Susirinkus į vieną sprite, tai 1 užklausa, kuri yra 13 kb! 9 vaizdų prašymas į abi puses ir atsakymo laikas jau praėjo, o duomenų kiekis sumažėjo daugiau nei 30%. Padauginkite tai iš savo svetainės lankytojų skaičiaus ir tikrai nuskusite kai kuriuos išteklius!

globalnavŠis obuolys navigacijos juosta yra puikus pavyzdys. Kiekviename mygtuke yra kelios būsenos ... nesvarbu, ar esate puslapyje, ar ne, ar pelės žymeklis virš mygtuko. CSS apibrėžia mygtuko koordinates ir pateikia vartotojo naršyklei teisingos būsenos regioną. Visos šios būsenos sutraukiamos kartu į vieną grafiką, tačiau rodomos regione pagal regioną, kaip nurodyta stiliaus lape.

Jei jūsų kūrėjai mėgsta įrankius, yra daugybė jų, įskaitant Kompaso CSS sistema, RequestReduce skirta ASP.NET, CSS-Spriter už Rubiną, CSSSprite scenarijus skirta „Photoshop“, „SpritePad“, „SpriteRight“, „SpriteCow“, „ZeroSprites“, „Project Fondue“ CSS „Sprite“ generatorius, „Sprite Master Web“, „SpriteMe“ Žymelė.

Ekrano kopija iš „Sprite Master Web“:
spritemaster internetas

Martech Zone nenaudoja foninių vaizdų visoje temoje, todėl šiuo metu neturime naudoti šios technikos.

2 komentarai

  1. 1

    Palaukite ... ar visa kolekcija nėra „vaizdas“ (ar „plokštuma“), o kiekvienas antrasis vaizdas (arba vaizdų pogrupis, jei animaciniai ar interaktyviai keičiasi) nėra „sprite“?

    Galbūt daiktai buvo pervadinti, nes paskutinį kartą aš tvarkiau tokius dalykus, bet galėjau prisiekti, kad „Sprite“ buvo rodomas elementas, o ne didžioji duomenų lentelė, iš kurios jis buvo ištrauktas.

    („Sprite stalas“ ... ar ne taip?)

    • 2

      Mes galime kalbėti apie du skirtingus dalykus, Markai. Naudodami CSS, naudodamiesi koordinatėmis, iš esmės galite nurodyti, kurią vaizdo failo „dalį“ rodyti. Tai leidžia sujungti visus vaizdus į vieną „sprite“ ir tiesiog nukreipti į sritį, kurią norite rodyti su CSS.

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.