Ускоряване на вашия сайт с CSS спрайтове

spritemaster web

Пиша за скоростта на страниците доста на този сайт и това е важна част от анализа и подобренията, които правим в сайтовете на нашите клиенти. Освен преминаването към мощни сървъри и използването на инструменти като Мрежи за доставка на съдържание, има редица други техники за програмиране, които средният уеб разработчик може да използва.

Стандартът за оригиналния каскаден стил е вече над 15 години. CSS беше важна еволюция в уеб разработката, защото разделяше съдържанието от дизайна. Погледнете този блог и всеки друг и по-голямата част от разликата в стила е просто в приложената таблица със стилове. Таблиците със стилове също са важни, защото се съхраняват локално в кеш паметта във вашия браузър. В резултат на това, тъй като хората продължават да посещават сайта ви, те не изтеглят таблица със стилове всеки път ... само съдържанието на страницата.

Един от елементите на CSS, който често се използва недостатъчно, е CSS спрайтове. Когато потребител посети уебсайта ви, може да не осъзнаете, че той не прави само една заявка за страницата. Те направете множество заявки... заявка за страницата, за всякакви таблици със стилове, за всички прикачени JavaScript файлове и след това за всяко изображение. Ако имате тема, която има поредица от изображения за граници, навигационни ленти, фонове, бутони и т.н ... браузърът трябва да поиска всяка една, по една от вашия уеб сървър. Умножете това по хиляди посетители и това могат да бъдат десетки хиляди заявки, отправени към вашия сървър!

Това от своя страна забавя вашия сайт. A бавният сайт може да има драматично въздействие върху ангажираността и реализациите които вашата аудитория прави. Стратегия, която използват великите уеб разработчици, е поставянето на всички изображения в един файл ... наречен a фея. Вместо да отправяте заявка за всяко от вашите файлови изображения, сега трябва да има само една заявка за единичното спрайт изображение!

Можете да прочетете за как CSS спрайтове работят в CSS-трикове or CSS Sprite на Smashing Magazine пост. Моят смисъл не е да ви покажа как да ги използвате, а просто да ви посъветвам да се уверите, че вашият екип за разработка ги включва в сайта. Примерът, който CSS Tricks предоставя, показва 10 изображения, които са 10 заявки и добавят до 20.5Kb. Когато се събере в един спрайт, това е 1 заявка, която е 13kb! Заявката за обратно пътуване и времето за реакция за 9 изображения вече са изчезнали и количеството данни е намалено с повече от 30%. Умножете това по броя на посетителите на вашия сайт и наистина ще избръснете някои ресурси!

globalnavНай- ябълка лентата за навигация е чудесен пример. Всеки бутон има няколко състояния ... независимо дали сте на страницата, извън страницата или мишката върху бутона. CSS определя координатите на бутона и представя региона на правилното състояние на браузъра на потребителите. Всички тези състояния се свиват заедно в една графика, но се показват регион по регион, както е посочено в таблицата със стилове.

Ако вашите разработчици обичат инструментите, има много неща, които могат да им помогнат, включително Compass CSS рамка, RequestReduce за ASP.NET, CSS-Spriter за Руби, CSSSprite скрипт за Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, CSS Sprite Generator на Project Fondue, Sprite Master WebИ SpriteMe Bookmarklet.

Screenshot на Sprite Master Web:
spritemaster web

Martech Zone не използва фонови изображения в цялата си тема, така че в момента не е нужно да прилагаме тази техника.

2 Коментари

  1. 1

    Изчакайте ... не е ли цялата колекция „изображение“ (или „равнина“), а всяко под-изображение (или подгрупа от изображения в случай на анимирани или интерактивно променящи се) е „спрайт“?

    Може би нещата са преименувани от последния път, когато се занимавах с подобни неща, но можех да се закълна, че Sprite е елементът, който в крайна сметка се показва, а не голямата таблица с данни, от която е изтеглена.

    („Таблица за спрайт“ ... това не беше ли?)

    • 2

      Може да говорим за две различни неща, Марк. С CSS можете основно да посочите коя „част“ от файл с изображение да се показва, използвайки координати. Това ви позволява да поставите всичките си изображения в един „спрайт“ и след това просто да посочите областта, която искате да покажете с CSS.

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.