Кумулативно изместване на разположението (CLS)

Какво представлява кумулативното изместване на разположението (CLS)?

Кумулативното изместване на оформлението (CLS) е метрика на Core Web Vitals, разработена от Google за измерване на визуалната стабилност на дадена уебстраница. Тя определя общия брой на всички неочаквани промени в оформлението, които се случват по време на целия живот на страницата. Промените в оформлението се случват, когато видим елемент променя позицията си от един визуализиран кадър към следващия.

Как се измерва CLS

Оценките на CLS варират от 0, което означава липса на промяна, до стойности над 0, показващи различна степен на нестабилност. Формулата взема предвид фракцията на въздействието и фракцията на разстоянието на всяко изместване, като изчислява с колко се преместват елементите и каква част от зрителното поле покриват.

Тълкуване на резултатите от CLS

• Добър: 0 - 0.1
• Нуждае се от подобрение: 0.1 - 0.25
• Лошо: над 0,25

Защо CLS е важен?

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

Често срещани причини за слаб CLS

1. Изображения без размери:

   • Включването на изображения в HTML, без да се посочат ширината и височината им, може да доведе до промени в оформлението, тъй като браузърът не знае колко място да отдели първоначално.

2. Реклами, вграждания и рамки без размери:

   • Тези елементи могат да се зареждат динамично и да предизвикват размествания на оформлението, ако размерите им не са зададени предварително.

3. Динамично инжектирано съдържание:

   • Добавянето на съдържание над съществуващото съдържание в DOM може да избута елементите надолу и да доведе до размествания.

4. Уеб шрифтове, причиняващи FOIT/FOUT:

   • Флаш на невидим текст (FOIT) и флаш на нестилизиран текст (FOUT) могат да причинят промени в оформлението, когато браузърът зарежда уеб шрифтове.

Най-добри практики за свеждане до минимум на CLS

1. Включване на атрибути за размер на изображенията и видеоклиповете:

   • Винаги определяйте ширината и височината на изображенията и видеоклиповете в HTML, за да запазите място в оформлението, преди те да се заредят.

2. Резервирайте място за реклами и вграждания:

   • Използвайте CSS, за да зададете размери на рекламните слотове, iframe и вградените елементи, за да избегнете промени в оформлението при зареждането им.

3. Избягвайте динамично вкарване на съдържание над съществуващо съдържание:

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

4. Използвайте стратегии за зареждане на шрифтове:

   • Използвайте CSS свойството font-display, за да контролирате начина, по който се показват уеб шрифтовете, и да сведете до минимум разместванията, дължащи се на FOIT/FOUT.

5. Използване на CSS Transform за анимации:

   • Използвайте свойството transform вместо top, bottom, left или right, за да анимирате елементи, без да предизвиквате промени в оформлението.

Заключение

Кумулативното изместване на оформлението (CLS) е жизненоважен показател за осигуряване на стабилно и визуално привлекателно потребителско изживяване. Чрез разбиране на факторите, които допринасят за разместването на оформлението, и прилагане на най-добрите практики за свеждането им до минимум можете да подобрите резултата CLS на уебстраницата си и да повишите цялостното удовлетворение на потребителите.

За повече информация относно усъвършенстването на CLS и други основни уеб портали разгледайте документацията на Google за уеб портали.