Зробити Google щасливим неможливо. Я давно махнув на це рукою, хоча є питання, які варто виправити, наприклад CLS (Кумулятивний зсув макета).
Кумулятивний зсув компонування
Кумулятивний зсув розкладки - це кумулятивна зміна розкладки. Ця метрика є важливою, оскільки вона аналізує стабільність зору і частота, з якою відвідувачі стикаються з несподіваними змінами макета
У двох словах, це вимірює будь-яке зміщення елементів у верхній частині сторінки під час завантаження.
Досягнення низького CLS допомагає зробити сторінку приємною для очей і запобігає дратівливим рухам, які можуть призвести до втрати читачем зору та/або положення важливих елементів навігації.
Вважається хорошим користувацьким досвідом, якщо CLS не перевищує 0,1, до 0,25 він потребує покращення і далі вважається поганим показником. Це, як ви, мабуть, знаєте, можна виміряти кількома способами. Найбільш поширеними є PageSpeed Insights.
Як зазначається в документації проекту Основні веб-показникизгідно з документацією, поганий CLS може бути викликаний різними елементами, такими як зображення або відео з невідомими розмірами, шрифт, який відображається більшим або меншим, ніж його альтернатива, або реклама, віджет або анімаційний ефект сторонніх виробників, який динамічно змінює розмір
Парадоксально, але деякі з елементів, які мають тенденцію чистити CLS, є рекламою Google Adsense. Особливо, якщо ви використовуєте автоматична реклама дозволити Google вирішувати все (не дуже рекомендується, найкраще використовувати автоматичну рекламу лише для показу стрічкових та/або анкорних оголошень). Бувають випадки, коли навіть повністю руйнується швидкість завантаження.
Як виявити скролінг
Ось у чому суть питання: що саме треба шукати і як це знайти? Ну, все, що змінює розмір та/або прокручується під час завантаження.
Тепер, коли ми намагаємося вирішити проблему з Adsense, ми можемо поглянути на інші елементи, які можуть сприяти підвищенню CLS. Для цього є різні способи, ось декілька з них.
Дивлячись на
Найпростіший метод - просте спостереження, на око. Якщо рух помітний, ви побачите його одразу, але є менш помітні рухи, які потребують більш уважного огляду.
У Консолі пошуку
У GSC в розділі "Top Web Metrics" ви можете отримати список URL-адрес з проблемами CLS і LCP, що допоможе вам більш детально розглянути їх по черзі.
Відладчик кумулятивного зсуву макета
Налагоджувач кумулятивного зсуву макета, це веб-сайт, на якому ви вводите URL-адресу, яку хочете проаналізувати, і він створює анімований GIF-файл, який показує всі зміни дизайну мобільної та десктопної версії
Цей інструмент, створений інженером Chrome, є одним з найкорисніших інструментів для пошуку проблем CLS.
Якщо більша частина тексту на сторінці виділена, швидше за все, ваші шрифти спричиняють зміщення макета.
Генератор GIF-файлів зсуву макета
Генератор GIF-файлів зсуву макета ще один сайт, який робить те ж саме, він генерує gif зі зміщеннями для мобільної та десктопної версії. Можете спробувати, щоб порівняти результати. Завжди існують невеликі відмінності у вимірах кожного інструменту, і ви можете виявити в одному інструменті те, що інший не в змозі показати або не виявляє в даний момент.
CLS Візуалізатор
Цей інструмент, будучи одним з найпростіших, дозволяє мені найкраще вловлювати зміни.
CLS Візуалізатор це дуже корисне розширення, яке, як випливає з назви, допоможе вам візуалізувати метрику кумулятивного зсуву макета сторінки, показуючи вам, які саме елементи змінюються і як саме вони змінюються. Зверніть увагу, що це також лабораторний інструмент, який надає дані на основі вашого пристрою, браузера, роздільної здатності екрану або типу з'єднання.
Коли ви активуєте розширення, воно покаже вам CLS-вимірювання у вигляді списку, і при натисканні на кожне з них червоним кольором з'явиться анімація елемента, який його викликає.
Завдяки цьому розширенню я досяг нульового CLS на багатьох сторінках. Хоча причин може бути так багато, що я залишив його встановленим, щоб не поспішаючи переглядати URL-адреси.
Змініть швидкість завантаження сайту за допомогою Chrome Dev Tools
Chrome Dev Tools пропонує цікаві можливості, одна з найбільш корисних для того, щоб розібратися з цією штукою CLS - це можливість зменшити пропускну здатність, з якою завантажується сторінка, щоб ви могли чітко бачити, коли відбувається зміна дизайну і які елементи цьому сприяють.
Для цього відкрийте в браузері Chrome Dev Tools правою кнопкою миші/перейдіть на свій сайт і в розділі "Мережа" знайдіть значок Wifi, як показано на зображенні, і поруч з ним ви побачите випадаюче меню, в якому ви можете додати власну швидкість.
Створіть новий профіль і додайте 100 Кб або менше, щоб протестувати його в "сповільненому режимі".
Тепер, переглядаючи веб-сторінки на швидкості, яка залишилася з часів повільного Інтернету, вам буде набагато легше визначити, що може спричиняти проблеми під час завантаження.
Рендеринг
У регіонах зміни макета в Chrome Dev Tools ви також можете бачити зміни макета, виділені синім кольором, під час перегляду сторінки в режимі реального часу
Ось кроки, щоб увімкнути Layout Shift Regions
:У консолі знайдіть пункт "Rendering" (Візуалізація).
Встановіть прапорець Rendering regions (Регіони рендерингу) та будь-які інші прапорці, які ви хочете спробувати.
Тепер при перегляді сторінки зміни верстки будуть підсвічуватися синім кольором.
За допомогою розширення для браузера
У браузері Chrome можна встановити розширення CLS Checker - подорож далі і протестувати всі ті URL-адреси, які мають низькі показники. Крім того, розширення дає підказки у вигляді червоних міток і показує список елементів і CLS, які вони споживають. При натисканні на кнопку "Google" підсвічується відповідний елемент. У моєму випадку, так як видачу реклами Adsense вже виправили, з'являється тільки одна.
Webpagetest
Ще одна сторінка вимірювання, де можна зробити тест за адресою webpagetest.org і ви можете переглянути відео та анімовані гіфки, які він генерує.
Призупинення відео полегшує пошук невеликих зміщень.
Якщо придивитися уважніше, пункти меню, а також заголовок і тексти трохи зміщені вправо, що виглядає як зміна розміру та/або розташування шрифту, але рекламний простір над заголовком вже зарезервований, тому це не зміщує контент вниз. Це було вирішено шляхом зменшення розміру H1 та приведення до ладу обгортки супровідного тексту.
Але це вже інша тема, а зараз давайте розберемося з поведінкою реклами.
Рішення для резервування місць під рекламні блоки
У пошуках найкращого та найшвидшого рішення я виявив, що найкращим рішенням було додати мінімальне значення висоти до обгортки (div) навколо кожного з рекламних блоків, щоб зарезервувати це місце та уникнути прокрутки після завантаження
Однак, схоже, що недостатньо використовувати клас для вказівки на цю CSS властивість, а потрібно ще й використовувати ідентифікатор для обгортки. Схоже, що з невідомих причин JavaScript Google AdSense видаляє директиви мінімальної висоти з будь-якого батьківського об'єкта. Однак вони не видаляються, якщо ви використовуєте ідентифікатор для таргетингу CSS.
Це пояснюється тим, що тут узагальнено і дещо детальніше в документації Google. Оскільки я знайшов це рішення болем в дупі, оскільки мені довелося перевірити всі блоки, я продовжував шукати альтернативу, поки не знайшов те, що працювало для мене, а саме Вставка реклами. Це були кроки.
Зміна адаптивних оголошень на фіксований розмір
Перше, що було зроблено - це припинення використання адаптивних рекламних блоків. Я змінив всі блоки на фіксовані розміри
Щодо цього рішення Ви повинні вивчити та оцінити Ваш конкретний випадок.
Хоча Google стверджує, що адаптивні приносять більше доходу (очевидно, через можливість показу різних розмірів), цей показник є досить еластичним і може змінюватися залежно від різних сценаріїв. Якщо ви виберете найпопулярніші розміри, у вас завжди будуть показуватися оголошення.
Вимкнути оптимізацію розміру
Хоча блоки і так повинні мати фіксований розмір, варто відключити опцію, яка дозволяє Google самостійно визначати розмір мобільної реклами. Цей параметр можна знайти в адмініструванні Adsense в розділі Оголошення/Глобальні налаштування.
Таким чином ми уникаємо несподіванок, якщо пропустили оголошення, яке розмістили вручну. У будь-якому випадку, те, що вони мають фіксований розмір, не означає, що вони більше не реагують.
Резервування місця для оголошень за допомогою Ad Inserter
Ad Inserter - це, на мою думку, найкращий плагін для управління рекламою, який можна використовувати навіть для додавання іншого контенту
Щоб зарезервувати місце для кожного оголошення, просто перейдіть в розділ "Показ" і задайте ширину і висоту кожного блоку.
Якщо ви використовуєте су pRO версіяви також можете перевірити Lazy Load, який також, як правило, допомагає полегшити деякі з CLS трохи більше.
Деякі міркування
Резервування місця під Adsense має свої недоліки, коли оголошення не можуть бути показані, тому що вони не обслуговуються в такому розмірі або для вашого сайту в якийсь момент немає рекламодавців, ви можете отримати порожнє місце розміром з зарезервоване місце.
В Ad Inserter тільки для вставок на стороні сервера можна задавати висоту безпосередньо кодом Кастомний CSS .
Зауважимо, що висота оголошення визначається кодом оголошення. У коді для адаптивних оголошень можна задати висоту оголошення, виходячи з доступного простору
Деякі рекламні мережі (наприклад, AdSense) можуть також показувати оголошення, розмір яких менший за доступний простір. Висота блоку, як визначено в Ad Inserter, - це висота вставленого блоку, тобто div, який його обгортає. Це місце зарезервоване для реклами. При його резервуванні може статися наступне:
- Якщо висота оголошення збігається з висотою зарезервованого місця (висотою блоку), то зміна макета не відбудеться і не вплине на CLS.
- Якщо висота реклами перевищує висоту зарезервованого місця (висоту блоку), конструкція може бути зміщена вниз, щоб вмістити рекламу і вплинути на CLS.
- Якщо висота оголошення менше висоти зарезервованого місця (висоти блоку), то під оголошенням вийде порожній простір, але макет не зміниться і не вплине на CLS.
Деякі рекламні коди, такі як адаптивний рекламний код AdSense, можуть перевизначати висоту основних контейнерів. При цьому висота блоку буде перезаписана і не буде застосовуватися
Коротше кажучи, у разі нагальної потреби виправити проблеми з CLS шляхом мінімізації змін макету, найшвидшим варіантом є використання фіксованих розмірів оголошень там, де це можливо.
І заодно ви можете переконатися, що у вас немає пропущених розмірів на зображеннях, це також можна виправити різними способами. Кілька швидких і простих способів, якими можна скористатися Парфумерія (плагін, який я рекомендую) або WP Rocket (обидва на платній основі).
Або плагін Litespeed Cache якщо ви розміщуєте свій блог на сервері Litespeed.
Якщо все пройшло добре, через кілька годин ви побачите падіння CLS в польових звітах, а через кілька днів - в лабораторних звітах від PageSpeed Insights.