Оптимизация изображений WordPress: пошаговое руководство

Почему картинки тормозят сайт и при чём тут заявки

Типичная история: сайт сделали на WordPress, менеджер загрузил в каталог фотографии прямо с телефона, и страница товара стала открываться заметно дольше. В Узбекистане значительная часть посетителей приходит с мобильного интернета, часто из Instagram или Telegram, и ждать они не будут. Если за несколько секунд не появилась первая картинка и кнопка, человек возвращается в ленту или уходит на OLX и Uzum к конкуренту.

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

Что WordPress делает сам, а что остаётся на вас

Система умеет многое из коробки. При загрузке она создаёт уменьшенные копии, добавляет атрибуты srcset и sizes, чтобы браузер выбирал подходящий размер под экран, ставит отложенную загрузку для картинок в контенте и уменьшает чрезмерно большие исходники, сохраняя оригинал отдельно. Современные форматы вроде WebP и AVIF тоже поддерживаются, если их умеет серверная библиотека обработки.

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

Пошаговая оптимизация изображений WordPress

Лучше идти по порядку: сначала меняются привычки при загрузке, потом настройки, и только затем подключается инструмент автоматизации.

• Шаг 1. Подготовьте исходник до загрузки: обрежьте лишнее и уменьшите до реально нужной ширины. Фото для колонки контента не нуждается в размере с полноценной камеры.
• Шаг 2. Выберите формат: для фотографий — JPEG или WebP, для логотипов и простой графики — SVG или PNG. Фотография в PNG почти всегда лишний вес.
• Шаг 3. Назовите файл латиницей по смыслу, например oshxona-mebeli-oq.jpg, а не IMG_4821.jpg.
• Шаг 4. Заполните alt для значимых изображений: у товара — название и то, что видно на фото. Декоративные картинки можно оставить без описания.
• Шаг 5. Попросите разработчика проверить, какие размеры изображений регистрируют тема и плагины, и отключить неиспользуемые. Иначе каждая загрузка плодит десятки копий, а диск хостинга заполняется.
• Шаг 6. Подключите один плагин сжатия и обработайте уже загруженные файлы.
• Шаг 7. Проверьте результат в PageSpeed Insights и в инструментах разработчика.

Плагин сжатия: как выбрать и сравнить варианты

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

Перед выбором ответьте себе на четыре вопроса: какие форматы нужны; где идёт обработка; сохраняются ли оригиналы или резервные копии; как плагин отдаёт WebP — подменой тега picture в коде страницы или правилами сервера. Второй способ удобнее, но его надо проверять вместе с плагином кеширования: если оба вмешиваются в выдачу формата, возможны конфликты.

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

Пример: интернет-магазин мебели в Ташкенте

Представим магазин, который принимает оплату через Click и Payme и ведёт основной трафик из Instagram. Контент-менеджер загружает фото диванов прямо с телефона, в слайдере на главной стоят крупные PNG, а тема вставляет баннер фоном через CSS. Покупатель открывает ссылку из рекламы, и первый экран долго остаётся пустым.

Порядок исправления: сначала заменить слайдер лёгкими JPEG или WebP нужной ширины, затем перевести главный баннер из фона в обычный тег изображения, чтобы заработали srcset и приоритет загрузки. Дальше — подключить плагин сжатия для каталога, убрать лишние размеры и проверить, что первая картинка не помечена отложенной загрузкой. Реальный эффект измеряйте на своих страницах, а не по чужим обещаниям.

Типичные ошибки

Большинство проблем повторяется от сайта к сайту, и почти все решаются настройками.

• Главное изображение вставлено фоном через CSS, поэтому встроенные оптимизации на него не действуют.
• Первой картинке на странице стоит отложенная загрузка, и LCP ухудшается.
• Плагин кеширования и плагин изображений по-разному подменяют форматы и конфликтуют.
• Огромные PNG в слайдере на главной.
• После переезда сайта картинки ссылаются на старый домен.
• Страницы вложений остаются в индексе и создают тонкие страницы: включите в SEO-плагине перенаправление на файл или основную запись.
• Чистка медиатеки без проверки: файл, вставленный где-то на сайте или проиндексированный в поиске по картинкам, лучше не удалять без перенаправления.

Как проверить результат и чек-лист

После изменений не доверяйте ощущениям, проверьте по порядку: сравните вес ключевых страниц до и после во вкладке Network инструментов разработчика; посмотрите LCP и рекомендации по изображениям в PageSpeed Insights; откройте исходный код и убедитесь, что у картинки первого экрана нет отложенной загрузки; проверьте, что браузер получает WebP или AVIF там, где он их поддерживает. Если сайт ориентирован на аудиторию в разных странах, оцените также CDN: он хранит копии ближе к посетителям и умеет конвертировать форматы.

Короткий чек-лист: исходники уменьшены; имена латиницей; alt заполнен; лишние размеры отключены; работает один плагин сжатия; первое изображение не откладывается; страницы вложений перенаправлены; результат измерен.

Что дальше

Картинки — только часть технического SEO: скорость, структура, индексация и контент работают вместе. Если вы хотите, чтобы специалист посмотрел ваш сайт, нашёл тяжёлые места и расставил приоритеты, команда markdev проводит SEO-оптимизацию сайтов в Узбекистане. Напишите нам задачу, и мы подскажем, с чего начать именно в вашем случае.