Сукупний зсув макета – Cumulative Layout Shift, або скорочено CLS, є одним із трьох показників у новому проекті Google Core Web Vitals. Цей звіт Google використовує як фактор ранжування, починаючи з травня 2021 року.
Тому, якщо ваша сукупна оцінка зсуву макету не потрапляє в рекомендований діапазон Google, ви потрібно це виправити, щоб досягти порогового значення Google і уникнути будь-яких проблем (а також просто покращити досвід для ваших відвідувачів).
З цієї посади ви дізнаєтеся, що таке Cumulative Layout Shift і як він підключається до WordPress, а також отримаєте поради щодо WordPress щодо покращення оцінки сукупного зсуву макета.
Що таке сукупний зсув макета в WordPress
Ви коли-небудь читали статтю на веб-сайті (наприклад, новини), і зміст статті постійно знижувався в міру завантаження нових оголошень? Це не просто дратує – це чудовий приклад кумулятивного зсуву макету!
Сукупне зсув макета – це коли контент вашого сайту «зміщується» у міру завантаження. Оскільки це сильно дратує відвідувачів сайту, Google закликає веб-майстрів звернути увагу на цей показник та покращити його.
Сукупне зсув макета є одним із трьох показників у звіті Google Core Web Vitals.
Який добрий бал за зсув макета?
Google надає три можливі значення:
- Добре – менше 0,1.
- Потрібне покращення – від 0,1 до 0,25.
- Погано – вище 0,25.
Як визначити, які елементи на вашому сайті змінюються
Перш ніж ви зможете покращити свій результат, необхідно визначити, у чому полягають проблеми. На щастя, Google спрощує це завдання, пропонуючи PageSpeed Insights.
Для початку перейдіть до PageSpeed Insights і проаналізуйте одну з URL-адрес вашого сайту, наприклад, вашу домашню сторінку. Угорі ви повинні побачити зведення оцінки кумулятивного:
PageSpeed Insights дозволяє заглибитися і визначити конкретні елементи, які «змінюються». Щоб знайти цей аналіз, перейдіть до розділу Діагностика та розгорніть керівництво Уникайте великих зрушень макета:
Обов'язково перегляньте результати аналізу як для мобільних, так і для настільних комп'ютерів. Наприклад, на скріншоті вище є три елементи, які Google позначає під час перегляду результатів для мобільних пристроїв, і на ньому немає зазначених елементів у результатах для комп'ютерів.
Ви можете помітити щось подібне, або у вас різний набір елементів, що переміщуються для мобільних і настільних комп'ютерів.
Ще один спосіб візуалізувати зсув макета
Ще один спосіб побачити, як змінюється контент вашого сайту – використовувати інструменти розробника Chrome, щоб штучно уповільнити ваше з'єднання (що спрощує виявлення навіть незначного зсуву контенту). Перейдіть до Chrome Інструменти розробника до вкладки Network у випадаючому меню Online (No throttling) встановіть значення завантаження користувача, наприклад, 60 кб/с (супер повільне) :
Перезавантаживши сайт, ви зможете чіткіше побачити, як ваш контент змінюється при завантаженні.
Як тільки ви визначите, що саме змінюється, зосередьте свої зусилля на вирішенні цих проблем. Тим не менш, є деякі загальні передові практики кумулятивного зсуву макета, які слід застосовувати, щоб уникнути проблем у масштабах всього сайту.
Дивіться також:
Як до WordPress додати фонове зображення в блок, за заголовок та в категорію
Як виправити сукупний зсув макета на WordPress
Виправлення Cumulative Layout Shift може вимагати небагато технічних навичок. Багато цих виправлень пов'язані з вивченням коду. На жаль, у цій ситуації складно не заглядати в код, але все ж таки постараємося включити в цей процес виправлення плагіни, що спрощують ваші дії.
Завжди встановлюйте розмір зображення
Якщо ви не задаєте розміри зображення в коді свого сайту, зображення можуть викликати усунення решти вашого контенту під час завантаження.
На щастя, якщо ви додаєте зображення за допомогою редактора WordPress, WordPress автоматично зробить це за вас (а також налаштує адаптивні зображення за допомогою srcset). Однак, якщо ви вручну додаєте зображення на свій сайт за допомогою коду, потрібно завжди вмикати розміри. Ви повинні побачити атрибути висоти та ширини у HTML-зображенні.
Наприклад:
Завжди задавайте розміри для Embeds/iframes
Як і у випадку із зображеннями, ви також захочете встановити розміри для будь-яких embeds/iframes, які ви використовуєте.
Наприклад, якщо ви вбудовуєте відео з YouTube або Карти Google, обов'язково вкажіть висоту та ширину. Ви також можете подумати про завантаження заглушок перед вбудовуванням, що стане гарною практикою підвищення продуктивності.
Ви можете знайти безліч рішень, які дозволять замінити вбудоване YouTube зображення-заглушку (до тих пір, поки користувач не натисне для відтворення відео). Деякі хороші варіанти – плагін WP Rocket або безкоштовний плагін Lazy Load від WP Rocket.
Зарезервуйте місце для реклами
По суті, реклама - це просто ще один тип вбудовування, але він заслуговує на особливу згадку, тому що реклама є одним з найважливіших факторів, що впливають на сукупну зміну макета. Впевнені, що ви були на сайті, де контент постійно скакав через пізнє завантаження реклами.
Вирішення цієї проблеми – зарезервувати місце для оголошень у коді вашого сайту. Наприклад, припустимо, що ви хочете розмістити на бічній панелі рекламу хмарочоса розміром 160×600 пікселів. Замість того, щоб просто додавати рекламний код безпосередньо, ви можете помістити його в із розмірами оголошення. Таким чином, простір буде зарезервований навіть якщо рекламний контент ще не завантажений. Завантаження рекламного контенту не викликає жодних зрушень.
Будьте обережні з розміщенням реклами у верхній частині області перегляду, оскільки саме ці розташування можуть викликати зсув макета.
Виправте проблеми із завантаженням шрифтів
Одна велика проблема зі зсувом макета - це те, як завантажуються шрифти користувача. Наприклад, якщо ви використовуєте шрифти з Google Fonts або Adobe Fonts, вони можуть викликати зсув макета двома способами:
- Спалах невидимого тексту (FOIT).
- Спалах не стилізованого тексту (FOUT).
По суті, проблема в тому, що браузер відвідувача може намагатися відобразити текст до завантаження шрифту, що настроюється. Після завантаження шрифту, що настроюється, він оновить стиль тексту, що призведе до його зміщення при зміні, скажімо, нестилізованого тексту на ваш шрифт, що настроюється.
Є кілька способів вирішити цю проблему. Один із варіантів – попередньо завантажити важливі файли шрифтів. Це змушує браузери відвідувачів одразу завантажувати файл шрифту, що виключає ймовірність FOIT/FOUT. Однак будьте обережні: завантажуйте попередньо лише найважливіший ресурс (наприклад, шрифт для вашого контенту у верхній частині сторінки). Надто часто попереднє завантаження уповільнить ваш сайт.
Ви можете налаштувати список ресурсів шрифтів для завантаження за допомогою безкоштовного плагіна Autoptimize у розділі Extra:
Для Google Fonts можна локально розмістити файл шрифту та його завантажувати. Ви можете налаштувати це за допомогою безкоштовного плагіна OMGFякий включає в себе приємну функцію для автоматичного попереднього завантаження верхніх шрифтів.
Якщо ви хочете уникнути проблем, подумайте про використання системного стека шрифтів. Це не тільки вирішує проблеми із завантаженням шрифтів, але також скорочує кількість HTTP-запитів та прискорює роботу сайту.
Однак недоліком, очевидно, є те, що залишається набагато менше гнучкості, коли справа доходить до стилю/дизайну.
Будьте обережні з динамічним використанням контенту
Якщо ви динамічно додаєте контент для таких речей, як форми підписки електронною поштою, пов'язаний контент, повідомлення GDPR тощо, будьте особливо обережними, щоб уникнути зсуву макета.
Просто ніколи не вставляйте динамічно контент поверх існуючого контенту, якщо він не походить від взаємодії з користувачем (наприклад, коли користувач натискає кнопку).
Наприклад, якщо ви збираєтеся динамічно впроваджувати будь-який елемент CTA, спробуйте помістити його під своїм постом у блозі, а не вгорі чи посередині.
Поліпшіть свій загальний рейтинг зсуву макету WordPress вже сьогодні
За допомогою порад у цьому пості ви зможете покращити свій показник сукупного зсуву макета (CLS) WordPress і заслужити прихильність Google.
Звичайно, Cumulative Layout Shift – лише одна з трьох метриків у Core Web Vitals – вам також потрібно звернути увагу і на них.
Джерело: wplift.com
Коментарі до запису: 0