Уроки
-
Введение
-
Поисковая оптимизация
- Битые ссылки
- Карта сайта
- Микроразметка
- Robots.txt
- Ссылки
- Текст
- Дубликаты
- Базовое
- Картинки
-
Скорость
- Минификация
-
Сокращение запросов
-
Переизбыток мелких картинок
Несгруппированные CSS файлы
Несгруппированные JavaScript файлы
Переизбыток шрифтов
Наличие сквозных CSS, JS файлов
Наличие монохромного шрифта
Загрузка дубликатов файлов
Использование JS фасадов
Перенаправление JavaScript кодом
Добавление ленивой загрузки
Редирект с/на www версию
- Шрифты
- Время загрузки
- Настройки сервера
- Картинки
- Первое содержимое
- Мобильность
- Баги
-
Удобство
- Соцсети
- Browserconfig.xml
- Манифест веб-приложения
- Фавиконы
- Почта
- Базовое
- Читаемость текста
-
Безопасность
- Шифрованное соединение
- Эксплойты
- Уязвимости
Переизбыток мелких картинок
Чтобы загрузить файл браузер тратит время на служебные операции. Оно постоянно и не зависит от скорости интернет соединения. То есть на загрузку файла может уйти 1 миллисекунда, а на служебные операции до 100.
Чтобы ускорить сайт, программисты группируют множество маленьких иконок в один большой файл. Это называется спрайтовой вёрсткой.
Некоторые SVG картинки лучше перенести в CSS файл. Например логотип сайта из шапки разумней разместить в CSS файле. Так вы сократите количество запросов и уменьшите общий размер передаваемых данных за счёт лучшей компрессии. Так если CSS файл весит в сжатом виде 100КБ, а логотип в SVG 20КБ, то при соединении их размер будет менее 120КБ. Это связано с особенностями алгоритми сжатия GZip.
Урок по использованию спрайтов. Сервис для генерации SVG спрайтов.