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