Коригирайте грешка при издаване на CLS в Core Web Vitals в GSC

С въвеждането на Core Web Vitals в GSC,Google даде ясно да се разбере, че Web Vitals за страниците е фактор за класиране. Това ще работи заедно с другите фактори за класиране на Google като Speed ​​Page, HTTPS, удобство за мобилни устройства и безопасно сърфиране. Все още не са публикувани много подробности, но Google Search Console започна да показва отчети за Core Web Vitals.

Състои се от три показателя за уеб производителност;

1. LCP: Най-голямата съдържателна боя
2. FID: Забавяне на първия вход
3. CLS: Кумулативна смяна на оформлението

В момента няма много налична информация за това как можете да поправите тези проблеми, но има някои от практиките, които могат да ви помогнат да разрешите Cumulative Layout Shift (CLS) ‘Повече от' за вашите уеб страници.

↑ Какво представлява кумулативното изместване на оформлението?

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

Примерът по-горе показва, че внезапно зареждане на елементи над полето за потвърждение на поръчката е причинило случайно щракване. CLS е средно за всички такива промени в съдържанието на страницата.

↑ Какво причинява висок CLS?

Може да има редица проблеми, които могат да предизвикат по-висок CLS, но ще посоча някои от основните причини;

• Мързеливо зареждане на съдържанието
• Изображения без размери
• Ad инжектиране
• Вгражда и iframes без размери
• Съдържание, което чака да се зареди поради бавен отговор

↑ Мързеливо зареждане на съдържанието

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

↑ Ad инжектиране

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

↑ Изчакващ елемент за зареждане поради бавен отговор

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

↑ Как да коригирам висока CLS грешка в Web Vitals?

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

За изображения, причиняващи преместване на съдържание (Jank),запазете необходимото място с полета за съотношение на CSS. Този подход гарантира, че браузърът може да разпредели правилното количество пространство в документа, докато носителят се зарежда. Можеш прочетете тази публикация за Jank Free Image Load.

Мързеливо заредените изображения също могат да причинят проблема, те могат да създадат огромно пространство, преди да заемат пространството на изображението. Ако се сблъскате с проблем с преточването на съдържание поради изображението Lazy Loading, отколкото можете прочетете тази статия за решенията.

Ако поставяте реклами в съдържанието, уверете се, че промените саелиминиран чрез резервиране на размера на слота. Използвайте заместител, ако няма върната реклама, вместо да свиете запазеното пространство. Ако използвате WordPress, един добър рекламен плъгин като Ad-Inserter ще се погрижи да запази правилното пространство за рекламите, така че не е нужно да се притеснявате.

Избягвайте динамично съдържание, динамичното съдържание е товакойто се вмъква след зареждането на страницата. Особено съдържанието в горната част на страницата, например бюлетини, регистрации, свързани публикации в съдържанието DOM. Прибягвайте до зареждането на този тип съдържание над прегънатата част, ако е възможно, опитайте да използвате Pop-up Box.

Бавен HTTP отговор от сървъра също можепричиняват нестабилност на съдържанието. Ако използвате CDN и отнема много милисекунди за зареждане на елементите с отстъп и това води до скачане на съдържанието, тогава трябва или да създадете интервал в DOM, или да синхронизирате товара с други елементи.

Има и други причини за висок CLS, можете да намерите подробно ръководство за оптимизиране на CLS на Официален сайт на Web.Dev

Заключение: Публикацията не съдържа технически решения или решения, свързани с кода, но дава общ преглед на това какво точно причинява проблема и как можете да подходите за отстраняването му.