Тяжёлая обложка лендинга: как найти лишний вес
Как найти лишний вес обложки в браузере: реальный файл, размер передачи, мобильный вариант и проверка качества после сжатия изображения.
Уменьшать изображение стоит после проверки того, какой файл получает посетитель. На диске может лежать тяжёлый оригинал, а браузер уже загружает небольшой вариант. Бывает и обратное: аккуратное превью скрывает многомегабайтный фон.
После сборки AI-лендинга я бы выделял на обложку отдельную проверку. Её задача — найти лишнюю передачу и сохранить визуальное качество. Общего лимита килобайт, который гарантирует хорошую скорость для любого экрана и изображения, нет. Нужен бюджет под конкретную страницу и сеть.
Найдите фактическую загрузку
Откройте Network, отключите кеш только для диагностического прогона и перезагрузите страницу. Выберите запрос изображения первого экрана. Сохраните URL, переданный объём, формат и размеры. Если обложка реализована фоном, найдите её среди запросов Images. Отдельно проверьте картинку в обычном теге изображения.
В адаптивной разметке браузер может выбирать вариант через srcset. Поэтому название исходного файла не доказывает выбранное разрешение. Посмотрите фактический адрес загруженного ресурса и повторите проверку на узком экране. Эмуляция ширины без новой загрузки способна оставить ранее полученный большой вариант.
| Наблюдение | Вероятная причина | Следующая проверка |
|---|---|---|
| На телефоне приходит тот же большой файл | Нет подходящего адаптивного варианта | srcset, sizes и выбранный браузером URL |
| Пикселей достаточно, вес велик | Формат или сжатие не подходят изображению | Сравнить несколько экспортов глазами |
| Файл небольшой, появляется поздно | Запрос начинается поздно | Время обнаружения ресурса и lazy loading |
| Во время загрузки прыгает текст | Не зарезервировано место | Размеры и соотношение сторон в разметке |
Сначала уберите ненужные пиксели
Измерьте, какую ширину занимает обложка в макете. Учтите плотность пикселей устройства: файл шириной ровно в CSS-ширину на плотном экране может потерять резкость. При этом выдавать всем посетителям максимальный оригинал обычно необязательно. Подготовьте несколько разумных вариантов и поручите браузеру выбор через адаптивную разметку.
Дальше сравните сжатие. Смотрите на границы предмета, мелкую фактуру, градиент тёмного фона и артефакты вокруг текста, если он есть. Один параметр качества не одинаково работает для фотографии металла и плоской иллюстрации. Я бы принимал наименьший файл, у которого на целевом экране не видно существенной потери для смысла и композиции.
Условный расчёт: исходный файл 2 400 КБ, готовый вариант 240 КБ. Передаваемый объём уменьшился на 2 160 КБ, то есть на 90%. Это арифметика размера, не обещание ускорения страницы на 90%: сеть, кеш, другие ресурсы и начало запроса влияют отдельно.
Первый экран требует другого порядка загрузки
Если крупное изображение видно сразу, отложенная загрузка может мешать его своевременному появлению. web.dev разбирает различие между lazy loading нижних изображений и приоритетом видимого ресурса. Указание размеров также помогает заранее оставить место под картинку. Ни одна из этих настроек не заменяет уменьшение лишнего объёма.
Попросите разработчика сначала подтвердить, какой элемент стал LCP в измерении. Если им оказался текстовый блок, замена обложки не обязательно решит главную задержку. Результат оценивайте повторными замерами в одинаковых условиях и реальным просмотром; один удачный прогон слишком легко принять за эффект изменения.
Как принять оптимизацию
- Сохраните исходный файл и контрольный снимок страницы.
- Поменяйте один набор изображений, обновив ссылки на новую версию файла.
- Проверьте фактические запросы на компьютере и телефоне.
- Осмотрите обрезку, резкость и отсутствие сдвигов вёрстки.
- Сравните одинаковые измерения до и после, отдельно от субъективной оценки.
Для поискового и социального превью дополнительно проверьте реальные размеры OG-обложки. Совпадение экранного превью ещё не гарантирует правильный файл в метаданных. А готовность всей страницы принимается по сценарию лендинга. Следующим отдельным проходом стоит проверить факты в AI-тексте: лёгкая картинка не исправляет неподтверждённое обещание под ней.