🐱 🦊 🐼 🦝 🐰 🦉

Кто сегодня с нами? 🐾

Животные меняются при загрузке страницы

Главная / Блог / Оптимизация изображений в WordPress: от lazy loading до WebP и их влияние на скорость

11.05.2026 10 мин чтения 1794 слов

Оптимизация изображений в WordPress: от lazy loading до WebP и их влияние на скорость

Включаем lazy loading, конвертируем в WebP, применяем безпотерьное сжатие и проверяем Core Web Vitals – ускоряем WordPress.

🐱

Читать проще с подсказками

Карточки, чек-листы, таблицы и примеры помогают быстро найти нужный ответ.

✅ чек-листы 📈 SEO-практика ⚡ быстро

Изображения – один из ключевых факторов, влияющих на Core Web Vitals и общую скорость загрузки страниц. В WordPress они часто «живут» дольше, чем нужно, и требуют целого ряда настроек, чтобы не тормозить сайт. В этом руководстве рассматриваются конкретные решения: встроенный lazy loading, переход на WebP, сжатие без потерь, а также способы измерения и контроля результата.

Оптимизация изображений в WordPress начинается с включения lazy loading, затем переходит к конвертации в WebP и сжатию без потерь. После этого необходимо проверить влияние на Core Web Vitals и скорректировать настройки, чтобы избежать конфликтов и ошибок.

Оптимизация изображений: зачем это нужно в WordPress

Изображения – это тяжёлый груз, который может замедлить любую страницу. Они влияют на три ключевых показателя Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Большой файл, загружаемый до того, как пользователь увидит контент, удлиняет LCP, а отсутствие предварительного резервного пространства для картинок приводит к CLS, когда элементы «прыгают» при загрузке. Кроме того, медленные картинки увеличивают общее время загрузки, что отражается в метриках First Contentful Paint (FCP) и Speed Index.

В WordPress изображения обрабатываются автоматически: при загрузке создаются несколько копий разного размера, и каждая из них может быть подставлена в разные места шаблона. Это приводит к избыточной загрузке, особенно если в теме включён «lazy‑loading» только для определённых блоков. Плагины, которые добавляют собственные размеры, могут конфликтовать с настройками ядра, создавая лишние запросы. Поэтому оптимизация в WordPress требует чёткой стратегии: правильный формат (WebP вместо JPEG/PNG), адекватный размер, lazy‑loading и серверная кэш‑система, совместимая с CDN. Без такой координации даже небольшие изображения могут стать узким местом, которое замедляет всю страницу и ухудшает пользовательский опыт.

Встроенный lazy loading: как он работает и как настроить

Проверка ядра. Убедитесь, что WordPress ≥ 5.5. В версии 5.5+ lazy‑loading включён по умолчанию. Если сайт на старой версии, добавьте в wp-config.php строку define( 'WP_DEBUG', true ); и обновите ядро.
Включение в ядре. Если по каким‑то причинам lazy‑loading отключён, включите его вручную: в functions.php добавьте фильтр add_filter( 'wp_lazy_loading_enabled', '__return_true' );. Это гарантирует, что все <img> получат атрибут loading="lazy".
Проверка атрибутов. Откройте страницу в браузере, нажмите Ctrl+U (или Cmd+Option+U) и найдите <img>‑теги. Убедитесь, что у каждой картинки есть loading="lazy". Если атрибут отсутствует, проверьте, не переопределяется ли он в шаблоне.
Отладка в DevTools. В Chrome откройте Network, включите фильтр lazy и обновите страницу. Картинки, которые загружаются только при прокрутке, будут помечены как lazy. Это подтверждает работу механизма.
Проверка конфликтов. Отключите все плагины, которые могут управлять загрузкой изображений (например, Lazy Load by WP Rocket, Smush и др.). Если после отключения атрибут появляется, включайте плагины по одному, проверяя наличие loading="lazy" после каждого включения. Если конфликт обнаружен, ищите в коде плагина фильтр wp_lazy_loading_enabled и отключайте его.
Проверка темы. Убедитесь, что тема выводит изображения через стандартные функции WordPress (wp_get_attachment_image(), the_post_thumbnail()). Если тема использует собственный <img>‑тег, добавьте атрибут loading="lazy" вручную.
Проверка кеша. После всех изменений очистите кэш браузера и кеш плагинов (если есть). Проверьте, что атрибут loading="lazy" присутствует в итоговом HTML, а не в кэш‑версии.

Картинка имеет атрибут loading="lazy".
Отсутствуют дублирующие атрибуты loading="eager" у тех же тегов.
Плагин, отключающий lazy‑loading, не активен.
Тема использует стандартные WordPress‑функции для вывода изображений.
Кеш браузера и серверный кеш очищены после изменений.

/* functions.php – включаем lazy‑loading в ядре */
add_filter( 'wp_lazy_loading_enabled', '__return_true' );

Переход к формату WebP: инструменты и практические шаги

Создайте полную резервную копию сайта, включая базу и медиа.
Проверьте, поддерживает ли ваш хостинг формат WebP (доступность MIME type image/webp и заголовок Content-Type).
Установите и активируйте staging‑среду, чтобы тестировать изменения без влияния на продакшн.
Определите базовую метрику: запустите PageSpeed Insights, Lighthouse и измерьте средний размер изображений в srcset.
Скачайте и установите утилиту cwebp на локальный сервер или в CI‑pipeline.
Подготовьте список плагинов для автоматической конвертации: ShortPixel, EWWW Image Optimizer, Imagify, WP Smush Pro.
Проверьте совместимость выбранного плагина с текущей темой и другими плагинами (особенно с Lazy Load).
Создайте резервную копию wp-config.php и .htaccess перед внесением правил для WebP.
Настройте правила сервера (Apache, Nginx) для отдачи WebP при наличии соответствующего заголовка Accept.
Запланируйте время для ручной конвертации: выделите каталоги wp-content/uploads и wp-content/cache для batch‑конвертации через cwebp.
После конвертации обновите srcset в базе данных через WP-CLI, чтобы ссылки указывали на .webp файлы.

Полная резервная копия сайта.
Поддержка MIME type image/webp на сервере.
Доступ к server‑configuration (Apache, Nginx).
Установленная утилита cwebp.
Выбранный плагин для авто‑конвертации.
Тестовая среда для проверки.
Метрики baseline: PageSpeed, Lighthouse, Core Web Vitals.

Сжатие изображений: с потерями и без потерь

Сжатие изображений в WordPress – это баланс между качеством и размером. JPEG подходит для фотографий, PNG – для графики с прозрачностью, WebP – современный формат, объединяющий лучшие черты обоих. Инструменты Imagify, ShortPixel и Squoosh позволяют быстро преобразовать файлы, сохраняя SEO‑friendly размеры.

Формат	Тип сжатия	Типичный коэффициент	Прозрачность	Поддержка браузеров	Влияние на SEO	Рекоменд. инструмент
JPEG	Потерянное	10‑25 %	Нет	Chrome, Edge, Safari, Firefox	Быстрая загрузка, хорошее качество	Imagify, ShortPixel
PNG	Без потерь	50‑70 %	Да	Все основные браузеры	Большой размер, но точная графика	Imagify, ShortPixel
WebP	Потерянное / без потерь	30‑40 %	Да	Chrome, Edge, Safari v14+, Firefox	Лучший баланс качества и веса	Imagify, ShortPixel, Squoosh

Проверка производительности: как измерить эффект

После внедрения lazy loading, WebP и оптимизации размеров изображений важно подтвердить, что скорость действительно выросла. Для этого запускаем три проверочных инструмента: Lighthouse, PageSpeed Insights и GTmetrix. Каждый из них выдаёт набор метрик, которые напрямую связаны с Core Web Vitals. LCP (Largest Contentful Paint) показывает момент, когда пользователь видит основной контент; FID (First Input Delay) измеряет отзывчивость; CLS (Cumulative Layout Shift) фиксирует визуальные смещения. Если после оптимизации LCP падает до 2,5 с, FID ≤ 100 мс и CLS 

Запустите Lighthouse в Chrome DevTools, запишите LCP, FID, CLS и общий score.
Сохраните результаты в PageSpeed Insights, проверьте Performance score и список Opportunities.
В GTmetrix откройте waterfall, посчитайте общее число запросов и размер всех ресурсов.
Сравните данные до и после: LCP ↓, FID ↓, CLS ↓, Requests ↓, Total Size ↓.
Если какой‑то показатель не улучшился, вернитесь к настройке lazy loading, WebP‑конвертации или к уменьшению размеров изображений.

Распространённые ошибки и как их избежать

Неправильные размеры файлов
Последствия: изображения «растянуты» или «сжатые» до неузнаваемости, увеличивает время загрузки и ухудшает Core Web Vitals.
Как избежать: проверяйте размеры в графическом редакторе, экспортируйте в пикселях, соответствующих фактической вёрстке, и сохраняйте в оптимальном формате (WebP/AVIF).
Избыточные слои в PSD
Последствия: лишние слои делают файл тяжёлым, затрудняют экспорт и увеличивают время обработки плагинов оптимизации.
Как избежать: перед экспортом объединяйте слои, удаляйте скрытые и неиспользуемые элементы, сохраняйте промежуточные слои в отдельном файле для редактирования.
Конфликт плагинов
Последствия: одновременное использование нескольких оптимизаторов приводит к двойному сжатию, ошибкам в атрибутах lazy‑loading и дублированию скриптов.
Как избежать: выбирайте один надёжный плагин для lazy‑loading и один для конвертации в WebP, отключайте остальные, проверяя консоль браузера на конфликтные скрипты.
Неоптимизированные атрибуты
Последствия: отсутствие атрибутов width и height заставляет браузер перерасчитывать макет, увеличивая CLS и задержку первого рендеринга.
Как избежать: генерируйте изображения через API, который автоматически добавляет размеры, либо прописывайте их вручную в шаблонах, проверяя в DevTools.

План внедрения: от анализа до релиза

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

Этап	Краткое описание	Время	Ключевые задачи
Аудит текущих изображений	Сбор метрик по размеру, формату, частоте загрузки; анализ медленных запросов; определение приоритетных файлов.	Неделя 1	Сканирование медиа‑библиотеки; экспорт списка; оценка общего объёма; выявление неиспользуемых изображений.
Выбор плагинов	Сравнение lazy‑loading, WebP‑конвертации, кеширования. Оценка совместимости с темой и другими плагинами.	Неделя 2	Тестовый запуск; проверка поддержки сервера; настройка параметров; резервное копирование.
Конвертация и тестирование	Преобразование исходных файлов в WebP; проверка fallback; измерение времени загрузки; нагрузочное тестирование.	Недели 3‑4	Batch‑конвертация; настройка CDN; проверка SEO‑тегов; A/B‑тестирование скорости.
Запуск и мониторинг	Переключение в продакшн; постоянный контроль Core Web Vitals; логирование ошибок; корректировка параметров.	Неделя 5+	Настройка метрик в Google Search Console; наблюдение за Lighthouse; анализ пользовательских данных; итеративная оптимизация.

Мониторинг после запуска: метрики и корректировки

Включите Google Search Console и проверьте вкладку «Показатели» – LCP, FID, CLS. Сравните их с базовыми значениями до оптимизации.
В Yandex Metrika откройте «Показатели» → «Скорость загрузки» и «Core Web Vitals». Отслеживайте отклонения в реальном времени.
Обратите внимание на Page Experience в GSC: наличие ошибок в Core Web Vitals и их влияние на ранжирование.
Периодически проверяйте Coverage и «Состояние индексации» – убедитесь, что новые изображения не блокируются robots.txt.
Запланируйте регулярные проверки (еженедельно) в обеих системах: фиксируйте метрики, сравнивайте с предыдущими периодами, корректируйте при падении.
Если CLS превышает 0,1, проверьте динамическую загрузку изображений и их размеры в разметке.

Google Search Console – LCP, FID, CLS (показатели в «Показателях»).
Yandex Metrika – «Скорость загрузки», «Core Web Vitals».
Покрытие индексации (Coverage) – отсутствие блокировок изображений.
Сравнение с базовыми метриками до оптимизации.
Еженедельный мониторинг: фиксировать изменения, устранять отклонения.

Вопросы и ответы

Как включить lazy loading в WordPress 6.5?

WordPress 6.5 автоматически добавляет атрибут loading="lazy" к изображениям в контенте. Для изображений в сайдбаре или виджетах добавьте в functions.php фильтр add_filter('wp_lazy_loading_enabled', '__return_true');. Чтобы отключить – use add_filter('wp_lazy_loading_enabled', '__return_false');

Какие плагины лучше использовать для конвертации в WebP?

Для конвертации в WebP популярны EWWW Image Optimizer, ShortPixel и Imagify. Они автоматически создают WebP при загрузке и заменяют оригиналы в выводе. Выбор зависит от бюджета: бесплатные версии ограничены, платные – без лимитов. Настройте в настройках плагина.

Как проверить, что изображения действительно оптимизированы?

Используйте инструменты Lighthouse, PageSpeed Insights или GTmetrix – они покажут размер и формат изображений. Также можно открыть исходный код страницы и убедиться, что в src содержится .webp или что размер файла меньше 100 КБ. Проверка вручную через FTP тоже возможна.

Какой размер изображения лучше использовать для мобильных устройств?

Для мобильных обычно 640–1080 пикселей по ширине. Учитывайте плотность пикселей: 1× – 640 px, 2× – 1080 px. Уменьшайте до нужного размера в редакторе изображений, чтобы избежать лишнего веса. Размер файла не должен превышать 150 КБ.

Как настроить автоматическую генерацию миниатюр в WebP?

В большинстве конвертеров WebP включите опцию «Generate WebP for thumbnails». После этого при создании миниатюры WordPress автоматически создаст файл .webp. Убедитесь, что тема использует функцию wp_get_attachment_image() с аргументом 'image_size' – тогда WebP будет подставлен.

Как проверить скорость загрузки страниц после оптимизации изображений?

Запустите тесты в Google PageSpeed Insights, Lighthouse или WebPageTest. Сравните показатели «Largest Contentful Paint» и «Total Blocking Time» до и после оптимизации. Разница в 0,5–1 с обычно свидетельствует о успешном улучшении.

Как избежать потери качества при сжатии?

Используйте сжатие без потерь (lossless) для логотипов и PNG, а для фотографий – сжатие с низкой потерей (quality 80–85). Плагины позволяют задать уровень качества. Проверяйте визуально и сравнивайте размеры файлов.

Как включить lazy loading для пользовательских изображений в теме?

В шаблоне замените echo get_the_post_thumbnail() на echo wp_get_attachment_image( $id, 'full', false, array( 'loading' => 'lazy' ) );. Для пользовательских полей используйте wp_get_attachment_image() с параметром loading. Это гарантирует lazy loading для всех пользовательских изображений.

Важно

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

Редакционная проверка

Материал подготовлен и проверен редакцией AX.SEO

Проверено

Автор Редакция AX.SEO

Digital-редактор • 7 лет опыта

Редакция AX.SEO готовит материалы о SEO, разработке, AI, аналитике, маркетинге и росте digital-проектов.

✓

Проверил Александр SEO

SEO-специалист • 10 лет опыта

Проверяет практическую применимость рекомендаций, корректность терминов и соответствие материала digital-тематике.

AX.SEO объясняет digital простым языком: без магии, пустых обещаний и “секретных кнопок роста”.