Скорость 6 минут
Сколько на самом деле весит красивый сайт
Считается, что за красоту платят скоростью. На практике почти весь вес визуально сложной страницы приходится на две вещи — картинки и шрифты, — и обе сжимаются без потери впечатления.
Куда уходит вес
Разберём типичную «дорогую» страницу с крупными изображениями и одним трёхмерным объектом. Распределение почти всегда одинаковое:
| Что | Обычно | После работы |
|---|---|---|
| Фотографии и текстуры | 60–80% | сокращается в 5–20 раз |
| Шрифты | 5–15% | сокращается вдвое |
| Скрипты и библиотеки | 10–25% | зависит от подхода |
| Разметка и стили | 1–3% | практически не важно |
Формат решает больше, чем размер
Самая частая ошибка — отдавать фотографии в PNG. Этот формат создан для графики с резкими краями и прозрачностью, а не для снимков. Одна и та же текстура 2048×2048 в нашем замере:
- PNG — 8,4 МБ
- JPEG высокого качества — 0,64 МБ
- WebP того же визуального качества — 0,32 МБ
То есть простая смена формата дала выигрыш в двадцать шесть раз без единого видимого артефакта. Это самое дешёвое действие из всех возможных.
Одна оговорка. Карты рельефа и нормалей сжимать агрессивно нельзя: артефакты сжатия на них вылезают наружу выпуклостями, которых в модели нет. Такие изображения жмут бережнее остальных.
Шрифты
Начертание с кириллицей и латиницей весит примерно вдвое больше, чем нужно странице. Современные сервисы отдают их частями по диапазонам символов, поэтому браузер скачивает только нужную. Но если шрифт подключён файлом со своего сервера, эту работу надо делать руками.
Второе правило: два семейства, максимум три начертания. Каждое дополнительное — это отдельный файл и отдельная задержка.
Библиотеки
Здесь начинается настоящая разница подходов. Готовый конструктор тянет за собой каркас, набор плагинов и стили, которых страница не использует, — легко полтора-два мегабайта до единой картинки.
Страница, собранная вручную, содержит только то, что на ней есть. Для сравнения: главная этого сайта — с трёхмерной сценой, освещением и постобработкой — весит 588 КБ вместе с библиотекой трёхмерной графики, и единственный внешний файл на ней это одна фотография.
Премиальное не значит тяжёлое. Чаще наоборот: лишний вес — след поспешной сборки.
Что проверить на своём сайте прямо сейчас
- Открыть панель разработчика, вкладку сети, и отсортировать запросы по размеру. Верхние три строки — почти весь ваш вес.
- Посмотреть, нет ли среди них PNG-фотографий.
- Проверить, сколько файлов шрифтов грузится.
- Сравнить вес страницы с одной фотографией из телефона. Если страница тяжелее — есть что чинить.