—»     —»   Сохраняем пропускную способность и улучшаем скорость загрузки сайта посредством CSS спрайтов
  Раздел: CSS/Style Sheets   Комментариев: 1  

Сохраняем пропускную способность и улучшаем скорость загрузки сайта посредством CSS спрайтов

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

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

Мэтт Каттс (Matt Cutts), представитель команды «Search Quality» в компании Google и высокоуважаемая личность в сообщение SEO, на презентации посвященной внедрению алгоритма оценки положения веб-сайта в выдаче поисковика Google по фактору скорости загрузки, показанной в Лас-Вегасе, описал этот пункт, как то, чего от него следует ожидать в 2010 году. Он пояснил это тем, что компания хочет, чтобы поиск стал действительно очень быстрым, как если бы вы листали рекламный вестник.

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

Что такое CSS-спрайты?

Зачастую люди не совсем точно понимают значение CSS-спрайта, думая, что это несколько маленьких изображений. На самом деле, все наоборот – это одно большое изображение.

Возможно, вы уже знакомы с техникой CSS, когда посредством определенных значений можно менять положение кнопки, состоящей из одного изображения, которое позиционируется посредством события on: hover в коде CSS (смотрите обучающую статью по созданию кнопок с использованием CSS). CSS-спрайты – это, по сути, то же самое: изображение отображено на странице посредством координат, указанных в коде CSS. И только указанная область будет отображена.

Сложно поверить в то, что одно большое изображение, которое содержит в себе все нужные элементы, имеет меньший вес, нежели все элементы в маленьких изображения по отдельности. Но даже если все ваши небольшие отдельные элементы имеют вес в пару килобайт, то серверу приходится обрабатывать их отдельно, что ведет к лишним HTTP-запросам. Каждый запрос несет в себе какой-то объем лишней информации, что требует дополнительного трафика, выделенного на канал веб-сайта.

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

Создаем простое фоновое sprite-изображение

Давайте обсудим эту тему на основе примера. С помощью Photoshop, мы создаем документ с несколькими изображения (логотипами компаний), разделяем области на кусочки в 100 пикселей (смотрите на изображении снизу). Сохраняем файл и называем его logos.jpg.

Мы использовали расстояние в 100 пикселей для того чтобы отобразить принцип работы техники, а также потому, что это достаточно удобное расстояние для смены позиции фонового изображения CSS каждый раз, когда мы меняем координаты в коде CSS (при использовании техники CSS-спрайтов нужно быть достаточно аккуратным, чтобы получить преимущество небольшого размера файла).

Фоновое изображение CSS установлено на отображение только первого логотипа (как указано зеленой границей) – координаты которой представляют собой y=0 и x=0.

Сохраняем пропускную способность и улучшаем скорость загрузки сайта посредством CSS спрайтов

Для того чтобы задать им новую позицию, мы будем использовать атрибут background-position.

Сохраняем пропускную способность и улучшаем скорость загрузки сайта посредством CSS спрайтов

Для того чтобы отобразить следующее изображение, которое расположено правее первого логотипа, нужно поменять координаты оси Х.

Из-за того, как мы построили наше изображение (с интервалами в 100 пикселей), все, что нам остается сделать, это поменять значение оси Х на 100. Таким образом, мы можем постепенно переходить от логотипа к логотипу.

Сохраняем пропускную способность и улучшаем скорость загрузки сайта посредством CSS спрайтов

CSS-код для фонового sprite-изображения

#logos {height: 64px; margin: 0; padding: 0; position: relative;}

#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#logos a {height: 64px; display: block;}
// First logo
#logos li a.jaz {background-position: 0 0}
// Second logo
#logos li a.iberotel {background-position: 0 -100px;}
// Third logo
#logos li a.solymar {background-position: 0 -200px;}
// Fourth logo
#logos li a.travcotels {background-position: 0 -300px;}
// Fifth logo
#logos li a.intercity {background-position: 0 -400px;}

Результат

Сохраняем пропускную способность и улучшаем скорость загрузки сайта посредством CSS спрайтов

В приведенном выше примере, у нас есть возможность сократить размер файла с 52кб до 22кб, а число запросов HTTP с 5 до 1. Это означает отличную оптимизацию скорости загрузки страницы посредством лишь одной небольшой части страницы!

Этот метод уже был успешно протестирован во многих современных браузерах.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 6579   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 12 сентября 2010 @ 06:48
Написал: Евгений — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ваш сайт скоростью не блещет... Достаточно оптимизировать картинки чтобы сайт нормально загружался
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031