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

spritemaster web

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

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

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

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

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

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

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

здымак экрана Sprite Master Web:
spritemaster web

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

2 Каментары

  1. 1

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

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

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

    • 2

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

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

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