Как найти большие изображения, замедляющие сайт

Почему изображения замедляют загрузку

У изображения есть три разных размера: вес файла в байтах, физические размеры в пикселях и размер в макете. Если в карточке показывается 600 × 450 px, а сервер отдаёт исходник 4000 × 3000 px, посетитель скачивает невидимые детали.

Самая важная картинка — баннер, обложка или главное фото товара на первом экране. Она часто влияет на Largest Contentful Paint (LCP). Для неё важны корректный размер и современный формат; декоративные изображения ниже сгиба могут загружаться позже.

Где найти тяжёлые изображения на сайте

1. PageSpeed Insights и Lighthouse

Откройте нужный URL в PageSpeed Insights и смотрите рекомендации по изображениям: неэффективная кодировка, слишком большой ресурс, неправильная доставка под размер экрана. Lighthouse удобно запускать и в Chrome DevTools — так можно проверить как мобильный, так и десктопный сценарий. Начинайте с страниц, которые получают органический трафик или используются в рекламе.

2. Вкладка Network в DevTools

В Chrome откройте инструменты разработчика → Network, обновите страницу и отфильтруйте тип Img. Отсортируйте по Size или Transferred. Здесь видны конкретный URL, фактически скачанный вес, формат и время передачи. При отключении кеша результат ближе к опыту нового посетителя.

3. Краулер и технический аудит

Для десятков и сотен URL ручная проверка не подходит. Обход сайта помогает собрать адреса картинок, коды ответа, alt, размеры и вес, а затем отсортировать список. Начните с аудита сайта и отдельно проверьте изображения без alt: один реестр медиафайлов позволяет решить сразу вопросы скорости и доступности.

Быстрый старт. Сначала выберите 10 посадочных страниц с наибольшим трафиком. На каждой найдите три самых тяжёлых изображения, сравните их естественный и отображаемый размер, после чего внесите задачи в очередь по влиянию на первый экран.

Что записывать в таблицу аудита

Не ограничивайтесь колонкой «МБ»: файл в 900 КБ на первом экране может быть важнее десяти файлов в подвале. Таблица сохраняет контекст и делает задачу понятной разработчику.

Как задать порог

Единого безопасного числа нет: баннер неизбежно тяжелее иконки. Сравнивайте одинаковые типы страниц и не передавайте больше пикселей, чем нужно конкретному экрану.

Как уменьшить вес и не испортить качество

1. Сначала уменьшите исходные габариты. Подготовьте вариант, соответствующий крупнейшему реальному месту в шаблоне, а не загружайте фотографию «на всякий случай».
2. Выберите формат. Для фото чаще всего подходят WebP или AVIF; для прозрачной простой графики — SVG, если это действительно вектор. Сохраняйте запасной формат, если его требует ваш стек.
3. Настройте качество осознанно. Экспортируйте несколько вариантов и сравните на реальном устройстве, особенно текстуры, мелкий текст и градиенты. Цель — не минимальный вес, а незаметная компрессия.
4. Отдавайте нужный вариант. srcset и sizes помогают браузеру выбрать файл под ширину экрана. Это полезнее, чем один универсальный «тяжёлый» оригинал.
5. Разделяйте приоритеты. Картинку первого экрана не прячьте за lazy loading. Изображения ниже сгиба можно загружать отложенно, чтобы они не конкурировали с главным контентом.
6. Добавьте размеры в разметку. Атрибуты width и height резервируют место и уменьшают скачки макета.

Практический совет

После замены файлов не очищайте задачу из списка сразу. Откройте страницу в режиме инкогнито, проверьте Network и убедитесь, что HTML действительно ссылается на новый ресурс. Частая ошибка — оптимизировать файл в папке, но оставить в шаблоне старый URL или фон через CSS.

Скорость зависит не только от медиа. Проверьте время ответа, кеширование и цепочки ресурсов с помощью проверки ответа сервера, а полный порядок работ соберите в инструкции по поиску технических ошибок сайта.

Проверка после изменений

Перепроверьте ту же страницу на тех же условиях. Сравните вес главных файлов, начало загрузки изображения первого экрана, LCP и визуальное качество. На мобильном шаблон может отдать другую картинку или загрузить лишнее в слайдере.

Регулярный контроль проще вести вместе с проверкой скорости и Core Web Vitals. Если страница стала быстрее, но просел CTR, убедитесь, что оптимизация не испортила обложку или товарное фото. Скорость и качество контента не конкурируют, когда изображения подготовлены под конкретный сценарий.

Главный принцип

Оптимальное изображение — не самый маленький файл, а файл для нужного экрана, который быстро приходит и выглядит убедительно. Начинайте с ценных страниц и измеряйте результат после каждого этапа.