Кумулативното изместване на оформлението / Cumulative Layout Shift (CLS) измерва визуалната стабилност на страницата, докато се зарежда. Този показател прави това, като гледа колко големи са елементите и колко надалеч се движат от реалната им позиция докато се установят. Това е един от трите показателя на Core Web Vitals, които Google използва за измерване на изживяването на страницата.
Как се изчислява Cumulative Layout Shift (CLS)?
Ето как се измерва:
оценка за промяна на оформлението = фракция на удара x фракция на разстоянието
Или казано по-разбираемо, това е:
резултат за изместване на оформлението = % от прозореца за изглед, който се е променил * разстоянието, на което е преместен един нестабилен елемент
Причината, поради която CLS е важен, е, че е досадно, когато се опитвате да щракнете върху нещо на страница, която се измества, и след това накрая щракнете върху нещо, което не възнамерявате.
Случва ни се непрекъснато. Щракваме върху един елемент и изведнъж щракваме върху реклама и вече дори не сме на същия уебсайт. Като потребители намираме това за разочароващо.
Какво предизвиква CLS?
- изображения без размери;
- Реклами, вграждания и вградени фреймове без размери;
- Инжектиране на съдържание с JavaScript;
- Прилагане на шрифтове или стилове в края на зареждането.
Нека да разгледаме какъв трябва да бъде вашият CLS резултат и как да го подобрите.
Какъв е добър резултат от CLS изместването?
Добрият CLS резултат е по-малък или равен на 0,1 и трябва да се основава на данни от отчета за потребителското изживяване на Chrome (CrUX). Това са данни от действителни потребители на Chrome, които са на вашия сайт и са избрали да споделят тази информация. Необходими са ви 75% от зарежданията на страниците, за да имате CLS резултат от 0,1 или по-нисък.
Вашата страница може да бъде класифицирана в една от следните групи:
- Добър: <=0,1
- Нуждае се от подобрение: >0,1 и <=0,25
- Слабо: >0,25
Как се измерва CLS?
Има различни начини за измерване на премахнете и подобрите: полеви данни и лабораторни данни.
Полевите данни идват от отчета за потребителското изживяване на Chrome (CrUX), който представлява данни от реални потребители на Chrome, които избират да споделят своите данни. Това ви дава най-добрата представа за производителността на CLS в реалния свят. Това е и това, по което всъщност ще бъдете измервани от Google за Core Web Vitals.
Лабораторните данни се основават на тестове при едни и същи условия, за да направят тестовете повторими. Google не използва това за Core Web Vitals. Но това е полезно за тестване, тъй като данните от CrUX/поле са 28-дневна подвижна средна стойност, така че отнема известно време, за да видите въздействието на промените.
Най-добрият инструмент за измерване на CLS зависи от типа данни, които искате (лаборатория/поле) и дали ги искате за един URL адрес или много.
Измерване на CLS за единичен URL адрес с pagespeed.web.dev
Pagespeed Insights изтегля данни от полета на ниво страница, които не можете да заявите по друг начин в набора от данни CrUX. Той също така провежда лабораторни тестове за вас въз основа на Google Lighthouse и ви дава данни за произход, така че можете да сравните ефективността на страницата с целия сайт.
Измерване на CLS за много URL адреси или цял сайт
Можете да получите CrUX данни в Google Search Console, които са групирани в категории добри, нуждаещи се от подобрение и лоши.
Измерване на CLS за единичен URL адрес с webvitals.dev/cls
Това е един невероятен и изключителен инструмент – webvitals.dev/cls. Благодарение на него успях да постигна 0 CLS score за моите сайтове и 100% от всички показател. Препоръчвам ви го горещо.
Ето по-долу анимиран пример как ще ви покаже къде са ви грешките и изместванията. С риск да си забавя страницата от този 2.5мб анимиран гиф, все пак го помествам тук за ваша помощ.
Как да определите кой елемент заема най-много време от зареждането на страницата?
Когато вече сте извършили тест на дадена страница с Pagespeed Insights, ще забележите маък бутон гласящ „View Treemap“.
След като го изберете ще ви се появи подобен прозорец като този по-долу. Вднага ще раберете кокй елемент, дали е JS, CSS , Fonts… ви дава най-много забавяне при зареждане.
Как да подобрим CLS?
В PageSpeed Insights, ако изберете CLS в секцията „Диагностика“, можете да видите всички свързани проблеми като ‘Избягвайте големи смени на оформлението“. Това са проблемите, които ще искате да разрешите.
В повечето случаи, за да оптимизирате CLS, ще работите върху проблеми, свързани с изображения, шрифтове или, вероятно, инжектирано съдържание. Нека разгледаме всеки случай.
1. Задайте размери за изображения, видеоклипове, iframes
За изображения това, което трябва да вмъкнете, е добре да запазите пространството, така че да няма изместване и изображението просто да запълни това пространство. Това може да означава задаване на височината и ширината на изображенията, като ги посочите в тага <img> по следния начин:
<img src=“cat.jpg“ width=“640″ height=“360″ alt=“котка с връв“ />
За отзивчиви изображения трябва да използвате srcset като този:
Също така ще искате да запазите необходимото място за неща като видеоклипове и frejmowe. За динамично съдържание като реклами ще искате да запазите максимално необходимото пространство.
Има и сравнително новa функция на CSS, наречена aspect-ratio, която ще ви позволи да зададете динамична ширина въз основа на размера на екрана и браузърът ще изчисли подходящата височина за вас.
2. Оптимизиране на шрифтове
При шрифтовете целта е шрифтът да се появи на екрана възможно най-бързо и да не се заменя с друг шрифт. Когато даден шрифт се зареди или промени, в крайна сметка получавате забележимо изместване като проблясък на невидим текст (FOIT) или проблясък на нестилизиран текст (FOUT).
Ако можете да използвате системен шрифт, направете го. Няма нищо за зареждане, така че няма забавяния или промени, които да доведат до промяна.
Ако трябва да използвате персонализиран шрифт, текущият най-добър метод за минимизиране на CLS е да комбинирате <link rel=”preload”> (което ще се опита да грабне вашия шрифт възможно най-скоро) и font-display: незадължително (което ще даде на вашия шрифт малък прозорец от време за зареждане).
Ако шрифтът не се зареди навреме, първоначалното зареждане на страницата просто ще покаже шрифт по подразбиране. След това вашият персонализиран шрифт ще бъде кеширан и ще се показва при следващи зареждания на страници.
3. Използвайте анимации, които не предизвикват промени в оформлението
Има някои стойности на CSS, които задействат промени в оформлението, като „box-shadow“, „box-sizing“, „top“, „left“ и други, които не трябва да бъдат анимирани. Вместо това ще искате да използвате анимации за „трансформиране„, за да избегнете изместване на оформлението.
4. Уверете се, че вашите страници отговарят на условията за bfcache
Кешът за „назад/напред“ запазва страниците в кеша на браузъра. Това позволява незабавно зареждане на страница, която вече е била заредена, което означава, че няма да се извършват промени в оформлението.
Има достатъчно аргументи за да ползвате тази оптимизация. Основните стратегии са изброени по-долу:
- Никога не използвайте събитието unload;
- Минимизиране на използването на Cache-Control: без съхраняване;
- Актуализирайте остарели или чувствителни данни след възстановяване на bfcache;
- Избягвайте препратки към window.opener;
- Винаги затваряйте отворените връзки, преди потребителят да напусне;
- Тествайте, за да сте сигурни, че вашите страници могат да се кешират.
 измерва отместването на елементите в страницата, докато тя се зарежда. Вижте как да подобрите този показател.){kind=link}