На первом экране посетитель ждёт не средний вес всех картинок, а конкретный видимый результат. Большая фотография в шапке может стать элементом LCP; тогда важно, чтобы браузер обнаружил её рано, получил подходящий файл и не тратил время на лишние запросы.
Определите главное изображение
Откройте страницу на мобильной ширине и найдите крупный баннер или фотографию, которая появляется сразу. В отчёте PageSpeed Insights проверьте элемент Largest Contentful Paint (LCP) и фактически загруженный файл. Иногда причиной задержки оказывается не сам размер, а позднее обнаружение изображения в HTML или медленный ответ сервера.
Не выбирайте виновника по размеру файла на диске. Откройте отчёт для конкретного URL и устройства, определите элемент LCP и затем найдите его запрос на вкладке Network. Запишите, когда браузер узнал об изображении, когда началась загрузка и сколько байтов было передано. Если LCP относится к текстовому блоку, работа с фотографией рядом может не изменить этот показатель.
Сначала исправьте очевидное
Проверьте разрешение изображения относительно его размера на экране и сравните доступные форматы. Сжатие изображений поможет снизить число передаваемых байтов. Если браузер получает оригинал вместо миниатюры, исправьте вывод через адаптивные размеры. После замены проверьте, не отдаёт ли CDN старую копию файла.
Сравните ширину картинки в макете с naturalWidth загруженного варианта. Если браузер получает слишком крупный исходник, проверьте srcset, sizes и правила темы, а затем выберите подходящий размер. После этого сожмите именно тот файл, который реально скачивается. Уменьшение другого варианта в медиатеке не даст эффекта для страницы, даже если отчёт плагина покажет хорошую экономию.
Три причины медленного первого экрана
- Лишние пикселиПроверьте размеры реально загруженной версии.
- Поздний запросПосмотрите, когда браузер узнаёт URL изображения.
- Другая задержкаСверьте LCP с временем ответа и блокирующими ресурсами.
Не откладывайте загрузку первого экрана
Для изображения, важного для LCP, обычно не подходит loading="lazy": оно может начать загружаться позже. WordPress управляет атрибутами загрузки в зависимости от контекста, но тема или другой плагин способны изменить результат. Проверьте конечный HTML: сочетание loading="lazy" и fetchpriority="high" для одного изображения противоречиво.
Изображение, которое видно без прокрутки, должно быть обнаружено достаточно рано. Если его адрес появляется только после выполнения скрипта или вставлен как CSS-фон, сравните время начала запроса с обычным img в HTML. Не ставьте loading="lazy" на важный первый экран по привычке. Для картинок ниже первого экрана ленивую загрузку, наоборот, можно оставить и проверять её отдельно.
Измерьте эффект
После правки повторите проверку на том же URL и типе устройства. Сравните размер переданного файла, время начала его загрузки и LCP. Не ожидайте, что одно сжатие исправит задержку из-за сторонних скриптов, CSS или медленного сервера. Если цифры не изменились, смотрите сетевую диаграмму загрузки.
После каждого изменения повторите измерение на той же странице и при сопоставимых условиях. Сравнивайте не один случайный запуск, а несколько попыток: сеть и сервер дают разброс. Если переданные байты стали меньше, но LCP почти не изменился, посмотрите на задержку ответа сервера, блокирующие стили и момент обнаружения изображения. Так следующий шаг будет связан с реальным узким местом.
Разберём на примере
Допустим, баннер уже сжат, но начинает загружаться после длинной цепочки JavaScript. Ещё одно сжатие даст небольшой эффект, а раннее появление изображения в HTML может помочь заметнее. Смотрите водопад запросов и фактический LCP, прежде чем менять атрибуты загрузки.
Проверьте перед публикацией
- Убедитесь, что главное изображение не загружается лениво без причины.
- Проверьте размер переданного файла и момент начала запроса.
- Повторите замер на том же URL и устройстве после очистки кэша.
Что дальше
Читайте документацию WordPress об атрибутах загрузки и используйте анализатор изображений как начальный ориентир.