Главная › Новости

Советы по оптимизации веб-сайтов

Опубликовано: 20.10.2017

166

IT блог --- Советы по оптимизации веб-сайтов

Привет, сегодня я хотел бы рассказать про некоторые методы, которые я использую на своих сайтах для увеличения их быстродействия. В качестве объективной оценки быстродействия страниц сайта, я использую инструмент PageSpeed, который вы можете использовать на странице PageSpeed Insights .

1. Используем CSS-спрайты

Техника CSS-спрайтов находит широкое применение на современных сайтах и заключается в объединении нескольких картинок в одну и дальнейшей настройки свойства background-position .

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

Давайте в качестве примера рассмотрим простую кнопку, для которой требуются три состояния - по умолчанию, при наведении курсора мыши и активное состояние (например, когда кнопка нажата). На рисунке ниже показаны все три состояния, объединенные в один файл. Стоит отметить, что данный пример лучше реализовать с помощью CSS3 и не использовать для этого картинки, но в данном случае я решил не усложнять пример.

По умолчанию используется более темный цвет кнопки, когда пользователь наводит курсор кнопка подсвечивается, когда он щелкает по ней - подсвечивается еще сильнее. Соответственно за все три состояния отвечает одна картинка, просто, при каждом действии пользователя меняется ее положение. На CSS подобное поведение реализуется с помощью псевдо-селекторов hover и active :

button { background:url(../img/my_image.png) 0 0; } button:hover { background-position: 0 -67px; } button:active { background-position: 0 -134px; }

В данном коде мы сначала задаем элементу меню картинку, которую используем в качестве фонового изображения. Затем, с помощью псевдо-селекторов и свойства background-position изменяем позицию данного фона: