Коригиране на бавен LCP поради изображение

Коригирайте бавно изображение за Largest Contentful Paint (LCP) в 4 стъпки: преоразмерете го до неговия размер на показване, конвертирайте го в WebP или AVIF, заредете го предварително и задайте fetchpriority на high. Първите 2 стъпки носят най-голямо подобрение и не изискват промени в HTML кода на страницата ви.

На повечето страници елементът за най-голямо изобразяване на съдържание е едно водещо изображение, което означава, че LCP всъщност е въпрос на един файл, а не на целия ви сайт. Коригирането на този един файл обикновено подобрява показателя повече от всяка друга налична оптимизация.

Какво измерва LCP

LCP измерва колко време отнема на най-големия видим елемент да се изобрази, считано от момента на започване на зареждането на страницата. Google приема 2.5 секунди или по-малко за добър резултат, 2.5 до 4 секунди за нуждаещ се от подобрение и над 4 секунди за слаб.

Измерваният елемент обикновено е изображение, понякога блок от заглавен текст, и винаги е нещо, което се вижда без превъртане. Елементът може да се различава на различните устройства, тъй като водещо изображение, което доминира в изгледа за настолен компютър, може да се намира под видимата част на екрана на телефон.

Намиране на отговорния елемент

Стартирайте Lighthouse и вижте записа за елемента Largest Contentful Paint, който посочва точния измерван елемент. Налучкването губи време, тъй като елементът често не е този, който хората предполагат.

Проверете както на мобилни устройства, така и на настолни компютри, тъй като оформленията се различават, а с това и резултатът. Реалните данни от посетители са по-надеждни от единичен лабораторен тест, тъй като мрежовите условия в реалния свят варират много повече, отколкото при тест. Когато двете се разминават, се доверете на реалните данни и използвайте лабораторния тест за диагностика.

Коригиране на изображението по ред на въздействие

За да подобрите LCP на дадено изображение, преминете през тези 6 стъпки подред.

1. Преоразмерете изображението до най-големия размер, в който някога ще се показва, удвоен за екрани с висока плътност на пикселите.
2. Конвертирайте го в WebP или в AVIF, ако изображението е голямо и фотографско.
3. Компресирайте до целеви размер под 200 KB за водещо изображение, което е постижимо при пълна ширина на повечето дизайни.
4. Добавете атрибути за ширина (width) и височина (height), така че браузърът да запази място и да не се получи изместване на оформлението.
5. Заредете предварително изображението в заглавната част (head) на страницата, за да може браузърът да започне изтеглянето му веднага.
6. Задайте fetchpriority на high за елемента на изображението, което указва на браузъра, че този файл е с най-висок приоритет.

Стъпки 1 и 2 обикновено осигуряват по-голямата част от подобрението и са двете, които изобщо не изискват промяна на HTML кода на страницата.

Защо преоразмеряването превъзхожда компресирането

Размерите определят по-голямата част от размера на файла, така че преоразмеряването премахва повече тегло от всяка настройка за качество. Снимка с ширина 4000 пиксела, показвана при 1200 пиксела, съдържа 11 пъти повече пикселни данни, отколкото страницата може да покаже.

Третият ред показва защо преоразмеряването е на първо място. Само преоразмеряването дава по-добър резултат от само компресирането, а комбинацията от двете превъзхожда всичко. Цифрите варират в зависимост от изображението и връзката, докато съотношението остава постоянно.

Предварително зареждане и fetchpriority

Предварителното зареждане указва на браузъра да изтегли водещото изображение, преди да е приключил с анализа на страницата, което обикновено спестява между 200 и 500 милисекунди. Настройката е важна, тъй като браузърите откриват изображенията късно в процеса на анализ.

Зареждайте предварително само едно изображение. Предварителното зареждане на няколко премахва ползата, тъй като тогава браузърът разделя вниманието си точно по същия начин, по който би го направил и без това. Задаването на fetchpriority на high постига подобен резултат с по-малко код и често е напълно достатъчно за изображение, което вече присъства в първоначалния HTML.

Грешки, които влошават LCP

• Мързеливо зареждане (lazy loading) на водещото изображение. Мързеливото зареждане забавя точно файла, който искате да се зареди първи. Прилагайте го само под видимата част на екрана.
• Зареждане на водещото изображение чрез JavaScript. Изображение, вмъкнато чрез скрипт, не може да започне да се изтегля, докато скриптът не се изпълни.
• Използване на CSS фоново изображение. Фоновите изображения се откриват по-късно от img елементите и не могат да бъдат приоритизирани толкова лесно.
• Предварително зареждане на няколко изображения. Конкуриращите се приоритети напълно елиминират предимството.
• Пропускане на ширина и височина. Изместването на оформлението влошава друг показател, докато този се подобрява.

Когато LCP елементът е текст

Текстовият LCP обикновено се забавя от уеб шрифтовете, а не от самия текст. Браузърът разполага с думите веднага, но изчаква файла с шрифта, преди да ги изпише.

Задайте font-display на swap, така че текстът да се изобразява с резервен шрифт и да се превключва, когато уеб шрифтът се зареди. Заредете предварително само най-важния файл с шрифт и ограничете шрифта само до символите, които страниците ви действително използват, което често намалява шрифта от 200 KB до под 30 KB. Хостването на шрифтове от собствения ви домейн премахва необходимостта от допълнителна връзка към трета страна.

Времето за реакция на сървъра определя минимума

LCP не може да бъде по-бърз от времето, необходимо на сървъра ви да върне първия байт, така че бавният сървър ограничава всяко друго подобрение. Стремете се към под 600 милисекунди до първия байт.

Проверете тази цифра, преди да оптимизирате изображенията, тъй като реакция на сървъра от 2 секунди прави целта за LCP от 2.5 секунди невъзможна, независимо какво правите с файловете. Кеширането, по-бързият хостинг или мрежата за доставка на съдържание (CDN) решават този проблем. Работата по изображенията след това подобрява останалото, вместо да се бори с ограничение, наложено другаде.

Скриптовете на трети страни също забавят изображението

Аналитичните инструменти, банерите за съгласие, чат уиджетите и рекламните скриптове се конкурират с водещото ви изображение за честотна лента и време за обработка. Перфектно оптимизираното изображение пак ще се изобрази късно, ако преди него се зареждат 12 скрипта.

Банерите за съгласие са най-вредни, тъй като много от тях блокират изобразяването, докато посетителят не направи избор. Зареждайте скриптове на трети страни с атрибут defer или async, за да не забавят страницата, и проверете колко от тях са наистина необходими. Премахването на 3 неизползвани проследяващи скрипта често подобрява LCP повече от поредния кръг компресия на изображения.

Правилно тестване на промяната

Тествайте в частен прозорец с деактивирани разширения и стартирайте измерването 3 пъти, вместо да се доверявате на един резултат. Резултатите варират между отделните пускания с забележима разлика.

Уверете се, че браузърът действително е получил по-малкия файл. Отворете инструментите за разработчици, преминете към раздела Network, филтрирайте по изображения и презаредете. Прехвърленият размер и форматът се показват в списъка. Страница, която все още обслужва стария файл, обикновено означава, че кеширащ слой пази предишната версия, а не че оптимизацията е неуспешна.

Запазване на бърз LCP след корекцията

Установете правило за водещите изображения, вместо да ги коригирате едно по едно, тъй като новите страници отново ще създадат проблема. Сайт, коригиран веднъж, ще се влоши в рамките на месеци, ако редакторите качват изображения директно от камера.

Съгласувайте максимална ширина и максимален размер на файла за водещите изображения, запишете го и го прилагайте за всяка нова страница. Правило като 1920 пиксела ширина и под 200 KB е лесно за проверка и покрива почти всеки дизайн. Когато публикуват няколко души, писменото правило е по-важно от самата техника, тъй като показателят отразява най-лошата страница, а не най-добрата.

Подготовка на водещи изображения наведнъж

Обработвайте заедно всички водещи изображения на сайта, тъй като те споделят една спецификация и един целеви размер. Повечето сайтове имат между 10 и 100 такива изображения в целевите страници, страниците с категории и статиите.

Задайте ширината и целевия размер в KB веднъж, пуснете изображенията и всеки файл ще се върне съобразен с изискванията. Могат да се обработват до 500 изображения на партида, изцяло във вашия браузър на собствения ви процесор. Нищо не се качва в интернет, така че подготвяните активи, непубликуваните страници за кампании и клиентската работа остават на вашия компютър, докато се подготвя цялата библиотека.