CSS спрайты в Blogger

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

В этой статье мы рассмотрим один из аспектов внутренней оптимизации сайта – оптимизация скорости загрузки сайта при помощи CSS спрайтов.

Скорость загрузки сайта – очень важный аспект для оптимизации сайта. Интернет с каждым днем становиться все быстрее и пользователь, привыкший быстро получать нужную информацию, не будет долго ждать, когда загрузиться какая то страница вашего сайта.

Задачи оптимизации сайтов являются самыми разными и одной из них является оптимизация изображений (графики).

Большинство известных сервисов проверки скорости загрузки сайта онлайн кроме информации о самой скорости загрузки дают еще анализ или рекомендации по ускорению загрузки сайта.

Если вы пользовались такими рекомендациями, то наверняка обратили внимание, что основными рекомендациями являются:
— Сжать или уменьшить число JavaScript файлов;
— Объединить файлы CSS в один файл;
— Оптимизируйте изображения и используйте  CSS спрайты.

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

CSS спрайты – это прогрессивная технология, позволяющая объединить несколько изображений в одно, использование которой позволяет сократить количество внешних http-запросов.

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

Учитывая это, рассматривая разные методы оптимизации сайтов, вебмастер не должен пренебрегать таким методом оптимизации, как использование CSS спрайтов.

Как создать CSS спрайты

По теории создания спрайтов написано достаточно много интересных статей, по этому, повторятся нет смысла.

Рекомендую вам воспользоваться двумя генераторами CSS спрайтов:
csssprites.com — это буржуазный сервис, позволяющий создавать CSS спрайты;
ru.spritegen.website-performance.org  — русскоязычный генератор CSS спрайтов.

Лично я пользуюсь услугами последнего сервиса и поэтому далее мы рассмотрим, как создавать CSS спрайты при помощи этого генератора.

Для начала вы должны выбрать изображения (графику), которую хотите объединить в спрайт.
Обычно это изображения, которые преднамеренно закрываются от индексации (кнопки социальных сетей и т.п.), или отдельные элементы дизайна сайта.

Рассмотрим типовой виджет «Подписка» на большинстве блогов. Обычно в нем присутствуют иконки «Подпишись по E-mail», «Подпишись по RSS», «Facebook», «Twitter». Каждая иконка – это отдельный внешний http-запрос. В описанном случае их четыре. Зачем нам четыре http-запроса, если можно обойтись одним?

Для создания CSS спрайта желательно отобрать изображения одного формата, например Png или Jpeg.

Если с изображениями вы уже определились, заархивируйте их в zip архив.

Переходите на страницу генератора CSS спрайтов ru.spritegen.website-performance.org и загрузите ваш архив.

Все настройки в генераторе на русском языке, по этому, трудностей с настройками возникнуть не должно.

На всякий случай дам несколько рекомендаций. Очень важным является блок настроек «Настройки получаемого спрайта».

«Смещение по горизонтали» – по умолчанию 50px, выставьте размер по своему усмотрению, я использовал 15 px.

Тоже самое касается параметра «Смещение по вертикали».

В параметре «Build Direction» нужно выбрать направление выравнивания картинок в объединенном изображении (по умолчанию вертикальное).

Поле «Class префикс» можно не заполнять, но если спрайтов используется несколько, то лучше это сделать.

Итак, если все настройки сделаны, смело жмем кнопку «Создать спрайт».

В итоге генератор нам выдаст примерно такие CSS правила:.ru-matartru------icon_70{ background-position: 0 0; width: 49px; height: 50px; }
.ru-matartru------icon_71{ background-position: -64px 0; width: 50px; height: 50px; }
.ru-matartru------icon_83{ background-position: -129px 0; width: 50px; height: 50px; }
.ru-matartru------icon_92{ background-position: -194px 0; width: 50px; height: 50px; }

И рекомендацию:
Не забудьте добавить правило для ссылки на спрайт изображение. Например, такое: #container li {
    background: url(csg-50f1294d10a32.png) no-repeat top left;
}

В самом низу вы увидите кнопку «Загрузить спрайт изображение»

Аккуратно сохраните в текстовый редактор CSS правила и рекомендацию. Сохраните на ваш компьютер спрайт изображение.

Специфика использования CSS спрайтов для Blogger состоит в том, что для отображения изображения нужно использовать исключительно тег <div>, что в итоге приводит к тому, что определенные способы использования спрайтов будут не валидными. С другой стороны, на мой взгляд, можно пожертвовать валидностью в угоду решения основной из основных задач оптимизации – ускорения скорости загрузки сайта.

Поблагодарим агрегатор за проделанную работу, но мы немного перепишем предложенные CSS правила.

Дело в том, что некоторые свойства CSS, предложенные агрегатором, являются общими для всех изображений. За отображение конкретного изображения отвечает тег <div> с соответствующим классом. Все используемые теги <div> будут иметь общее свойство background: url(csg-50f122dd87190.png) no-repeat top left. Отличаются слили тегов <div> только свойством background-position. Учитывая это, объединим общие свойства CSS в одно правило и пропишем для отдельных тегов <div> индивидуальные правила (чем они отличаются от общих).

Вот как выглядит наше спрайт изображение.

На картинке четыре иконки. Поскольку за отображение конкретного изображения с объединенной картинки отвечает тег <div>, нужно прописать CSS правила для четырех тегов (контейнеров) <div>.

В CSS это имеет такую конструкцию:
div.правило {свойства CSS}

В нашем примере это будет выглядеть следующим образом:/* sprite sharebuttons rus*/
div.ru-matartru------icon_70, div.ru-matartru------icon_71, div.ru-matartru------icon_83,div.ru-matartru------icon_92 {
background: url(https://pro100blogger.com/wp-content/uploads/2021/01/csg-50f1294d10a32.png) no-repeat top left;
background-position: 0 0;
width: 50px;
height: 50px;
}/* Общие стили контейнеров*/

div.ru-matartru------icon_71 {
background-position: -64px 0;
}
div.ru-matartru------icon_83 {
background-position: -129px 0;
}
div.ru-matartru------icon_92  {
background-position: -194px 0;
}
Для того, что бы добавить картинку из CSS спрайта, нужно в виджет или текст статьи добавить <div class=»правило CSS для изображения»></div>.

Если вы хотите, что бы изображения использовались в качестве кнопки, вам нужно <div class=»правило CSS для изображения»></div> вставить вовнутрь кода ссылки.

Выглядит это применительно к нашему примеру так:<!--noindex-->
<div id='email'>
<ul>
<li><a href='http://www.facebook.com/sharer/sharer.php?u' rel='nofollow' target='_blank' title='Добавь в Facebook'><div class="ru-matartru------icon_70"></div></a></li>
<li><a href='http://twitter.com/share?url=' rel='nofollow' target='_blank' title='Добавь в Twitter'><div class=" ru-matartru------icon_71"></div></a></li>
<li><a href='http://clubs.ya.ru/4611686018427451907/' rel='nofollow' target='_blank' title='Клуб Блоgгер'><div class=" ru-matartru------icon_83 "></div></a></li>
<li><a href='#' target='_blank' title='Mail.ru'><div class=" ru-matartru------icon_92"></div></a></li>
</ul>
</div>
<br /><br /><!--/noindex-->

Этот код можно добавить в виджет HTML/JavaScript и разместить, например, в сайдбаре блога.

Блок кнопок помещен в отдельный контейнер с идентификатором email. Это сделано для того, что бы можно было выровнять картинки по горизонтали, установить отступы между ними и позиционировать весь блок ссылок по горизонтали.

Добавьте в код вашего шаблона перед закрывающимся тегом skin указанные ниже стили
#email{margin-left: 10px;} /*Размещение всего контейнера по горизонтали */
#email li{float:left; padding-left: 2px; } /*Выравнивание картинок по горизонтали */
#email a{display:block; margin-left: 5px;} /*Отступы между картинками */

Меняйте значения свойств CSS подгоняя размещение блока с кнопками под ваши потребности.

Надеюсь, описанный в этой статье метод оптимизации сайтов вам понравился.

Не пожалейте три секунды и поблагодарите автора, нажав на кнопки внизу статьи.

На эту же тему читайте:

Как добавить кнопки twitter и facebook в Blogger
Гаджеты для блога — последние комментарии
Настройка домена для Blogger
Blogger — панель кнопок социальных сетей

8 комментариев для “Оптимизация сайта — CSS спрайты в Blogger”
  1. @Павел Иванович

    Спрайты в моем блоге никак не влияют на время загрузки авторизации.

    Думаю технические показатели блога не самые плохие.

    Технический аудит сайта pro100blogger.com
    Размер страницы: 106.25 Kb
    Кодировка: UTF-8
    Скорость загрузки: 172.96 Kb/s
    Время загрузки: 0.61 sec

  2. Вопрос связан с тем, что у меня по показателям скорости загрузки, форма подписки SR, никуда не годится, она на 65% ухудшает показатели скорости загрузки. Сайт на WP, есть смысл пытаться сжать её? Вроде и хостинг при выдаче сжимает.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *