Съдържание
Core Web Vitals или Cumulative Layout Shift (CLS) е една от трите важни уеб елемента, които Google въвежда през януари 2021 г. като нови ключови фактори за класиране. Всеки от тях е предназначен да оцени отделна метрика за потребителското преживяване в уебсайта, а именно зареждане, интерактивност и визуална стабилност. Целта е да се осигури по-опростен начин за количествено определяне на това, което Google смята за най-важните аспекти на потребителското изживяване. По същество Core Web Vitals е предназначен да помогне на разработчиците, дизайнерите и SEO специалистите да се концентрират върху основите на добрия UX дизайн.
Кумулативни структурни промени (CLS)
Core Web Vitals измерва стабилността на оформлението на уеб страница, за да гарантира, че потребителското изживяване е гладко и взаимодействията със съдържанието протичат възможно най-естествено, без никакви прекъсвания или неочаквани забавяния. Това се въвежда като ключов показател, тъй като нестабилните оформления могат да доведат до отрицателно изживяване на потребителите, както на мобилни устройства, така и на настолни компютри, което води до високи нива на отпадане. Нестабилните оформления могат да бъдат причинени от нови елементи на дизайна, които се зареждат по-късно на дадена страница, принуждавайки неочаквано изместване на визуалното оформление и потребителите по невнимание кликват там, където не възнамеряват.
Неочаквани размествания могат да бъдат причинени от нови елементи на дизайна, очакваните промени включват анимации и преходи, както и „инициирани от потребителя размествания на оформлението“, като въвеждане в поле за търсене или избор на опция в меню. За да се гарантира, че те не се считат за част от CLS, изчисленията на Google изключват размествания на оформлението, настъпили в рамките на 500 ms от взаимодействие с потребителя.
Какво причинява кумулативно изместване на оформлението?
Според Google има 5 причини, поради които се случва кумулативно изместване на оформлението:
- Изображения без размери
Когато се появи адаптивният уеб дизайн, разработчиците спряха да използват размери „ширина“ и „височина“ и започнаха да използват CSS за преоразмеряване на изображения. Проблемът с това е, че пространството на страницата може да бъде разпределено само след изтегляне на изображението, което означава, че може да има значителна промяна в оформлението, тъй като изображението е преоразмерено, за да се побере в прозореца.
- Вградени реклами
Рекламните контейнери могат да причинят множество проблеми за CLS. Размерът на рекламните контейнери влияе върху размера на генерираните приходи от кликване (в зависимост от използваното устройство и платформа), но може да бъде неоптимален за потребителското изживяване, защото те могат да разместят съдържанието на страницата. Това може да се случи, когато рекламен контейнер за първи път се вмъква в страница, когато се преоразмерява, когато се зарежда библиотеката с рекламни маркери.
- Динамично съдържание (DIC)
Видеоклиповете в Youtube, Google Maps и публикации в социалните медии са категоризирани като динамично уеб съдържание. Тези вградени джаджи могат да бъдат непредсказуеми, тъй като не може да се дефинира колко големи ще бъдат промените. Публикация в социалните медии например може да се състои от изображения, видеоклипове и множество редове текст – и всички тези аспекти могат да се променят с течение на времето. В резултат на това платформите, осигуряващи вграждане, не винаги запазват достатъчно място на страницата, което може да доведе до промени в оформлението.
- Уеб шрифтове, причиняващи FOUT или FOIT
Изтеглянето на шрифтове може да доведе до промени в оформлението или когато резервният шрифт се замени с нов шрифт (FOUT – Flash Of Unstyled Text), или когато се показва „невидим“ текст, докато се покаже нов шрифт (FOIT – Flash Of Invisible Text).
Как правилно да измерим метриките?
Резултатът от Core Web Vitals се изчислява чрез умножаване на дела на екрана, който се е изместил неочаквано, по изминатото разстояние. (CLS = Фракция на въздействието x Фракция на разстоянието) – по отношение на фракцията на разстоянието тя може да бъде или ширина, или височина, което от двете е по-голямо.
За дизайнерите и разработчиците на уебсайтове CLS може да се измерва или със симулирани данни или с реални потребителски данни – които използвате, зависи от това дали вашият сайт все още е във фаза на подреждане или е вече активен.
Кои инструменти са включени:
- Chrome DevTools
- Lighthouse
- WebPageTest
- PageSpeed Insight
- Core Web Vitals отчети
- Chrome User Experience Report
Core Web Vitals & SEO оптимизация
Защо CLS е важен за SEO?
Потребителският опит отдавна е ключов фактор за класиране при търсенето, но ще стане още по-голям с въвеждането на Google на Core Web Vitals. CLS не трябва да се счита за най-важната от новите показатели. Понастоящем и трите жизненоважни елемента се използват в Lighthouse, което дава информация за относителното им значение един за друг:
С претеглена важност от само 5% в Lighthouse, е малко вероятно CLS да бъде равен с Largest Contentful Paint (LCP) и First Input Delay (FID), които съответно измерват производителността на зареждане и интерактивността.
Това не е оправдание за игнориране на CLS. Той все още се счита за „ядро“ и ще повлияе на класирането на ключовите думи, след като влезе в сила през януари 2021 г. SEO специалистите трябва да се подготвят, като стартират диагностика на инструментите, споменати по-горе, идентифицират проблеми и прилагат препоръчани решения за постигане на добри CLS резултати за техните сайтове.
Добра практика е да се започне с Chrome DevTools – отидете в менюто за ефективност и след това отворете Experience. Тук, ще намерите смени на оформлението, категоризирани по оценка на смените и засегнатите области.
Как да коригираме проблемите с CLS?
- Когато използвате персонализирани шрифтове, не забравяйте да включите стойности за показване на шрифта. Като алтернатива, rel = “preload” може да се използва за зареждане на шрифт преди DOM дървото да бъде конструирано и изобразено.
- Елементите на картината и видеото трябва да имат атрибути ширина и височина, определени с пропорционално съотношение. Динамичните елементи трябва да имат еднакво съотношение на страните за всеки прозорец.
- Разпределете запазени изображения в динамични рекламни пространства на вашите уеб страници. Това запазва място, когато рекламата се зарежда и избягва промяна на оформлението за този елемент.
- Използвайте заместител или скелетен потребителски интерфейс, за да запазите място за DIC, така че да не задейства изместването на съдържанието на страницата, след като се зареди. За да намалите възможностите за разместване, опитайте се да избягвате инжектиране на динамично съдържание над съществуващо съдържание, различно от необходимото за взаимодействие с потребителя.
Заключение
Въпреки че Core Web Vitals не е най-важният от основните уеб показатели на Google, той все още ще бъде ключова функция за класиране от началото на следващата година. Как това ще промени нещата? Е, SEO специалистите и дизайнерите вероятно ще работят по-тясно заедно отначало, като гарантират, че елементите на страницата не причиняват внезапни скокове, докато се зареждат. С подновен фокус върху CLS, те могат да подобрят както UX на своите сайтове, така и шанса за класиране по ключови думи.
Заявете безплатен SEO одит за вашият бизнес уеб сайт или онлайн магазин и нашите SEO специалисти ще изготвят за Вас одит с над 200 фактора, които сме изследвали и ще ви помогнат да отличите вашият уеб сайт от тези на конкурентите.
Свържете се с нас на hello@web-graphica.bg или използвайте контактната форма.
