Відео: Інструменти розробника Chrome (DevTools) для SEO feat. Марко Федоренко

Марко Федоренко, автор каналу SEO Ideas, показує наживо, як робити технічний аудит сторінки в панелі розробника Chrome. У вкладці Network він розбирає запит до сервера і відповідь: код відповіді, заголовки, тіло документа. Вихідний HTML від сервера порівнюється з деревом у вкладці Elements, яке браузер уже добудував через JavaScript, і так видно, чи є контент у коді до виконання скриптів.

Окремо Марко міряє Core Web Vitals прямо в DevTools: панель показує перелік подій до першого рендера і кожне зміщення макета окремо, аж до того, що конкретний блок зсунувся на 45 пікселів вправо. Це локальний тест без штучного сповільнення, тому цифри відрізняються від Lighthouse. Виправляти він радить те, що впливає на користувача і виходить за норму, з оглядкою на ціну робіт: три рядки CSS робимо одразу, а якщо розробник оцінює правку в сотні годин, рахуємо незароблені гроші і порівнюємо з іншими задачами продукту.

З практичних прийомів у відео є емуляція пристроїв із власними розмірами екрана (зокрема запуск сторінки як з десктопа), зміна User Agent на Googlebot Smartphone (з застереженням, що IP лишається українським, тому серверні правила за діапазоном адрес це не обійде), редагування CSS і HTML прямо на сторінці для перевірки гіпотез та інструмент Coverage, який показує невикористаний CSS і JavaScript. На прикладі власного сайту Марко демонструє responsive-зображення: оригінал 8,7 МБ, десктоп отримує 157 КБ, мобільний 47 КБ.

Про редизайн Марко розповідає два кейси. На сайті товариша після редизайну впали позиції, бо зображення переверстали через CSS background і структура HTML змінилася; після повернення коректної верстки позиції відновлювалися два місяці. На іншому проєкті після редизайну трафік подвоївся за місяць без нового контенту і закупівлі посилань, тільки через реорганізацію внутрішньої перелінковки і подачі контенту. Зміни він радить тестувати на двох схожих групах сторінок і чекати результату приблизно квартал, якщо Googlebot сторінки вже обійшов.

Таймкоди:

• 0:00 інтро
• 1:05 на що дивитись
• 6:30 де дивитись Core Web Vitals
• 9:32 що має вплив на SEO
• 10:43 як запустити рендер сторінки від десктопа
• 13:09 формулюємо ТЗ для розробників
• 13:53 порівнюємо код сервера
• 16:40 попередній перегляд доступності
• 17:33 як комунікувати з розробниками
• 20:30 приклад реалізації зображення для розробників
• 23:08 зміни, тести і юзерагенти
• 25:50 знаходимо невикористаний CSS і JS
• 29:43 таблиці
• 35:30 A/B тести
• 38:28 скільки чекати на поліпшення ранжування після впровадження
• 39:25 тест на індексацію JS
• 40:46 пришвидшити рендер
• 41:35 DOM-дерево
• 46:49 title підтягується з іншої мовної версії