Невъзможно е Google да бъде напълно доволен. Отказах се от нея отдавна, въпреки че има проблеми, които трябва да бъдат решени, като например CLS (Cumulative Layout Shift).
Кумулативно изместване на оформлението
Кумулативната промяна в оформлението е кумулативната промяна в оформлението. Този показател е важен, тъй като анализира визуалната стабилност и честотата, с която посетителите се сблъскват с неочаквани промени в оформлението.
Накратко, това, което измерва, е всяко преместване на елементите в горната част на страницата по време на зареждане.
Постигането на ниска стойност на CLS помага да се гарантира, че страницата е приятна за окото и предотвратява досадни движения, които могат да доведат до загуба на поглед и/или позиция на важни навигационни елементи от страна на читателя.

Счита се, че потребителският опит е добър, ако CLS не надвишава 0,1, до 0,25 трябва да се подобри и оттам нататък се счита за лоша оценка. Това, както предполагам вече знаете, може да се измери по няколко начина. Най-широко използваният от тях е PageSpeed Insights.
Както е отбелязано в документацията на Core Web Vitals, лош CLS може да бъде причинен от различни елементи, като например изображение или видеоклип с неизвестни размери, шрифт, който се показва по-голям или по-малък от алтернативния, или реклама на трета страна, уиджет или анимационен ефект, който динамично променя размера си.
Парадоксално е, че някои от елементите, които са склонни да изтриват CLS, са рекламите на Google Adsense. Особено ако използвате опцията за автоматични реклами, оставяйки Google да решава всичко (не се препоръчва, най-добре е да използвате автоматичните реклами само за показване на реклами с куршуми и/или котва). Има случаи, в които те дори напълно разрушават скоростта на зареждане.
Как да откриете изместване
Тук е същината на въпроса: какво точно трябва да търсим и как да го намерим? Ами всичко, което променя размера си и/или се измества по време на зареждане.
След като вече сме в процес на отстраняване на проблема с Adsense, можем да разгледаме останалите елементи, които може да са причина за напълняване на CLS. Има различни начини да направите това, ето няколко от тях.
С поглед към
Най-елементарният метод е простото наблюдение с поглед. Ако преместването е забележимо, ще го видите веднага, но има и по-малко забележими движения, които изискват по-внимателно разглеждане.
В конзолата за търсене
В GSC, в раздел "Топ уеб показатели", можете да получите списъка с URL адреси с проблеми с CLS и LCP, за да ги разгледате по-отблизо един по един.

Дебъгер за кумулативно разместване на макета
Cumulative Layout Shift Debugger е уебсайт, в който въвеждате URL адреса, който искате да анализирате, и той създава анимиран GIF, който показва всички промени в оформлението на мобилната и десктоп версията.
Този инструмент, създаден от инженер на Chrome, е един от най-полезните инструменти за откриване на проблеми със CLS.

Ако по-голямата част от текста на страницата е подчертана, вероятно шрифтовете ви са причина за промените в оформлението.
Генератор на GIF смяна на оформлението
Layout Shift GIF Generator е друг уебсайт, който прави същото - той генерира GIF с разместванията за мобилната и настолната версия. Можете да го изпробвате, за да сравните резултатите. Винаги има малки разлики в измерванията на всеки инструмент и може да откриете в един инструмент това, което другият не е в състояние да покаже или не открива в даден момент.
Визуализатор на CLS
Този инструмент, който е един от най-простите, е този, с който успях да уловя най-добрите премествания.
CLS Visualizer е много полезно разширение, което, както подсказва името, ще ви помогне да визуализирате метриката на кумулативното изместване на оформлението на страницата, като ви показва точно кои елементи се променят и как се променят. Обърнете внимание, че това е и лабораторен инструмент, който предоставя данните въз основа на вашето устройство, браузър, разделителна способност на екрана или тип връзка.

Когато активирате разширението, то ще ви покаже измерванията на CLS в списък и когато кликнете върху всяко от тях, анимацията на елемента, който го причинява, ще се появи в червено.
Благодарение на това разширение постигнах нулев CLS на много страници. Въпреки че причините за това могат да бъдат толкова много, че съм го оставил инсталирано, за да преглеждам URL без да бързам.

Промяна на скоростта на зареждане на сайта с Chrome Dev Tools
Chrome Dev Tools предлага интересни възможности, като една от най-полезните за запознаване със CLS е опцията за намаляване на честотната лента, при която се зарежда страницата, така че да можете ясно да видите кога настъпва промяната в дизайна и кои елементи допринасят за нея.
За да направите това, отворете Chrome Dev Tools в браузъра, кликнете с десния бутон на мишката върху уебсайта си и в Network (Мрежа) потърсете иконата Wifi, показана на изображението, а до нея ще намерите падащо меню, в което можете да добавите персонализирана скорост.

Създайте нов профил и добавете 100 Kb или по-малко, за да го изпробвате в режим "забавено движение".

Сега, когато сърфирате със скоростта от времето, когато интернет работеше с бързи темпове, ще ви е много по-лесно да определите какво може да ви създава проблеми по време на зареждането.
Изобразяване на
В Региони на смяна на оформлението в Инструменти за разработка на Chrome можете също така да видите промените в оформлението, подчертани в синьо, докато навигирате страницата си в реално време.
Това са стъпките за активиране на регионите за промяна на дизайна:
В конзолата потърсете "Rendering" или "rendering", ако я имате на английски език.
Поставете отметка в квадратчето "Rendering regions" (Региони за рендиране) и всички други квадратчета, които искате да изпробвате.
Сега, докато навигирате в страницата, промените в оформлението ще бъдат подчертани в синьо.

С разширение на браузъра
В Chrome можете да инсталирате разширението CLS Checker - Journey Further и да проверите всички URL адреси, които са пълни с препинателни знаци. Освен това разширението дава подсказки под формата на червени етикети и ви показва списъка с елементи и CLS, които те консумират. Щракването върху "Toogle" подчертава въпросния елемент. В моя случай, тъй като вече бях отстранил проблема с рекламата на Adsense, се появява само една.

Webpagetest
Друг сайт за измерване, на който можете да направите тест, е webpagetest.org и можете да видите генерираните от него видеоклипове и анимирани GIF файлове.

Спирането на видеото улеснява откриването на малки премествания.
Ако се вгледате внимателно, както елементите от менюто, така и заглавието и текстовете са изместени малко надясно, което изглежда като промяна в размера и/или разположението на шрифта, но рекламното пространство над заглавието вече е запазено, така че не измества съдържанието надолу. Проблемът беше решен, като се намали малко размерът на H1 и се поправи опаковането на придружаващите текстове.

Но това е друг въпрос, нека разгледаме поведението на рекламите.
Решения за резервиране на слотове за рекламни блокове
Търсейки най-доброто и най-бързо решение, открих, че най-доброто решение е да се добави минимална стойност на височината към обвивката (div) около всеки от рекламните блокове, за да се запази това пространство и да се избегне превъртането след зареждане.
Изглежда обаче, че не е достатъчно да се използва клас за посочване на това CSS свойство, а също и да се използва идентификатор за обвивката. Изглежда, че по някаква неизвестна причина Google AdSense JavaScript премахва директивите за минимална височина от всеки родителски обект. Те обаче не се премахват, ако за насочване на CSS се използва ID.
Това е обяснено тук в резюме и по-подробно в документацията на Google. Тъй като намирах това решение за мъчително, тъй като трябваше да проверявам всички блокове, продължих да търся алтернатива, докато не намерих това, което работеше за мен, а именно Ad Inserter. Ето какви бяха стъпките.
Промяна на адаптивните реклами към фиксиран размер
Първото нещо беше да спра да използвам адаптивни рекламни блокове. Промених всички блокове на фиксирани размери.
Това решение трябва да бъде проучено и оценено във всеки отделен случай.
Въпреки че Google твърди, че персонализираните реклами генерират повече приходи (очевидно поради възможността за показване на различни размери), това е доста еластично и може да варира в зависимост от различните сценарии. Ако изберете най-популярните размери, винаги ще показвате реклами.
Деактивиране на оптимизацията на размера

Въпреки че блоковете вече трябва да имат фиксиран размер, трябва да деактивирате опцията, която позволява на Google да определя самостоятелно размера на мобилните реклами. Тази опция може да бъде намерена в администрацията на Adsense в раздел Реклами/Глобални настройки.
По този начин избягваме изненади, в случай че сме оставили някоя реклама, която сме поставили на ръка. Във всеки случай фактът, че те са с фиксиран размер, не означава, че вече не реагират.
Резервирайте място за реклами с Ad Inserter
Според мен Ad Inserter е най-добрият плъгин за управление на реклами, който може да се използва дори за добавяне на друго съдържание.
За да запазите пространството за всяка реклама, просто отидете в "Показване" и задайте ширината и височината или само височината на всеки блок.

Ако използвате PRO версията, можете да използвате и функцията Lazy Load, която също има тенденция да помага за облекчаване на CLS в по-голяма степен.
Някои съображения
Резервирането на пространство за Adsense има своите недостатъци, когато рекламите не могат да бъдат показани, защото не се обслужват в този размер или няма рекламодатели за вашия сайт по всяко време, можете да получите празно пространство с размера на резервираното пространство.
В Ad Inserter, само за вмъквания от страна на сървъра, можете да определите височината директно с персонализиран CSS код.
Имайте предвид, че височината на рекламата се определя от кода на рекламата. Адаптивният код на рекламата може да зададе височината на рекламата в зависимост от наличното пространство.
Някои рекламни мрежи (като AdSense) могат да показват и реклами, които са по-малки от наличното пространство. Височината на блока, както е дефинирана в Ad Inserter, е височината на вмъкнатия блок, т.е. височината на div-а, който го обгръща. Това е пространството, запазено за рекламата. При резервирането му може да се случи следното:
- Ако височината на рекламата е същата като височината на запазеното пространство (височината на блока), няма да има промяна в дизайна и тя няма да повлияе на CLS.
- Ако височината на рекламата е по-голяма от височината на запазеното пространство (височината на блока), възможно е дизайнът да бъде изместен надолу, за да се вмести рекламата, и да засегне CLS.
- Ако височината на рекламата е по-малка от височината на запазеното пространство (височина на блока), под рекламата ще се появи празно пространство, но оформлението няма да се промени и няма да повлияе на CLS.
Някои рекламни кодове, например адаптивният рекламен код на AdSense, могат да отменят височината на основните контейнери. В този случай височината на блока ще бъде презаписана и няма да бъде приложена.
Накратко, в случай на спешни проблеми с CLS, които трябва да бъдат решени чрез минимизиране на промените в дизайна, най-бързият вариант е да се използват фиксирани размери на рекламите, когато това е възможно.

И докато сте в това, можете да се уверите, че няма липсващи размери в изображенията, което също може да се определи по различни начини. Някои бързи и лесни начини са да използвате Perfmatters ( плъгин, който препоръчвам) или WP Rocket (и двата платени).


Или приставката Litespeed Cache, ако хоствате блога си на сървър Litespeed.

Ако всичко е минало добре, трябва да видите спада на CLS след няколко часа в полевите отчети и след няколко дни в лабораторните отчети на PageSpeed Insights.