Як покращити основні веб-показники вашого сайту

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

Що таке основні веб-показники?

Основні веб-показники – це стандарти, які Google використовує для оцінки технічної справності веб-сайту та визначення рейтингу на його сторінках результатів пошукової системи (SERP). Алгоритм Google оцінює ці показники для кожної сторінки на сайті, тобто певні сторінки можуть отримати вищі бали, ніж інші. 

Є три основні показники веб-показників:

1. Малювання найбільшого вмісту (LCP)

LCP вимірює час, потрібний для завантаження найбільшого зображення або текстового блоку на веб-сторінці, вказуючи, як швидко користувачі можуть побачити змістовний вміст. Він ґрунтується на ідеї, що ви настільки сильні, наскільки сильна ваша найслабша ланка. Навіть якщо решта вашої сторінки завантажується швидко, одне зображення, що повільно завантажується, може дратувати користувачів.

2. Затримка першого введення (FID)

FID вимірює час, потрібний сторінці для обробки взаємодії користувача. Це може бути час, потрібний сторінці для відповіді на натискання користувачем кнопки. Користувачі та Google очікують, що веб-сайти швидко реагуватимуть на введені дані, щоб вони відчували себе інтерактивними. 

FID є ключовим показником у основних веб-показниках вашого веб-сайту, але його буде замінено на Interaction to Next Paint (INP). ) у 2024 році. INP також вимірює швидкість реагування, але зосереджується на часі, який потрібен візуальному зворотному зв’язку після взаємодії користувача зі сторінкою. Наприклад, коли ви додаєте товар у свій кошик, ви очікуєте, що піктограма кошика оновиться, вказуючи на те, що ваш товар додано.

3. Сукупний зсув макета (CLS)

CLS вимірює візуальну стабільність сторінки — чи макет вашого веб-сайту несподівано зміщується після завантаження. Наприклад, рекламний блок завантажується довше, ніж решта сторінки, і коли він завантажується, він зміщує текст вниз, розчаровуючи або заплутуючи користувача, який його читав.

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

Як виміряти основні веб-показники

Google надає кілька різних безкоштовних інструментів для проведення оцінювання Core Web Vitals залежно від ваших цілей:

1. PageSpeed Insights

PageSpeed Insights (PSI) забезпечує поглиблений аудит однієї сторінки. Він оцінює не лише основні веб-показники, охоплюючи низку показників і факторів технічної продуктивності, надаючи кожній сторінці загальний бал від 0 (найгірший) до 100 (найкращий). PSI представляє висновки у пріоритетному, доступному форматі. Наприклад, він оцінює потенційну економію часу внесенням змін. Більшість користувачів отримують доступ до PSI через Інтернет, але він також доступний через API.

2. Google Search Console

Search Console дозволяє перевіряти ефективність основних показників веб-сайту на всіх сторінках вашого сайту одночасно. Діагностика Search Console не така детальна, як PSI, але вона автоматично перевіряє всі сторінки та відстежує історичну продуктивність, надаючи вам загальне уявлення про ефективність вашого сайту та де ви можете покращитися.

3. CrUX Dashboard

Попередні два інструменти не залежать від браузера, тобто працюють у будь-якому веб-браузері. Google надає точнішу діагностику того, як веб-сайти завантажуються в Chrome. Оскільки Google володіє Chrome, він може забезпечити вищий рівень конкретності щодо того, як завантажується сайт. Цей детальніший аналіз називається звітом Chrome User Experience (CrUX), і Google пропонує ці дані безкоштовно в Інформаційна панель CrUX. 

Інформаційна панель CrUX дуже корисна, коли вам потрібна додаткова інформація про те, як ваш веб-сайт завантажується в Браузер користувача Chrome або коли вам потрібні надійніші візуалізації продуктивності вашого сайту з часом.

Як покращити основні веб-показники

Щоб покращити свої результати CWV, перегляньте діагностику в PageSpeed Insights, Search Console або на інформаційній панелі CrUX. Інструменти підкажуть, які основні веб-показники потребують найбільшої роботи, і можуть допомогти вам вирішити їх. Для кожного Core Web Vital — LCP, FID і CLS — ви маєте прагнути до хорошого результату в PageSpeed Insights, який поміщає його в 70-й процентиль сторінок. 

Ось деякі з найефективніших виправлення для кожного аспекту основних показників веб-сайту:

Як покращити показники відображення найбільшого вмісту (LCP)

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

Визначте пріоритет ресурсу LCP

Використовуйте PSI, щоб визначити ресурс LCP сторінки (найбільший елемент) і додайте атрибут fetchpriority=“high” до елемента, якому потрібно встановити пріоритет. Це гарантує, що LCP завантажується перед іншими менш важливими елементами HTML.

Переконайтеся, що ваш LCP-ресурс можна знайти в HTML

Деякі сторінки на основі JavaScript розміщують зображення без < тег img>. Це сповільнює час LCP, оскільки JavaScript на сторінці має завантажитися, перш ніж зображення стане видимим. Натомість завантажте зображення за допомогою тегу <img> зі стандартним атрибутом src.

Застосуйте відкладене завантаження

Додайте власний атрибут відкладеного завантаження (loading=“lazy”) до своїх ресурсів, не пов’язаних із LCP (більшість зображень, фреймів iframe та JavaScript, які менші або не завантажуються у верхній частині сторінки) тому вони завантажуються після вашого ресурсу LCP.

Налаштуйте свої зображення

Створюйте зображення з нижчою роздільною здатністю. Наприклад, збережіть зображення з роздільною здатністю 72 dpi (точок на дюйм), що є стандартом для Інтернету, на відміну від 300 dpi, яке є стандартним для друку. Щоб уникнути тривалого завантаження, створюйте зображення, адаптовані до розміру екрана. Використовуйте належне розширення зображення, віддаючи пріоритет JPG перед PNG.

Як покращити показники затримки першого введення (FID)

FID зазвичай виникає через велику кількість безперервно запущеного JavaScript на сторінці . Браузеру потрібен час для запуску сценаріїв, що спричиняє затримку під час взаємодії користувачів з елементом. Ось як ви можете покращити показник FID вашої сторінки:

Зменшіть кількість JavaScript на сторінці

Інструменти аудиту, такі як PSI, можуть допомогти вам виявити непотрібні сценарії, дозволяючи оптимізувати вашу сторінку та зробити його більш реактивним. Розгляньте можливість централізації JavaScript в одному файлі, а не в кількох файлах. Щоб збільшити швидкість, уникайте використання занадто великої кількості сторонніх завантажень JavaScript.

Згортання сценаріїв

Інструменти керування тегами, такі як Менеджер тегів Google може допомогти вам об’єднати ваші сценарії в один рядок коду. Це може зменшити роботу, яку веб-переглядач має виконувати у відповідь на взаємодію користувача.

Як покращити показники сукупного зсуву макета (CLS)

Ви можете мінімізувати CLS, скориставшись цими порадами:

Встановлення чітких розмірів для завантаженого вмісту

Додавання атрибутів ширини, висоти та/або співвідношення сторін до ваших зображень говорить браузери, як змінити розмір зображення. Без цих інструкцій веб-переглядачі за замовчуванням попередньо завантажують зображення якомога меншого розміру, а потім розгортають його, коли воно повністю завантажується, викликаючи зсув.

Уникайте анімації, яка впливає на макет

Анімація (рух на сторінці) створює більший ризик CLS для веб-сайтів. Анімація, яка впливає на властивості поля або межі (наприклад, кнопка, яка розгортається, коли ви наводите на неї курсор), імовірно, призведе до проблем із CLS.