Уроки
-
Введение
-
Поисковая оптимизация
- Битые ссылки
- Карта сайта
- Микроразметка
- Robots.txt
- Ссылки
- Текст
- Дубликаты
- Базовое
- Картинки
-
Скорость
- Минификация
-
Сокращение запросов
-
Переизбыток мелких картинок
Несгруппированные CSS файлы
Несгруппированные JavaScript файлы
Переизбыток шрифтов
Наличие сквозных CSS, JS файлов
Наличие монохромного шрифта
Загрузка дубликатов файлов
Использование JS фасадов
Перенаправление JavaScript кодом
Добавление ленивой загрузки
Редирект с/на www версию
- Шрифты
- Время загрузки
- Настройки сервера
-
Картинки
-
Исходный и отображаемый размер картинок
Использование технологии спрайтов
- Первое содержимое
- Мобильность
- Баги
-
Удобство
- Соцсети
- Browserconfig.xml
- Манифест веб-приложения
- Фавиконы
- Почта
- Базовое
- Читаемость текста
-
Безопасность
- Шифрованное соединение
- Эксплойты
- Уязвимости
Использование технологии спрайтов
Спрайт - это крупное изображение, состоящие из десятков мелких. Спрайт создаётся путём размещения всех иконок на одной картинке подобно наклеиванию стикеров на доске. Делалось это для того, чтобы сократить количество запросов к серверу и ускорить загрузку страницы. 30 картинок по 2 килобайта загружаются в разы медленней, чем одна картинка за 60 килобайт.
Используют спрайт следующим образом: у HTML элемента фоном указывается спрайтовое изображение, а затем этот фон смещают таким образом, что на картинке видна только определённая иконка.
Но у этой технологии есть ряд недостатков:
- Чтобы оптимизировать спрайт под разные устройства, нужно писать дополнительный CSS код. При использовании data-url вы указываете лишь фон и стиль заполнения «background-size: contain;». При использовании спрайта указываете фон, размер элемента (должен быть задан строго), масштаб в процентах (например «background-size: 50%;», позиционирование фона «background-position».
- Сложен в поддержке. Позиционирование спрайта в качестве фона требует от программиста повышенной аккуратности. А если в вёрстке размер элемента поменяется, то потребуется редактировать сам в спрайт, который используется в десятки мест на сайте, и заново отлаживать внешний вид элемента. Если вследствие ошибки программиста, размер элемента изменится на 1px, то элемент начнёт отображаться не корректно. При использовании DataURL мелкая помарка не скажется на внешнем виде.
- Спрайты не поддаются проверке нашим сервисом. А это значит, что вам придётся проверять всё вручную.
Есть замечания или дополнения? Напишите нам на почту admin@quick-site-upgrade.com.
Проверьте ваш сайт