Реальный пример технической оптимизации: одна фотография весом около 3 МБ замедляла загрузку сайта. После подготовки изображения для веба его размер удалось уменьшить до 53 КБ без заметной потери качества.
При разработке и продвижении сайтов нередко внимание уделяется сложным техническим вопросам: серверу, кэшированию, Core Web Vitals, настройкам Nginx и безопасности. Но иногда причиной ухудшения скорости становится одна-единственная фотография, которую никто не посчитал проблемой.
Именно такую ситуацию мы обнаружили во время технического SEO-аудита коммерческого сайта.
С чего всё началось
Клиент решил обновить главную страницу и добавить фотографию всей команды. Это абсолютно правильное маркетинговое решение.
Фотографии сотрудников помогают увеличить доверие, показать открытость компании и сделать сайт более «живым». Особенно это важно для бизнеса, который оказывает услуги или работает с дорогими товарами.
Однако во время подготовки изображения никто не проверил его технические характеристики.
Что оказалось не так
На сайт была загружена фотография:
- размер файла — около 3 МБ;
- разрешение — примерно 5000 × 2000 пикселей;
- формат — JPEG.
Чтобы представить масштаб изображения, достаточно сравнить его с привычными размерами печати.
При качестве печати 300 DPI такая фотография позволяет напечатать изображение примерно размером 42 × 17 сантиметров.
То есть файл был подготовлен скорее для качественной полиграфии, чем для просмотра на экране смартфона.
А сколько реально требуется сайту?
На большинстве современных мониторов блок с фотографией команды отображается шириной около 1200–1600 пикселей.
На мобильных устройствах это значение ещё меньше — зачастую всего 350–450 пикселей.
Получается, что браузер загружал изображение шириной 5000 пикселей, чтобы затем уменьшить его почти в четыре раза.
Пользователь этого даже не замечает, но объём передаваемых данных остаётся огромным.
На что это влияет
Одна большая фотография способна повлиять сразу на несколько технических показателей сайта.
- увеличивается время загрузки страницы;
- растёт объём передаваемых данных;
- замедляется отображение первого экрана;
- ухудшаются показатели Core Web Vitals;
- мобильные пользователи дольше ждут появления страницы.
Особенно заметна проблема при использовании мобильного интернета, где скорость соединения может значительно отличаться от домашнего Wi-Fi.
Почему это важно для бизнеса
Представим обычную ситуацию.
Пользователь вводит коммерческий запрос в поисковой системе, переходит на сайт компании и начинает ждать.
Если загрузка занимает слишком много времени, большинство посетителей не станет выяснять причины задержки.
Для пользователя существует только два варианта:
- дождаться открытия страницы;
- закрыть вкладку и открыть сайт конкурента.
Особенно критично это становится в конкурентных тематиках, где в поисковой выдаче находятся десятки похожих предложений.
Что было сделано
Во время технического аудита изображение было полностью переработано.
- разрешение уменьшено до 1600 пикселей по ширине;
- изображение переведено в формат WebP;
- сохранено качество, достаточное для современных экранов.
Результат
После оптимизации вес изображения уменьшился примерно с 3 МБ до 53 КБ.
Это означает уменьшение объёма передаваемых данных почти в 60 раз.
≈ 3 МБ Исходное изображение 53 КБ После оптимизации ≈ 98% Экономия объёма данныхПри этом визуально фотография практически не изменилась для пользователя.
Почему подрядчики часто не замечают такие ошибки
Подобная ситуация встречается значительно чаще, чем кажется.
Фотограф передаёт клиенту оригиналы в высоком разрешении.
Клиент отправляет фотографию разработчику.
Разработчик загружает файл на сайт, не проверяя его размер и не подготавливая отдельную веб-версию.
В результате на сайте оказывается изображение, предназначенное для печати больших плакатов, а не для просмотра в браузере.
Вывод
Качественные фотографии действительно повышают доверие пользователей и помогают увеличить конверсию сайта. Однако любое изображение должно быть подготовлено именно для веба.
Даже одна фотография может существенно увеличить объём загружаемых данных и негативно сказаться на скорости отображения страницы, особенно для мобильных пользователей.
Во время технического SEO-аудита мы рекомендуем проверять не только количество изображений, но и их фактическое разрешение, формат и размер файла. Нередко именно такие, на первый взгляд незаметные детали оказываются одной из причин снижения производительности сайта.