Паскарэнне вашага сайта з дапамогай CSS-спрайтаў

вэб-спрайтмайстар

Я даволі хутка пішу пра хуткасць старонкі, і гэта важная частка аналізу і ўдасканалення сайтаў нашых кліентаў. Акрамя пераходу на магутныя серверы і выкарыстання такіх інструментаў, як Сеткі дастаўкі кантэнту, ёсць шэраг іншых метадаў праграмавання, якія можа выкарыстоўваць звычайны вэб-распрацоўшчык.

Стандартам арыгінальнай табліцы каскадных стыляў ужо больш за 15 гадоў. CSS быў важнай эвалюцыяй у вэб-распрацоўцы, таму што аддзяляў змест ад дызайну. Паглядзіце гэты блог і любы іншы, і большасць адрозненняў у стылі проста прыкладаецца да табліцы стыляў. Табліцы стыляў таксама важныя, бо яны захоўваюцца лакальна ў кэшы вашага браўзэра. У выніку, паколькі людзі працягваюць наведваць ваш сайт, яны не кожны раз загружаюць табліцу стыляў ... толькі змест старонкі.

Адзін з элементаў CSS, які часта выкарыстоўваецца мала Спрайты CSS. Калі карыстальнік наведвае ваш вэб-сайт, вы можаце не падазраваць, што ён не проста робіць адзін запыт на старонку. Яны зрабіць некалькі запытаў... запыт на старонку, на любыя табліцы стыляў, на любыя ўкладзеныя файлы JavaScript, а затым на кожную выяву. Калі ў вас ёсць тэма, якая мае шэраг малюнкаў для межаў, панэляў навігацыі, фонавых малюнкаў, кнопак і г. д. ... аглядальнік павінен запытаць кожны з іх па адным з вашага вэб-сервера. Памножце гэта на тысячы наведвальнікаў, а гэта могуць быць дзясяткі тысяч запытаў на ваш сервер!

Гэта, у сваю чаргу, запавольвае працу вашага сайта. А павольны сайт можа моцна паўплываць на ўзаемадзеянне і пераўтварэнні што робіць ваша аўдыторыя. Стратэгія, якую выкарыстоўваюць выдатныя вэб-распрацоўшчыкі, заключаецца ў змесціве ўсіх малюнкаў у адзін файл ... які называецца эльф. Замест таго, каб рабіць запыт для кожнага з вашых выяваў файлаў, зараз трэба толькі запыт на адзін спрайт-малюнак!

Вы можаце прачытаць пра як CSS-спрайты працуюць на CSS-Tricks or Спрайты CSS Smashing Magazine паведамленне. Я маю на ўвазе не паказаць вам, як імі карыстацца, а проста параіць, каб каманда распрацоўшчыкаў уключыла іх у сайт. Прыклад, які дае CSS Tricks, паказвае 10 малюнкаў, якія складаюць 10 запытаў і складаюць 20.5 Кб. Калі сабраны ў адзін спрайт, гэта так 1 запыт, які складае 13 кб! Цяпер запыт на зваротны зварот і час водгуку для 9 малюнкаў зніклі, а аб'ём дадзеных скараціўся больш чым на 30%. Памножце гэта на колькасць наведвальнікаў вашага сайта, і вы сапраўды паголіце некаторыя рэсурсы!

глабальнаянав,en яблык панэль навігацыі - выдатны прыклад. У кожнай кнопкі ёсць некалькі станаў ... незалежна ад таго, знаходзіцеся вы на старонцы, па-за старонкай альбо наводзіце курсор на кнопку. CSS вызначае каардынаты кнопкі і прадстаўляе вобласць правільнага стану для аглядальніка карыстальнікаў. Усе гэтыя станы аб'яднаны ў адну графіку, але адлюстроўваюцца па рэгіёнах, як паказана ў табліцы стыляў.

Калі вашы распрацоўшчыкі любяць інструменты, ёсць мноства, якія могуць дапамагчы ім, у тым ліку CSS фреймворк Compass, RequestReduce для ASP.NET, CSS-Spriter для Рубі, Сцэнар CSSSprite для Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, CSS Sprite Generator праекта Fondue, Спрайт Майстар вэб, А SpriteMe Закладка.

здымак экрана Спрайт Майстар вэб:
вэб-спрайтмайстар

Martech Zone не выкарыстоўвае фонавыя выявы на працягу ўсёй тэмы, таму нам зараз не трэба выкарыстоўваць гэты метад.

2 Каментары

  1. 1

    Пачакайце ... ці не ўся калекцыя - гэта "выява" (альбо "плоскасць"), а кожная пад-выява (альбо падгрупа малюнкаў у выпадку аніміраваных альбо інтэрактыўна зменлівых) - "спрайт"?

    Магчыма, рэчы былі перайменаваны з мінулага разу, калі я займаўся падобнымі рэчамі, але я мог пакляцца, што спрайт быў тым элементам, які ў выніку апынуўся, а не вялікай табліцай дадзеных, з якой ён быў выцягнуты.

    ("Табліца спрайтаў" ... гэта было не так?)

    • 2

      Магчыма, мы гаворым пра дзве розныя рэчы, Марк. З дапамогай CSS вы можаце ў асноўным вызначыць, якую "частку" файла выявы адлюстроўваць, выкарыстоўваючы каардынаты. Гэта дазваляе змясціць усе выявы ў адзін "спрайт", а потым проста паказаць вобласць, якую вы хочаце адлюстраваць з дапамогай CSS.

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.