Сукупна зміна макета - фактор рейтингу Google

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

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

Ідеальний кумулятивний зсув макета становить 0,1 секунди або менше

CLS найкращий при 0,1 секунди або менше, 0,1-0,25 секунди потребує покращення (тимчасове прийняття). Будь-який бал більше 0,25 секунди класифікується як поганий індекс, який необхідно негайно покращити, щоб уникнути плутанини під час роботи користувачів, як у наведеному вище прикладі.

1. Зображення не має розмірів.
2. Оголошення, вставки та iframes не мають розмірів.
3. Динамічний вміст.
4. Веб -шрифти викликають/fout.
5. Швидкість веб -сайту.
6. анімація.

3.1 Зображення не має розмірів

Завжди включайте атрибути розміру ширини та висоти для своїх зображень та відеоелементів. Також резервуйте необхідний простір, використовуючи аспектні рамки CSS. Такий підхід гарантує, що браузер зможе правильно виділити простір у документі під час завантаження зображення.

Зміна макета відбувається, коли зображення не має вказаного розміру

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

Якщо ви вкажете атрибути ширини та висоти в розмітці зображення, навіть якщо браузер має лише HTML, він все одно може виділити відповідну кількість місця.

Зміна макета не відбувається, коли зображення має вказаний розмір

Відбудеться візуалізація (як показано на вищевказаній графіці), коли для зображення буде доступне відповідна кількість місця, і не відбудеться зміни тексту, коли зображення буде завантажено.

3.2 Безрозмірні оголошення, вставки та iframes можуть спричинити сукупну рекламу Shift Shift

Реклама є однією з найбільших причин зміни макету. Щоб надати рекламодавцям більшу гнучкість у своїх кампаніях, видавці часто підтримують динамічні розміри реклами. Після відображення рекламного контенту слоти також можна змінити розмір, якщо для реклами недостатньо місця. Усі ці динамічні зміни переміщують і тягнуть вміст на сторінці. Один із способів вирішення проблем із рекламою, які викликають низький CLS, полягає в стилізації елемента, де повинна відображатися реклама. Наприклад, якщо ви стилізуєте, щоб мати певну висоту та ширину, то реклама буде обмежена цими.

Є два рішення, якщо є дефіцит запасів, а оголошення не показуються:

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

Крім того, для деяких макетів, де реклама заповнює весь рядок над, можливо, стовпцем праворуч або ліворуч від веб-сторінки, якщо сторінка невидима, не буде жодних змін. Вони не матимуть значення на мобільних чи настільних пристроях, але це залежить від макета теми. Вам доведеться перевірити, чи є проблема з інвентарем.

Обмежте розміщення оголошень біля верхньої частини перегляду. Реклама біля верхньої частини вікна перегляду може викликати більші зміни макета, ніж реклама в середині. Це відбувається тому, що оголошення у верхній частині часто мають більше вмісту внизу, що означає, що більше елементів переміщується, коли реклама викликає зсув. Навпаки, реклама біля середини вікна перегляду може не переміщувати стільки вмісту над ним.

Вбудовування та iframe

Вбудовані коди дозволяють відображати веб-контент з іншого місця на вашому сайті. Наприклад, відео з YouTube, Google Maps, публікації Instagram тощо. Однак проблема полягає в тому, що більшість віджетів часто не знають заздалегідь, наскільки великий вбудований контент міститиме зображення, відео або кілька рядків тексту. В результаті платформи, які надають вбудовування, не завжди резервують достатньо місця для них, що може призвести до змін макету під час їх остаточного завантаження.

Note: I have provided a translation that closely follows the original English text while maintaining clarity and conciseness. If you have any specific requests or need further clarification, please let me know.

Код вбудовування дозволяє відображати веб -вміст з інших місць на сторінці

Щоб обійти це, ви можете мінімізувати CLS, обчислюючи достатньо місця, щоб вбудувати заповнювачі або резервні. Процес, який ви можете використовувати для вбудовування::

• Отримайте висоту остаточного вбудовування, перевіривши її за допомогою інструментів розробника браузера.
• Стилізуйте заповнювач для вбудовування в ці розміри.
• Ви також можете використовувати медійні запити для пояснення будь-якої різниці в розмірах реклами/заповнювача між різними форм-факторами.
• Після завантаження вбудованого вмісту iframe, який він містить, змінить розмір, щоб відповідати його вмісту.

3.3 Динамічний вміст

Уникайте вставляння нового вмісту поверх існуючого вмісту, якщо це не для задоволення взаємодії користувача. Це гарантує, що будь-які зміни макету, які відбуваються, є очікуваними. Ви, ймовірно, відчули зміну макету інтерфейсу користувача, коли елементи несподівано з'являються у верхній або нижній частині вікна перегляду на веб-сторінці. Так само, як і реклами, динамічний контент буває різних видів, таких як банери та форми реєстрації або панелі сповіщень, які змінюють решту вмісту сторінки, наприклад:

• "Пов'язаний" вміст
• "Встановіть наш [iOS/Android] додаток"
• "Зареєструйтеся для резервування"
• "Замовте тут"

Якщо вам потрібно відобразити динамічний вміст поверх існуючого вмісту, попередньо визначте місце для цього динамічного вмісту (наприклад, використовуючи заповнювачі або скелетний інтерфейс користувача), щоб під час завантаження він не викликав несподіваних змін у вмісті сторінки.

3.4 Веб -шрифти викликають/ fout

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

Завантаження та відображення шрифтів можуть викликати зміни макету двома способами::

• Під час процесу завантаження текст відображатиметься стандартним шрифтом браузера, а після завершення завантаження він зміниться назад на користувальницький шрифт, що викликає FOUT - Flash Of Unstyled Text.
• Текст буде прихований до завантаження користувальницького шрифту, що викликає FOIT - Flash Of Invisible Text.

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

• Font-display дозволяє вам змінити поведінку відображення користувальницьких шрифтів за допомогою таких значень, як «auto», «swap», «block», «fallback» та необов'язково. На жаль, усі ці значення (крім необов'язкового) можуть викликати повторне представлення.
• API завантаження шрифтів може скоротити необхідний час отримання шрифтів.

Для Chrome 83 можна запропонувати наступне:

• Використовуйте на основних веб-шрифтах: попередньо завантажені шрифти мають більший шанс отримати перший шар фарби, у цьому випадку без зміни макету.
• Комбінуйте та відображайте шрифт: необов'язково.

3.5 Швидкість сайту

Зміна макету у відповідь на взаємодію користувача є позитивним кроком. Однак ваш сайт повинен завантажувати те, що йому потрібно завантажити протягом 0,5 секунди (500 мілісекунд) від останньої взаємодії користувача, щоб не враховуватися в балі кумулятивного зсуву макета. Тому оптимізація вашого сайту для швидкості та реактивності є дуже важливою для балу CLS вашого сайту.

3.6 Анімація руху анімації

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

Замість того, щоб змінювати властивості розміру висоти та ширини елемента, використовуйте transform: scale(). Щоб перемістити елемент, уникайте зміни властивостей top, right, bottom, left і замість цього використовуйте transform: translate(). Переконайтеся, що ефекти руху тривають менше 500 мс.

Ви повинні використовувати лінійну анімацію, яка має постійну швидкість замість "ease", яка збільшує швидкість на початку, сповільнюється в кінці і має тривалішу тривалість. Щоб дізнатися більше про те, які властивості CSS змінюють макет веб-сторінки, дивіться також CSS Triggers та High-performance animations.

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

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

Розрахунок включає дві показники/події - фракцію удару та фракцію відстані.

5.1 Вплив частка

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

Вражаюча фракція - це кількість місця, який нестабільний елемент займає в перегляді

На зображенні вище є елемент, який займає 50% вікна перегляду пристрою. Потім у наступному кадрі елемент переміщується вниз на 25% висоти вікна перегляду. Червоний пунктирний прямокутник вказує комбінацію видимої області елемента в обох кадрах, що в цьому випадку становить 75% від загального розміру вікна перегляду, тому його коефіцієнт впливу виражається в балах 0,75.

5.2 Дробна відстань

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

Відстань

У наведеному вище прикладі найбільшим виміром вікна перегляду є висота, а нестабільний елемент перемістився на 25% висоти вікна перегляду, тобто дробна відстань становить 0,25. Кумулятивний бал зміщення макета обчислюється шляхом множення коефіцієнта впливу на коефіцієнт відстані. У цьому прикладі коефіцієнт впливу дорівнює 0,75, а коефіцієнт відстані дорівнює 0,25, тому бал зміщення макета дорівнює 0,75 x 0,25 = 0,1875.

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

За словами Google, є два способи виміряти CLS: перший називається Лабораторні дані (у лабораторії), другий називається Поле (на місці).

Примітка: Лабораторні інструменти зазвичай завантажують сторінки в синтетичному середовищі і тому можуть вимірювати лише зміни макету, які відбуваються під час завантаження сторінки. Тому значення CLS, що повідомляються лабораторними інструментами для певної сторінки, можуть бути нижчими, ніж те, що відчувають реальні користувачі у реальному світі.

Лабораторні інструменти включають:

• Chrome DevTools
• Маяк
• WebPageTest

Інструменти поля включають:

• Звіт про досвід користувача Chrome
• PageSpeed ​​Insights
• Пошукова консоль (звіт про основні веб-життєво важливі показники)
• Бібліотека JavaScript Web-vitals

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

Отже, чи хороший індекс CLS на вашому веб-сайті? Проаналізуйте свій веб-сайт безкоштовно з R Digital.

>>> Дивіться більше: Вплив основних веб-життєво важливих показників на бізнес

R Digital — це глобальне агентство цифрового маркетингу з повним спектром послуг, яке спеціалізується на розробці платформ цифрового досвіду. Незалежно від розміру чи охоплення вашого бізнесу, ми розробимо рішення, яке підходить саме вам.

Для запитів, питань чи призначень не соромтеся зв’язатися з нами. Отримайте персоналізовану підтримку та уявлення від провідних маркетологів.