Core Web Vitals: CLS, LCP и FID – какво означават и защо са важни за SEO?

Какво представляват Core Web Vitals?

Core Web Vitals са част от група уеб показатели, които Google използва, за да измери скоростта, интерактивността и визуалната стабилност на дадена уеб страница.

Тези показатели директно влияят на SEO и са част от алгоритъма за класиране от юни 2021 г. тяхното оптимизиране оказва директно влияние на подобряване на SEO класирането.

1. Largest Contentful Paint (LCP)

LCP измерва времето, за което най-големият видим елемент в страницата се зарежда (обикновено изображение или блок с текст).

Добри стойности:
Под 2.5 секунди се счита за добро потребителско изживяване.

Какво го забавя:

• Бавен сървър
• Големи изображения
• Блокиран CSS или JavaScript

Как да го подобрим:

• Компресирайте изображенията във формати WebP или AVIF
• Използвайте lazy loading за изображения, например с Observer API и плейсхолдър
• Оптимизирайте размерите на изображенията – ако изображението се визуализира в 500x500 пиксела, а предоставяте изображение с размер 1500x2000 пиксела, това са излишни пиксели и товар. Това може да се реши със srcset атрибут, където описвате кои изображения да се зареждат при съответната резолюция
• Използвайте CDN (Content Delivery Network), като Cloudflare – така снимки и скриптове се зареждат от най-близкия сървър, подобрявайки скоростта

2. First Input Delay (FID)

FID измерва времето между взаимодействието на потребителя (напр. клик) и реакцията на страницата.

Добри стойности:
Под 100 ms е идеално.

Какво го влошава:

• Обемна JavaScript логика, която блокира главния thread
• Лошо структурирани събития и слушатели

Как да го подобрим:

• Премахнете излишния JavaScript код, ако е възможно, и отложете по-малко важния за по-късно зареждане
• Разделете JavaScript-а на по-малки части
• Използвайте requestIdleCallback или setTimeout за неважни действия
• Използвайте Web Workers

3. Cumulative Layout Shift (CLS)

CLS измерва внезапни промени в подредбата на елементите, докато се зарежда страницата – например когато бутон „Купи“ подскочи, защото преди него се е заредила реклама.

Добри стойности:
Под 0.1 е препоръчително.

Какво го причинява:

• Изображения без зададени размери
• Динамични шрифтове
• Вмъкване на елементи без резервирано място

Как да го подобрим:

• Пуснете браузъра в режим на бавен интернет и заредете сайта – така ще забележите кои елементи се преместват при зареждане
• Задавайте фиксирани размери на изображения и видеа – използвайте width и height
• Използвайте font-display: swap за уеб шрифтове
• Предварително резервирайте място за динамичните елементи – например, ако div няма зададена височина и първоначално е с 0px, а по-късно JavaScript код добавя съдържание вътре, той ще промени височината си и ще избута следващите елементи

Как да измерим Core Web Vitals?

Можете да използвате следните инструменти:

• Google PageSpeed Insights
• Lighthouse в Chrome
  Увеличи продажбите си – безплатен анализ
  DevTools
• Web Vitals Chrome Extension

Core Web Vitals са основен компонент за SEO и потребителското изживяване (UX), които Google взема предвид при класирането на сайтовете. Оптимизацията на LCP, FID и CLS не само подобрява позициите ви в търсачките, но и задържа повече потребители и увеличава конверсиите.