Как да поправите доставянето на изображения в PageSpeed

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 съответства на промененото изображение и версия.
• Браузърът избира подходящ източник при различни размери на екрана.
• Компресирането запазва полезните детайли, прозрачността и плавните градиенти.
• Основното видимо изображение не се забавя от неподходящо отложено зареждане.
• Новият отчет използва същото устройство; проверени са и видът, и зареждането на страницата.