Ускорение вашего сайта с помощью CSS-спрайтов

spritemaster web

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

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

Одним из элементов CSS, который часто используется недостаточно, являются CSS-спрайты. Когда пользователь посещает ваш веб-сайт, вы можете не осознавать, что он не просто делает один запрос для страницы. Oни сделать несколько запросов… Запрос страницы, любых таблиц стилей, любых прикрепленных файлов JavaScript, а затем каждого изображения. Если у вас есть тема, которая содержит серию изображений для границ, панелей навигации, фона, кнопок и т. Д.… Браузер должен запрашивать каждое из них, по одному с вашего веб-сервера. Умножьте это на тысячи посетителей, и вы получите десятки тысяч запросов к вашему серверу!

Это, в свою очередь, замедляет работу вашего сайта. А медленный сайт может существенно повлиять на вовлеченность и конверсии что делает ваша аудитория. Стратегия, которую используют великие веб-разработчики, заключается в том, чтобы поместить все изображения в один файл ... называемый эльф. Вместо того, чтобы делать запрос для каждого из ваших файловых изображений, теперь требуется только один запрос для одного изображения спрайта!

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

globalnavОсвободи Себя Apple Панель навигации - отличный пример. Каждая кнопка имеет несколько состояний… независимо от того, находитесь ли вы на странице, вне страницы или наводите курсор на кнопку. CSS определяет координаты кнопки и представляет область правильного состояния браузеру пользователя. Все эти состояния свернуты вместе в один рисунок, но отображаются регион за регионом, как указано в таблице стилей.

Если вашим разработчикам нравятся инструменты, есть масса способов, которые могут им помочь, включая CSS-фреймворк Compass, RequestReduce для ASP.NET, CSS-спрайтер для Руби, CSSSprite скрипт для фотошопа, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Генератор CSS-спрайтов Project Fondue, Веб-мастер спрайтов, А SpriteMe Букмарклет.

Снимок экрана Веб-мастер спрайтов:
spritemaster web

Martech Zone не использует фоновые изображения по всей своей теме, поэтому нам не нужно использовать эту технику в настоящее время.

2 комментариев

  1. 1

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

    Возможно, что-то было переименовано с тех пор, как я в последний раз занимался такими вещами, но я мог поклясться, что спрайт был тем элементом, который в конечном итоге был отображен, а не таблицей больших данных, из которой он был взят.

    («Таблица спрайтов»… это было не так?)

    • 2

      Мы можем говорить о двух разных вещах, Марк. С помощью CSS вы можете указать, какую «часть» файла изображения отображать, используя координаты. Это позволяет вам поместить все ваши изображения в один «спрайт», а затем просто указать на область, которую вы хотите отобразить, с помощью CSS.

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.