Убрзавање ваше странице помоћу ЦСС Спритеса

спритемастер веб

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

Стандард за оригинални Цасцадинг Стиле Схеет сада је стар више од 15 година. ЦСС је био важан развој у веб развоју јер је одвојио садржај од дизајна. Погледајте овај блог и било који други, а већина разлика у стилу је једноставно у приложеном табели стилова. Табеле стилова су такође важне јер се локално чувају у предмеморији вашег прегледача. Као резултат тога, како људи настављају да посећују вашу веб локацију, они не преузимају табелу стилова сваки пут ... већ само садржај странице.

Један од елемената ЦСС-а који се често недовољно користи је ЦСС Спритес. Када корисник посети вашу веб страницу, можда нећете схватити да не подноси само један захтев за страницу. Они поднесите више захтева… Захтев за страницу, за било које табеле стилова, за све приложене ЈаваСцрипт датотеке, а затим за сваку слику. Ако имате тему која има низ слика за ивице, траке за навигацију, позадине, дугмад итд., Прегледач мора да затражи сваку, једну по једну, од вашег веб сервера. Помножите то са хиљадама посетилаца и то може бити десетине хиљада захтева упућених вашем серверу!

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

Можете прочитати како ЦСС Спритеови раде на ЦСС-триковима or ЦСС Сприте из часописа Смасхинг Магазине пошта. Моја поента није да вам покажем како их користити, већ само да вам саветујем да их осигурате да их ваш развојни тим угради у веб локацију. Пример који пружа ЦСС трикови приказује 10 слика које су 10 захтева и додају до 20.5 КБ. Када се сакупи у један сприт, то је 1 захтев који је 13кб! Захтев за повратно путовање и време одзива за 9 слика су сада нестали, а количина података смањена је за више од 30%. Помножите то са бројем посетилаца на вашој веб локацији и заиста ћете обријати неке ресурсе!

глобалнав јабука трака за навигацију је сјајан пример. Свако дугме има неколико стања ... било да сте на страници, изван ње или прелазите мишем преко дугмета. ЦСС дефинише координате дугмета и прегледачу корисника представља регију тачног стања. Сва ова стања су скупљена у једну графику - али приказана су регион по регион како је наведено у табели стилова.

Ако ваши програмери воле алате, постоји мноштво ствари које им могу помоћи, укључујући и Цомпасс ЦСС фрамеворк, РекуестРедуце за АСП.НЕТ, ЦСС-Спритер за Руби, ЦСССприте скрипта за Пхотосхоп, СпритеПад, СпритеРигхт, СпритеЦов, ЗероСпритес, ЦСС Сприте Генератор пројекта Фондуе, Сприте Мастер Веб, И СпритеМе Боокмарклет.

Сцреенсхот оф Сприте Мастер Веб:
спритемастер веб

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

Komentari

  1. 1

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

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

    („Сприте табле“… зар не?)

    • 2

      Можда говоримо о две различите ствари, Марк. Са ЦСС-ом, можете у основи одредити који 'део' сликовне датотеке ће се приказати користећи координате. Ово вам омогућава да све своје слике ставите у један 'спрајт', а затим само покажете на област коју желите да прикажете помоћу ЦСС-а.

Шта ви мислите?

Ова страница користи Акисмет како би смањила нежељену пошту. Сазнајте како се ваш коментар обрађује.