Як виправити доставлення зображень у 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 для розробників може обробляти доречні файли з обліковим записом і місячною квотою. Воно не виправляє розмітку теми чи адаптивний макет. Після підключення автоматизації ще раз перевірте сторінку.

• Позначена адреса відповідає зміненому зображенню й версії.
• Браузер вибирає доречне джерело для різних екранів.
• Стиснення зберігає важливі деталі, прозорість і плавні градієнти.
• Неправильне відкладене завантаження не затримує головне видиме зображення.
• Новий звіт має те саме налаштування пристрою; вигляд і завантаження справжньої сторінки теж перевірено.