Поправити CLS

Доброго дня.

Готовий виправити CLS через код. Зсув макета на десктопі зазвичай викликаний картинками та iframe без width/height, шрифтами без резерву місця, і блоками, які підвантажуються і доробляються вище вже відрендереного.

План: відтворюю зсув у Chrome (Layout Shift regions), знаходжу конкретні елементи, фіксую їм розміри і резервую місце. Спочатку піднімаю актуальну версію на тестовому хостингу, виправляю і перевіряю CLS там, потім переношу на основний.

Постійно працюю з PHP, фронтендом і Core Web Vitals. Дайте доступ до коду і хостингу, і скажіть, який розділ дёргається сильніше. По термінах і оплаті зорієнтую, коли подивлюсь сайт.

Показати оригінал

Перекласти

Доброго дня!

Виправлення CLS через код — моя зона, і по ваших скрінах уже видно, де проблема, тож не гадатиму.

Sсуви (0.535 + 0.126 у main.home-page) йдуть від шапки/навігації (nav#top-nav, contacts-block, right-column, soc-list) і hero-слайдера (LCP-елемент img.home-header__slide). Тобто при завантаженні слайдер і верхнє меню «штовхають» вёрстку вниз — звідси CLS 0.66.

Як виправлю: знайду всі елементи, що шифтять, через DevTools (Layout Shift regions) і зарезервую під них місце — задам зображенням слайдера й іконкам width/height або aspect-ratio, зафіксую висоту контейнера слайдера, зарезервую місце під контакти/соцмережі в шапці, за потреби допрацюю шрифти (font-display/preload). Після цього CLS впаде в зелену зону.

Чому PageSpeed «не бачить», а Chrome бачить: на desktop з реальним завантаженням шифт проявляється, тому й у Search Console прилетіла помилка саме по комп-версії. Виправляю реальний CLS, а не цифру в тесті.
…
По процесу — рівно як ви хочете: підніму актуальну версію на окремому хостингу, там правлю й перевіряю CLS, і лише після перевірки переношу зміни на основний хостинг. Без експериментів на живому сайті.

Знадобиться доступ до коду й обох хостингів. Підкажіть, на чому сайт (CMS/движок) — і я одразу скажу точніше по термінах.

Привіт. Ситуація, коли PageSpeed мовчить, а Search Console показує помилку по CLS - стандартна. Гугл просто збирає дані на основі поведінки реальних користувачів, коли вони вже взаємодіють зі сторінкою і скролять її.

Оскільки зсув макету - це проблема виключно фронтенду, стек сайту взагалі не завадить її вирішити. З приводу копії на іншому хостингу: треба спочатку глянути на сам сайт вживу. Часто причина в якійсь дрібниці, яку можна безпечно поправити одразу без довгих маніпуляцій. Якщо ж там дійсно щось масштабне в шаблонах - зробимо чітко за вашим планом, через тестовий сервер, щоб не чіпати прод.

Скидайте посилання на сайт в особисті. Гляну, що саме там "стрибає", і скажу точні терміни та ціну.

▎ Доброго дня, Олександре!
▎
▎ Класична ситуація: PageSpeed за замовчуванням міряє mobile у лабораторних умовах і ваш десктоп-зсув не ловить, а Chrome і Search Console беруть реальні польові дані — тому помилка саме по комп-версії.
▎
▎ Я роблю сайти зі стабільним макетом без зсувів (CLS у нормі) — можу надіслати скрін DevTools → Performance → Layout Shift, де видно, як ловиться винуватець.
▎
▎ Процес: підніму копію на тест-хості, через Layout Shift Regions знайду точний блок, що стрибає, зафіксую в коді, перевірю CLS саме на десктопі (і дочекаюсь оновлення в Search Console), і лише тоді перенесу на бойовий.
▎
▎ Бонусом підключу авто-моніторинг Core Web Vitals з алертом — щоб CLS не повернувся непомітно після наступних правок контенту.
… ▎
▎ Питання по суті: десктоп-CLS майже завжди одне з двох — пізні шрифти (стрибок при font swap) або інжектовані блоки без зарезервованого місця. У вас радше шрифти чи динамічні блоки?
▎
▎ З повагою, Станіслав

Вітаю, Олександре! Ознайомився з вашою проблемою. Зсув макета (CLS) — часта проблема, яка зазвичай виникає через динамічне завантаження блоків, банерів або картинок без заздалегідь заданих розмірів (width/height) у CSS/HTML. Через це сторінка "підстрибує" під час завантаження, і Search Console відразу видає помилку Core Web Vitals. Готовий через DevTools відстежити точний момент зсуву комп'ютерної версії, знайти проблемний елемент у коді та зафіксувати його, щоб повністю усунути CLS і виправити помилку в Google. Підкажіть, на якій CMS написаний сайт або це чистий PHP? Буду радий допомогти, пишіть!

Показати оригінал

Перекласти

Доброго дня, Олександре! CLS, який видно в Хромі, але не ловить PageSpeed — типова історія: лаб-тест міряє чисту загрузку, а реальний зсув дають пізні елементи (банери, шрифти, картинки без заданих розмірів, що дострибують після рендера). Ловлю його через DevTools → Performance, секцію Layout Shift — вона підсвічує, який блок стрибає і чому. Підніму копію на тестовому хості, виправлю в коді, перевірю що CLS у нормі на десктопі, і лише тоді перенесу на бойовий. Дайте посилання на сайт — гляну, який саме блок зсуває, і назву точний термін.

Для вирішення проблеми з Cumulative Layout Shift я виконаю глибокий технічний аналіз коду, оскільки візуальні зсуви часто виникають через неправильну обробку асинхронного завантаження контенту або відсутність фіксованих розмірів у елементів верстки. Я виявлю причини, що викликають ці критичні показники в Google Search Console, і виправлю їх безпосередньо в коді.

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

Маю понад 11 років досвіду в бэкенд-розробці та адмініструванні серверів, тому підходжу до оптимізації комплексно: окрім виправлення CLS, я перевірю налаштування Nginx/Apache, щоб забезпечити стабільну роботу проекту під навантаженням.

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

Добрий день, Олександре!

CLS оптимізація — моя спеціалізація.

Причини CLS зазвичай:
- Зображення без явних розмірів width/height
- Динамічно підвантажувані елементи
- Шрифти без font-display
- Банери/реклама без зарезервованого місця
…
Що зроблю:
- Діагностика через Chrome DevTools + CLS Report
- Фікс всіх елементів, що викликають зсув
- Перевірка на тестовому хостингу
- Перенос змін на основний

Термін: 1-2 дні
Вартість: 200 PLN

Показати оригінал

Перекласти

Доброго дня. Можу виправити. Спеціалізуюсь на CWV. Є великий досвід в оптимізації сайтів.

Показати оригінал

Перекласти

Добрий день! Ми маємо великий досвід в оптимізації Core Web Vitals. Для усунення CLS проаналізуємо відображення елементів і зафіксуємо розміри зображень і блоків через CSS, щоб запобігти зсуву контенту під час завантаження. Реалізуємо це через оптимізацію критичного шляху рендерингу та налаштування асинхронного завантаження ресурсів. Готові оперативно розпочати роботу.

Показати оригінал

Перекласти