Забрзување на вашата страница со CSS Sprites

мрежа на spritemaster

Пишувам за брзината на страницата доста на оваа страница и тоа е важен дел од анализата и подобрувањата што ги правиме на страниците на нашите клиенти. Настрана од преселба во моќни сервери и користење на алатки како Мрежи за испорака на содржини, постојат низа други програмски техники што може да ги користи просечниот веб развивач.

Стандардот за оригиналниот лист со каскадни стилови сега е стар над 15 години. CSS беше важна еволуција во развојот на веб, бидејќи ја одделуваше содржината од дизајнот. Погледнете го овој блог и кој било друг, а поголемиот дел од разликата во стилот е едноставно во приложениот лист на стилови. Листовите на стилови се исто така важни затоа што тие се зачувани локално во меморија во вашиот прелистувач. Како резултат, додека луѓето продолжуваат да ја посетуваат вашата страница, тие не преземаат стилски лист секој пат… само содржината на страницата.

Еден елемент на CSS што честопати е недоволно искористен се CSS Sprites. Кога некој корисник ја посетува вашата веб-страница, можеби нема да сфатите дека тие едноставно не упатуваат едно барање за страницата. Тие направи повеќе барања… Барање за страницата, за сите стилови, за какви било приложени датотеки JavaScript и потоа секоја слика. Ако имате тема што има серија слики за граници, ленти за навигација, позадини, копчиња, итн ... прелистувачот треба да ги побара сите, едно по едно, од вашиот веб-сервер. Помножете го тоа со илјадници посетители и тоа може да бидат десетици илјади барања упатени до вашиот сервер!

Ова, пак, ја забавува вашата страница. А. бавната страница може да има драматично влијание врз ангажманот и конверзиите што ја прави вашата публика. Стратегија што ја користат одличните веб-развивачи е ставање на сите слики во една датотека, наречена А. спрат. Наместо да поднесувате барање за секоја од вашите слики со датотеки, сега треба да има само едно барање за една единствена слика!

Можете да прочитате за како работат CSS Sprites на CSS-трикови or Smashing Magazine's CSS Sprite пост Поентата ми е да не ви покажам како да ги користите, само да ве посоветувам да се осигурате дека вашиот тим за развој ги вметнува на страницата. Примерот што го обезбедува CSS Tricks покажува 10 слики што се 10 барања и додаваат до 20.5 KB. Кога ќе се соберат во еден спајт, тоа е 1 барање е 13 кг! Времето за барање и повратно патување за 9 слики сега е исчезнато, а количината на податоци е намалена за повеќе од 30%. Помножете го тоа со бројот на посетители на вашата страница и навистина ќе избричите некои ресурси!

глобалнавна Јаболко навигациската лента е одличен пример. Секое копче има неколку состојби… без оглед дали сте на страницата, надвор од страницата или глувчето над копчето. CSS ги дефинира координатите на копчето и му го претставува регионот на правилната состојба пред прелистувачот на корисниците. Сите овие состојби се собрани заедно во една единствена графика - но се прикажуваат региони по региони како што е наведено во листот за стил.

Ако вашите програмери обожаваат алатки, има еден тон што може да им помогне, вклучително и на Рамка на компас CSS, Барање Намали за ASP.NET, CSS-Spriter за Руби, Скрипта CSSSprite за Фотошоп, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Проект Фондје CSS Sprite генератор, Sprite Master Web, И SpriteMe Обележувач.

Екранот на Sprite Master Web:
мрежа на spritemaster

Martech Zone не користи слики во позадина во текот на целата своја тема, па затоа не мора да ја распоредуваме оваа техника во овој момент.

2 Коментари

  1. 1

    Чекај ... зарем целата колекција не е „слика“ (или „рамнина“), а секоја под-слика (или под-група на слики во случај на анимирани или интерактивно менувачки) е „спарит“?

    Можеби работите се преименувани од последниот пат кога се справив со ваква работа, но не можев да се заколнам дека Sprite е елементот што заврши на прикажување, а не од табелата за големи податоци од која беше извлечена.

    („Sprite table“… нели беше тоа?)

    • 2

      Можеби зборуваме две различни работи, Марк. Со CSS, во основа можете да одредите кој „дел“ од датотеката со слики ќе се прикажува со користење на координати. Ова ви овозможува да ги поставите сите ваши слики во еден „спарит“ и потоа само да ја посочите областа што сакате да ја прикажете со CSS.

Што мислите?

Оваа страница користи Akismet за намалување на спам. Научете како се обработува вашиот коментар.