Влітку 2021 року компанія Google запустила оновлення сервісу перевірки швидкості завантаження і якості сайту — Core Web Vitals (CWV). Це один з багатьох сотень різних алгоритмів, які так чи інакше впливають на ранжування сайтів в пошуковій видачі, підвищують органічний трафік і збільшують конверсію сайту. Він побудований на реальному досвіді користувачів, що дозволяє поліпшити якість сайту і зробити його більш зручним для користування за допомогою отриманих даних.

Як оптимізувати сайт, спираючись на метрики та принципи роботи алгоритму, розглянемо в цьому матеріалі.

Що таке Core Web Vitals

CWV — це комплекс метрик, які входять в сервіс оцінки веб-сторінок Web Vitals від Google. Показники цих метрик важливі для власників і розробників сайтів, оскільки кожна з них являє собою певний досвід взаємодії, заснований на реальних діях користувачів на сайті. На відміну від багатьох параметрів Google, механіка роботи яких незрозуміла і не розкривається, Core Web Vitals містить метрики, які можна виміряти. Google відкрив доступ до інформації про те, які показники будуть вважатися алгоритмом як оптимальні, щоб розробники розібралися з тим, як оптимізувати сайт.

Основні дані, на які звертає увагу CWV:

• весь важливий контент, текстовий і графічний, швидко візуалізується в браузері;
• форми захоплення і кнопки завантажуються відразу;
• всі елементи дизайну відображаються коректно в десктопній та мобільній версії для різних гаджетів, не “стрибають”, не перекривають основний контент.

Для чого потрібні метрики Core Web Vitals

За допомогою алгоритму CWV кожен сайт буде оцінюватися посторінково. І щоб ресурс пройшов перевірку і з’явився в пошуковій видачі на високих позиціях, що релевантні запиту, необхідно, щоб хороші показники були не менш ніж у 75% сторінок (75 процентиль). В іншому випадку сайт почне падіння в ТОПі та може остаточно з нього випасти. Оцінка проводиться на підставі місячного користувацького досвіду. Чим краще показники Core Web Vitals, тим вище сайт буде знаходитися на пошуковій сторінці.

Які метрики входять у CWV

Перш ніж відповісти на питання “як оптимізувати сайт”, розглянемо метрики Core Web Vitals і їх параметри.

До Core Web Vitals входять:

• Largest Contentful Paint (LCP) — швидкість завантаження основних текстових і візуальних об’єктів.
• First Input Delay (FID) — час, витрачений користувачем на очікування перед взаємодією з контентом (кліки по посиланнях, запуск відео та ін.).
• Cumulative Layout Shift (CLS) — сукупна стабільність об’єктів або зміщення макета.

Розглянемо кожну метрику докладніше.

LCP

Largest Contentful Paint (приблизний переклад з англ.: «швидкість завантаження основного контенту») — дозволяє оцінити, наскільки швидко завантажується в браузері основний контент, текстовий і візуальний, в порівнянні з іншими елементами. Мається на увазі промальовування основних візуальних об’єктів або текстового блоку, який видно в області перегляду на цей момент. При цьому в розмір візуального об’єкта не входять частини елемента, що не відображається на екрані та ті елементи, в яких присутнє невидиме наповнення. У текстових блоках враховується тільки найменший прямокутник, в якому розміщуються текстові вузли. Значення, вказані для об’єктів в CSS (додаткові поля, межі елементу і відступи), на показники не впливають.

Кращий показник LSP — до двох секунд. 2,5 секунди — оптимальний показник, середній — 4 секунди, найгірший — від 4 і більше секунд. Чим менше часу на завантаження, тим більше шансів, що користувач залишиться на сторінці та вона буде для нього корисна.

FID

First Input Delay (приблизний переклад з англ.: «Час затримки до першого взаємодії») — метрика, яка вимірює час, витрачений користувачем при завантаженні сторінки та першою взаємодією з контентом. Не час обробки події, а тільки «затримку» до неї. Чим довше користувач чекає завантаження інтерактивних елементів (посилань, кнопок, елементів на основі JavaScript, відео- або аудіо контенту), тим вище ризик, що він піде з сайту.

Кращий показник FID — 100 мілісекунд. 300 мілісекунд — це середній показник (рекомендується поліпшення), а понад 300 — поганий результат.

Важливо розуміти, що дана метрика може мати не тільки низьке або високе значення, але й бути відсутньою зовсім, оскільки не всі користувачі завжди взаємодіють з однією і тією ж сторінкою.

CLS

Cumulative Layout Shift (приблизний переклад з англ.: «Сукупне зрушення макета») — метрика, яка фіксує час, протягом якого кожен елемент займає на сторінці задане положення. Це важливий показник, який безпосередньо впливає на сприйняття сторінки користувачем. Чим більше елементів, що зміщуються з місця на місце, тим більше це дратує. Особливо, коли при спробі взаємодіяти з елементом, користувач клацає по зовсім іншому об’єкту. Так відбувається, коли візуальний об’єкт, наприклад, сторонній банер або віджет, завантажується занадто довго. Причиною цього можуть бути асинхронні завантаження або прописані елементи DOM, які динамічно додаються поверх макета.

Кращий показник CLS — 0,1 секунди. До 0,25 секунди — середній показник. Все, що довше — поганий результат.

Якщо зміна верстки і положення елементів відбувається з ініціативи користувача, або зсув інтуїтивно зрозумілий і є взаємозалежним з дією користувача — це не впливає на його сприйняття. Погано, якщо користувач був не готовий до зміщення елементів.

Які інструменти дозволяють проаналізувати метрики CWV

Інструменти для вимірювання показників метрик Core Web Vitals поділяються за типом застосування: в польових (реальних) умовах і лабораторних (штучних).

Інструменти для аналізу показників в польових умовах:

• Core Web Vitals report в Search Console — звіт про основні інтернет-показники.
• Web Vitals — розширення для Chrome, яке динамічно зображає зміну показників.
• Chrome User Experience Report — звіт, що показує реальні дані по всім метрикам CWV.
• PageSpeed Insights — об’єднує теоретичні вимірювання і реальні показники на основі досвіду користувача.
• JavaScript-бібліотека web-vitals з відправкою даних в Google Analytics — всі показники вимірюються з використанням базових веб-API.

Інструменти для аналізу в лабораторних умовах:

• AMP Page Experience Guide (для сторінок з AMP-технологією)
• Lighthouse
• Chrome Dev Tools

Дані інструменти рекомендується використовувати при розробці сайту до його публікації на основному сервері, щоб знайти проблеми із завантаженням і усунути їх.

Як поліпшити сайт відповідно до CWV

Як оптимізувати сайт, щоб Google вважав його релевантним до запитів користувачів? Тема велика, тому ми обмежимося рекомендаціями, які допоможуть значно прискорити час завантаження сайту і підвищать показники за всіма метриками CWV.

Основні проблеми, які впливають на якість сайту і швидкість його завантаження, це:

• велика кількість паралельних запитів;
• передача великих обсягів даних;
• зміщення верстки та «літаючі» елементи макета;
• не модернізована технологія хешування;
• завантаження тексту до того, як завантажаться всі шрифти, що використовуються.

Що потрібно зробити, щоб оптимізувати сайт

• перевірити показники сайту на предмет проблемних місць;
• проаналізувати дані по десктопній і мобільній версіям;
• зменшити розмір файлу всіх зображень на сайті за допомогою нових алгоритмів стиснення і нових форматів, які підтримує браузер (WebP, JPEG 2000, JPEG XR). Наприклад, для стиснення зображень без втрати якості відмінно підійдуть інструменти Squoosh та Compressor.io;
• прописати в коді правильні розміри зображень та вбудованих елементів в пікселях, щоб уникнути зрушень макета;
• адаптувати обсяги коду, що написаний на JavaScript і в CSS (наприклад, за допомогою алгоритму стиснення Brotli);
• реалізувати для JS-файлів і зображень відкладене завантаження, при якому елементи будуть довантажуватися під час скролінгу сторінки, а не відразу;
• попереднє кешувати критичні ресурси, використовуючи сервіс-воркер (Service Worker)

Обираючи сервер для розміщення сайту, зверніть увагу на такі показники:

• наявність модуля Google Pagespeed для оптимізації зображень, каскадних таблиць стилів і Javascript-файлів;
• наявність SSD і NVMe SSD-дисків з високою швидкістю читання для зменшення затримок завантаження сайту;
• підтримка нового протоколу HTTP / 2 для одночасної передачі декількох елементів;
• надання сертифікату безпеки SSL;
• підключена система CDN на основі декількох серверів з рівномірним розподілом навантаження і збільшенням швидкості сайту;
• краще використовувати сервери провайдера з того ж регіону, на який націлена робота сайту;
• час відгуку сервера повинен бути меншим за 600 мілісекунд.

Підсумок

В ході статті ми визначили, що Core Web Vitals від Google — це набір показників, які впливають на якість і швидкість завантаження сайту, і які є заснованими на реальних діях користувача. CWV містить три метрики, що вимірюють час відображення основних елементів на сайті; час очікування, який проходить від завантаження до першої взаємодії з вмістом сайту, і визначають візуальну стабільність макета під час і після завантаження коду.

На відміну від інших алгоритмів, дія яких зазвичай не розголошується, метрики CWV можуть бути проаналізовані в Core Web Vitals в Search Console та PageSpeed Insights. І на основі отриманих даних розробники можуть поліпшити показники для кожної сторінки.

Впровадження Core Web Vitals означає, що поряд із якісним і корисним контентом, важливу роль для seo-просування буде грати і технічна сторона сайту. Сайт, який оптимізований на основі звітів CWV, матиме всі шанси на появу в пошуковій видачі на хороших позиціях.

Якщо вам потрібна допомога з оптимізацією сайту під алгоритми Core Web Vitals, зверніться до фахівців компанії New Line Technologies. Ми допоможемо вашому сайту досягти найкращих показників ефективності в найкоротші терміни.

No Fields Found.