Навчання
Lighthouse Performance: як виправляти lab-проблеми, що шкодять SEO
Практичний гайд із виправлення Lighthouse performance без погоні за красивим score. Розбираємо, які lab-проблеми справді важливі.
Запусти свіжий аудит DomainLens і використовуй звіт як список пріоритетів.
Що вимірює Lighthouse performance
Lighthouse — це lab-тест: він завантажує сторінку в контрольованому середовищі й оцінює, наскільки швидко сторінка стає видимою, придатною до взаємодії та стабільною. Performance score корисний, бо показує технічні вузькі місця, але це не те саме, що реальні Core Web Vitals користувачів.
Сприймай Lighthouse як діагностичний інструмент. Він допомагає знайти render-blocking CSS, важкий JavaScript, завеликі зображення, повільну відповідь сервера, unused code та layout shifts. Важливі правки потім треба підтверджувати польовими даними PageSpeed Insights або Search Console, коли трафіку достатньо.
Як читати звіт
- Починай із failed opportunities, які впливають на LCP, TBT, CLS або server response time.
- Відділяй diagnostics від реальних fix opportunities: частина пунктів пояснює сторінку, а частина дає конкретну роботу.
- Спершу дивись mobile, бо мобільний throttling у Lighthouse показує проблеми, які desktop приховує.
- Шукай повторювані проблеми в шаблонах, а не тільки на одному URL.
- Не витрачай час на дрібні виграші, поки не виправлені великі проблеми із зображеннями, JavaScript, CSS і кешуванням.
Спершу виправляй найвпливовіше
Найшвидші перемоги зазвичай лежать у critical rendering path. Прибери unused CSS, за потреби inline тільки critical CSS, відклади non-critical JavaScript і розбий великі bundles, щоб браузер робив менше роботи до першого змістовного рендеру.
Зображення — другий найчастіший блокер. Піджени hero image під реальний розмір показу, віддавай WebP або AVIF, стискай без помітної втрати якості й preload LCP-зображення замість lazy-loading. Якщо TTFB високий, додай full-page cache, оптимізуй database queries і винеси static assets на CDN.
Типові помилки
- Оптимізувати лише під Lighthouse 100, коли реальні користувачі все ще мають погані Core Web Vitals.
- Lazy-load для above-the-fold hero image, який навпаки затримує LCP.
- Додавати optimization plugins, які приносять більше CSS або JavaScript, ніж прибирають.
- Спершу виправляти desktop і залишати mobile повільним.
- Стискати зображення без перевірки якості та responsive sizes.
Як перевіряти виправлення
Запускай Lighthouse до і після зміни на тому самому URL і в тому самому середовищі, а потім порівнюй конкретні метрики та opportunities. Хороша правка має зменшити bytes, main-thread work, render-blocking time або server wait time, а не просто посунути score на кілька пунктів.
Після деплою запусти DomainLens audit повторно й стеж за real-user data протягом наступного вікна оновлення CrUX. Lab-покращення видно одразу, але польовим даним потрібні візити й час.