Как исправить доставку изображений в PageSpeed Insights

1. 01Откройте нужную страницу в PageSpeed Insights или Lighthouse. Выберите мобильный либо настольный отчёт, раскройте раздел оптимизации доставки изображений и запишите URL отмеченного файла и предложенное изменение.
2. 02Найдите изображение на странице. В инструментах разработчика сравните скачанный файл с отображаемыми размерами с учётом плотности экрана. Проверьте выбранный источник, а не только оригинал в медиатеке.
3. 03Если выдаваемый файл содержит лишние пиксели, сначала исправьте адаптивные размеры или настройки темы. Если размеры подходят, сравните сжатие или другой поддерживаемый формат.
4. 04Подготовьте копию нужных размеров в редакторе. Для подходящих файлов используйте компрессор изображений Bitinz; перед заменой проверьте текст, края, прозрачность и градиенты.
5. 05Опубликуйте новый файл или изменение шаблона. Убедитесь, что страница запрашивает новое изображение, а не старую копию из кеша, и повторите отчёт с тем же типом устройства.

Chrome оценивает экономию по объёму загрузки и эффективному отношению байтов к пикселям для формата. Изображения с ожидаемой экономией менее 4 KiB не отмечаются. Это порог отчёта, а не рекомендуемый максимальный размер файла.

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

• WordPress: проверьте выбранный в блоке или теме размер и фактическую разметку srcset и sizes. WordPress создаёт адаптивные варианты, но собственный шаблон или неточное описание макета всё ещё могут приводить к неподходящему размеру. Изменение только оригинала может оставить в работе ранее созданные копии.
• Shopify: изображения магазина уже оптимизируются через CDN Shopify, включая выбор формата. Shopify считает ручное сжатие перед загрузкой ненужным. При предупреждении проверьте запрошенную темой ширину и адаптивную разметку вместо повторного ухудшения исходника. Разработчик темы может проверить image_url и image_tag.
• Next.js: используйте адаптивные настройки компонента Image и задавайте sizes по реальному макету, особенно с fill. Без подходящего значения узкое изображение может считаться занимающим весь экран, и браузер скачает более крупный вариант. Изменение одного качества не исправляет такое несоответствие макета.

Храните редактируемый оригинал. Для изображений, выдаваемых отдельно, сравните реальный размер и внешний вид подготовленного файла; поможет сравнение JPG, PNG и WebP. Bitinz не меняет размеры изображений. Преобразование в WebP может увеличить файл, поэтому выбирайте вариант, подходящий странице.

При регулярных публикациях API для разработчиков обрабатывает подходящие файлы с учётной записью и месячной квотой. Он не исправляет разметку темы или адаптивный макет. После подключения автоматизации снова проверьте выдаваемую страницу.

• Отмеченный URL соответствует изменённому изображению и его версии.
• Браузер выбирает подходящий источник для экранов разного размера.
• Сжатие сохраняет важные детали, прозрачность и плавные градиенты.
• Главное видимое изображение не задерживается из-за неподходящей отложенной загрузки.
• Новый отчёт использует тот же тип устройства; внешний вид и загрузка страницы также проверены.