Teie saidi kiirendamine CSS Sprites abil

spritemasteri veeb

Kirjutan sellel saidil lehekiirusest üsna vähe ja see on oluline osa meie klientide saitidel tehtavast analüüsist ja täiustustest. Peale võimsatesse serveritesse kolimise ja muude tööriistade kasutamise Sisuedastusvõrk, on mitmeid teisi programmeerimistehnikaid, mida keskmine veebiarendaja saab kasutada.

Algse kaskaadstiililehe standard on nüüd üle 15 aasta vana. CSS oli oluline areng veebiarenduses, kuna see eraldas sisu kujundusest. Vaadake seda ajaveebi ja kõiki teisi. Suurem osa stiilierinevusest on lihtsalt lisatud stiililehel. Stiililehed on olulised ka seetõttu, et need salvestatakse teie brauseri vahemälus kohapeal. Seetõttu ei laadita inimesed teie saiti jätkuvalt alla laadides iga kord stiililehte ... ainult lehe sisu.

Üks CSS-i element, mida sageli alakasutatakse, on CSS Sprites. Kui kasutaja külastab teie veebisaiti, ei pruugi te aru saada, et ta ei esita lihtsalt ühte lehe taotlust. Nemad esitada mitu taotlust… Lehe, mis tahes stiililehtede, lisatud JavaScripti failide ja seejärel iga pildi taotlus. Kui teil on teema, millel on pildiseeria piiride, navigeerimisribade, taustade, nuppude jne jaoks, peab brauser igaüks oma veebiserverilt ükshaaval taotlema. Korrutage see tuhandete külastajatega ja see võib olla kümneid tuhandeid teie serverile tehtud päringuid!

See omakorda aeglustab teie saiti. A aeglane sait võib dramaatiliselt mõjutada seotust ja konversioone mida teie publik teeb. Strateegia, mida suured veebiarendajad kasutavad, on kõigi piltide koondamine ühte faili ... nn haldjas. Selle asemel, et taotleda iga failipilti, peab nüüd olema ainult üks taotlus ühe sprite-pildi jaoks!

Saate lugeda kuidas CSS Sprites CSS-Tricks'is töötab or Ajakirja CSS Sprite purustamine postitus. Minu eesmärk ei ole näidata teile, kuidas neid kasutada, vaid lihtsalt soovitada teil tagada, et teie arendustiim kaasaks need saidile. CSS-i trikkide näide näitab 10 pilti, mis on 10 taotlust ja kokku 20.5 kB. Ühtsesse spraidi kogunedes on see nii 1 taotlus, mis on 13 kb! 9 pildi edasi-tagasi taotlus ja vastamisajad on nüüd möödas ning andmete hulka on vähendatud rohkem kui 30%. Korrutage see oma saidi külastajate arvuga ja raseerite tõesti mõned ressursid!

globalnav. õun navigeerimisriba on suurepärane näide. Igal nupul on mõned olekud ... olenemata sellest, kas olete lehel, lehel väljas või hiirega nupu kohal. CSS määratleb nupu koordinaadid ja esitab kasutaja brauserile õige oleku piirkonna. Kõik need olekud ahendatakse kokku ühes graafikas - kuid kuvatakse piirkonniti piirkonniti, nagu on täpsustatud stiililehel.

Kui teie arendajad armastavad tööriistu, on neid palju, sealhulgas neid Compass CSS raamistik, RequestReduce ASP.NET-i jaoks, CSS-Spriter Ruby jaoks, CSSSprite skript Photoshopi jaoks, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Projekti Fondue CSS Sprite Generator, Sprite Master veebJa SpriteMe Järjehoidja.

Ülevaade ekraanilt Sprite Master veeb:
spritemasteri veeb

Martech Zone ei kasuta kogu oma teema taustpildi, seega ei pea me seda tehnikat praegu kasutusele võtma.

2 Kommentaarid

  1. 1

    Oota ... kas kogu kollektsioon pole "pilt" (või "tasapind") ja iga alampilt (või animeeritud või interaktiivselt muutuvate piltide puhul alamrühm) pole "spiraal"?

    Võib-olla on kraami ümber nimetatud sellest ajast, kui ma viimati sellist asja käsitsesin, kuid võisin vanduda, et lõpuks näidati Sprite'i, mitte suurt andmetabelit, kust see tõmmati.

    ("Sprite laud" ... see polnud ju see?)

    • 2

      Me võime rääkida kahest erinevast asjast, Mark. CSS-iga saate põhimõtteliselt täpsustada, millist pildifaili 'osa' koordinaate kasutades kuvada. See võimaldab teil panna kõik oma pildid ühte spriidi ja seejärel lihtsalt osutada alale, mida soovite CSS-iga kuvada.

Mis sa arvad?

Sellel saidil kasutatakse rämpsposti vähendamiseks Akismetit. Vaadake, kuidas teie andmeid töödeldakse.