Главная
›
Новости
Советы по оптимизации веб-сайтовОпубликовано: 21.06.2017 Оптимизация и продвижение сайта в ТОП Яндекса и Google
166
IT блог --- Советы по оптимизации веб-сайтов
Привет, сегодня я хотел бы рассказать про некоторые методы, которые я использую на своих сайтах для увеличения их быстродействия. В качестве объективной оценки быстродействия страниц сайта, я использую инструмент PageSpeed, который вы можете использовать на странице
PageSpeed Insights . SEO-оптимизация сайта. Практический урок на примере живого сайта
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 изменяем позицию данного фона: |