Параметр -q 75 задаёт качество (75 из 100). Оптимальный диапазон: 70–85.
Шаг 2: Сжатие фолбековых изображений
Не все браузеры поддерживают WebP. Для старых браузеров оставьте оригинальные форматы (JPEG, PNG), но обязательно сожмите их.
Инструменты для сжатия:
- TinyPNG / TinyJPG — онлайн-сервис
- ImageOptim — для macOS
- Squoosh — веб-приложение от Google
Шаг 3: Настройка Lazy Load
Lazy Load откладывает загрузку изображений, которые находятся вне зоны видимости. Пользователь видит страницу быстрее, а картинки подгружаются по мере прокрутки.
Как реализовать:
- Нативный атрибут:
<img loading="lazy" src="image.jpg">
- JavaScript-библиотеки: Lozad.js, LazyLoad
2. Минификация файлов (приоритет №2)
Минификация удаляет лишние символы из кода (пробелы, комментарии, переносы), уменьшая размер файлов.
Шаг 1: Сжатие CSS и JavaScript
Инструменты для минификации:
- CSS: CSSNano, CleanCSS
- JS: UglifyJS, Terser
- Онлайн: CSS Minifier, JSCompress
Шаг 2: Объединение файлов
Каждый файл — это отдельный запрос к серверу. Объедините все стили в один файл styles.min.css, а скрипты — в scripts.min.js. Это сократит количество запросов и ускорит загрузку.
Важно: Не объединяйте файлы критически важных скриптов (например, аналитику), если они нужны сразу.
Итоговый чек-лист
✅ Конвертировать все изображения в WebP
✅ Сжать оригинальные изображения (фолбеки)
✅ Включить Lazy Load для изображений
✅ Минифицировать все CSS-файлы
✅ Минифицировать все JS-файлы
✅ Объединить стили в один файл
✅ Объединить скрипты в один файл
Начните с этих шагов — и вы уже получите значительный прирост скорости. Далее можно переходить к кэшированию, сжатию Gzip/Brotli и оптимизации сервера.
