Google Lighthouse: що це таке і як працювати в 2026 році

Google Lighthouse — безкоштовний інструмент Google, який автоматично перевіряє ваш сайт за чотирма категоріями: швидкість (Performance), доступність (Accessibility), кращі практики (Best Practices) і SEO. Кожна категорія отримує оцінку від 0 до 100. У 2026 році Lighthouse вбудований у Chrome DevTools, доступний через PageSpeed Insights і легко інтегрується в CI/CD. У цьому гайді — що означають усі показники, як запустити аудит, читати звіт і виправляти найпоширеніші проблеми.

Що таке Google Lighthouse

Google Lighthouse — це відкритий автоматизований інструмент для аудиту якості веб-сторінок, розроблений Google. Він запускає серію перевірок на конкретній сторінці і формує детальний звіт з оцінками та рекомендаціями щодо покращень.

Lighthouse з’явився у 2016 році спочатку як розширення Chrome. З 2018 року його вбудовано безпосередньо в Chrome DevTools. Сьогодні він є відкритим проектом на GitHub і використовується в PageSpeed Insights, Google Search Console і навіть як основа CI/CD-перевірок у сотнях компаній.

Ключова перевага Lighthouse — він не просто показує «поганий показник», а пояснює чому і що конкретно потрібно зробити. Кожна рекомендація містить оцінку потенційного виграшу в часі завантаження.

4 категорії, які перевіряє Lighthouse

Кожен звіт Lighthouse охоплює чотири окремі категорії. Важливо розуміти, що вони не впливають одна на одну — низький SEO Score не знижує Performance Score і навпаки.

1. Performance (Продуктивність)

Найважливіша категорія для SEO. Вона вимірює швидкість завантаження сторінки та взаємодію з нею через 6 метрик:

• LCP (Largest Contentful Paint) — час появи найбільшого елемента (зображення, заголовок). Ціль: ≤ 2.5 сек.
• INP (Interaction to Next Paint) — час відгуку на клік/натискання. Ціль: ≤ 200 мс. У 2024 замінив FID.
• CLS (Cumulative Layout Shift) — стабільність макету: наскільки елементи зміщуються під час завантаження. Ціль: ≤ 0.1.
• FCP (First Contentful Paint) — час появи першого елемента на екрані. Ціль: ≤ 1.8 сек.
• TBT (Total Blocking Time) — загальний час блокування основного потоку JavaScript. Ціль: ≤ 200 мс.
• Speed Index — наскільки швидко заповнюється видима частина сторінки. Ціль: ≤ 3.4 сек.

LCP, INP і CLS разом складають Core Web Vitals — офіційні сигнали якості сторінки від Google, які входять до алгоритму ранжування.

2. Accessibility (Доступність)

Ця категорія перевіряє, чи доступний ваш сайт людям з обмеженими можливостями — слабозорим, користувачам скрін-рідерів, тим, хто використовує лише клавіатуру. Перевіряються: alt-атрибути зображень, контрастність тексту, коректні aria-мітки, логіка заголовків, інтерактивні елементи та їх фокусування.

Хороший Accessibility Score — не лише питання доступності, а й непрямий SEO-сигнал: правильна розмітка допомагає Google краще розуміти структуру сторінки.

3. Best Practices (Кращі практики)

Перевіряє технічну «здоров’я» сторінки: наявність HTTPS, відсутність уразливостей у JavaScript-бібліотеках, використання застарілих API (наприклад, document.write, XMLHttpRequest), помилки в консолі браузера, наявність Content Security Policy. Висока оцінка тут означає, що сайт безпечний і технічно актуальний.

4. SEO

Базова технічна SEO-перевірка сторінки: наявність і коректність тегів title та meta description, директив robots, canonical, hreflang, розмір шрифту для мобільних пристроїв, наявність структурованих даних, стан robots.txt. Важливо: Lighthouse SEO — це не повний SEO-аудит, а лише технічний чекліст однієї сторінки.

Як запустити Google Lighthouse: 5 способів

1. Chrome DevTools (найшвидший варіант)

Відкрийте Chrome, зайдіть на потрібну сторінку, натисніть F12 або Ctrl+Shift+I (Mac: Cmd+Option+I). Перейдіть на вкладку Lighthouse, оберіть категорії та пристрій (Mobile / Desktop), натисніть Analyze page load. Через 30–60 секунд ви отримаєте повний звіт прямо в браузері.

Порада: запускайте аудит у режимі інкогніто (Ctrl+Shift+N), щоб розширення браузера не впливали на результати.

2. PageSpeed Insights

Перейдіть на pagespeed.web.dev, введіть URL і натисніть Analyze. PageSpeed Insights поєднує лабораторні дані Lighthouse із реальними даними Chrome UX Report (CrUX) — тобто показує, як сторінку завантажують реальні відвідувачі. Саме тут Google бачить ваш Core Web Vitals для ранжування.

3. Розширення Lighthouse для Chrome

Встановіть офіційне розширення Lighthouse з Chrome Web Store. Воно додає кнопку в панель інструментів — один клік і ви отримуєте результат без відкриття DevTools. Зручно для менеджерів і власників сайтів, яким не потрібно заглиблюватися в DevTools.

4. Lighthouse CLI

Для розробників і автоматизації. Встановлення:

npm install -g lighthouse
lighthouse https://example.com --output=html --output-path=report.html

CLI підтримує генерацію HTML, JSON та CSV звітів, кастомні конфігурації, вибір конкретних категорій і емуляцію різних пристроїв.

5. Lighthouse CI (для команд)

Lighthouse CI — це рішення для інтеграції аудиту в CI/CD пайплайн (GitHub Actions, GitLab CI, CircleCI). Дозволяє автоматично запускати перевірку при кожному pull request і встановити пороги: наприклад, «не зливати код, якщо Performance Score нижче 85». Це стандарт для команд, які серйозно ставляться до Core Web Vitals.

Як читати звіт Lighthouse

Після завершення аудиту Lighthouse показує 4 кола з оцінками. Під ними — деталізований список перевірок, згрупованих за категоріями. Кожна перевірка має 3 стани:

• 🟢 Passed audits — все гаразд.
• 🟠 Opportunities — є конкретний виграш у часі завантаження (наприклад, «Optimize images: +2.1 s»).
• 🔴 Diagnostics — потенційна проблема, яка впливає на Score.

Приклад реального аудиту Lighthouse

Ось як виглядає реальний звіт Lighthouse на прикладі сайту spilnoagency.com.ua/blog — і що означає кожна його частина:

Перший екран після завершення аудиту — 4 кола з оцінками: Performance 59 (жовтий — є що виправляти), Accessibility 92 (зелений — добре), Best Practices 58 (жовтий), SEO 100 (зелений — ідеально). Саме з цих 4 чисел починається будь-який технічний SEO-аудит сайту.

Розгорнутий блок Performance-метрик: FCP (First Contentful Paint) 2.5 с — перший елемент на екрані; LCP (Largest Contentful Paint) 2.5 с — головний контентний елемент; TBT (Total Blocking Time) 433 мс — час блокування головного потоку; CLS (Cumulative Layout Shift) 0.019 — стабільність макету; Speed Index 0.4 с — наскільки швидко заповнюється екран. Зеленим підсвічено метрики в нормі, жовтим — ті, що потребують уваги.

Секція Opportunities & Diagnostics — конкретні рекомендації Lighthouse з оцінкою потенційного виграшу. Тут видно: які зображення не оптимізовані, які скрипти блокують рендеринг, де є надлишковий CSS. Саме цей список є «дорожньою картою» для технічної оптимізації: починайте з пунктів, де вказані найбільші секунди економії.

Де починати виправлення? Першочергово займайтеся пунктами з найбільшим потенційним виграшем — Lighthouse сортує їх за впливом на продуктивність. Зосередьтеся на «Opportunities» з найбільшим числом секунд перед тим, як перейти до «Diagnostics».

Core Web Vitals у Lighthouse

Core Web Vitals — це три метрики, які Google визначив як ключові показники якості досвіду користувача. З 2021 року вони є офіційним сигналом ранжування (Google Page Experience).

• LCP (Largest Contentful Paint): ≤ 2.5 с — добре; 2.5–4 с — потребує покращення; > 4 с — погано. Зазвичай це головне зображення, відео або великий блок тексту.
• INP (Interaction to Next Paint): ≤ 200 мс — добре; 200–500 мс — потребує покращення; > 500 мс — погано. Вимірює затримку відповіді на кліки, натискання клавіш.
• CLS (Cumulative Layout Shift): ≤ 0.1 — добре; 0.1–0.25 — потребує покращення; > 0.25 — погано. Кнопки і текст «стрибають» під час завантаження.

Важливо: Lighthouse вимірює CWV у лабораторних умовах (синтетичний тест). Реальні дані CWV потрібно перевіряти в PageSpeed Insights або Google Search Console → Core Web Vitals.

Як покращити Performance Score

Нижче — найефективніші дії для підвищення оцінки Performance, відсортовані за впливом:

1. Оптимізуйте зображення. Конвертуйте в WebP/AVIF, стискайте без видимої втрати якості, вказуйте width і height, використовуйте loading="lazy" для зображень нижче fold. Lighthouse точно покаже, які зображення «важкі».
2. Усуньте блокуючий рендеринг (render-blocking resources). Скрипти вантажте з атрибутом defer або async, CSS — інлайн для критичних стилів.
3. Увімкніть кешування браузера. Налаштуйте заголовки Cache-Control для статичних ресурсів (JS, CSS, зображення) — мінімум 1 рік для версійних файлів.
4. Зменшіть час відповіді сервера (TTFB). Використовуйте CDN, серверне кешування (Redis, LiteSpeed Cache для WordPress), оптимізуйте запити до БД.
5. Зменшіть розмір JavaScript. Видаліть невикористовуваний код (tree shaking), розбийте bundle на частини (code splitting), перевірте важкі сторонні скрипти (analytics, chat, maps).
6. Виправте CLS. Вкажіть розміри для зображень і відео (щоб браузер резервував місце до завантаження), уникайте динамічної вставки контенту вище fold.

Як покращити SEO Score в Lighthouse

SEO Score 100 досягається відносно легко порівняно з Performance. Ось найчастіші причини низького балу та їх виправлення:

• Відсутній або короткий meta description → додайте унікальний опис 120–160 символів.
• Відсутній або некоректний тег title → кожна сторінка повинна мати унікальний title 50–60 символів.
• Сторінка заблокована robots.txt або noindex → перевірте директиви; для індексованих сторінок вони не потрібні.
• Малий розмір шрифту на мобільних (нижче 12px) → встановіть мінімальний розмір тексту 14–16px.
• Посилання без описового тексту (наприклад, «тут», «читати») → замінюйте на семантичний текст.
• Зображення без alt-атрибута → додайте описовий alt для всіх значущих зображень.
• Відсутній hreflang для мультимовних сайтів → важливо для сайтів з кількома мовними версіями.

Що нового у Lighthouse в 2026 році

Lighthouse активно розвивається. Ключові зміни останніх версій, актуальні в 2026 році:

• INP замінив FID (з Lighthouse 10, березень 2024). Interaction to Next Paint (INP) точніше відображає затримку взаємодії протягом усього часу відвідування сторінки, а не лише першого кліку.
• Нова метрика «Long Animation Frames» (LoAF) — Lighthouse починає враховувати тривалі анімаційні фрейми, які гальмують INP.
• Покращена оцінка AI-генерованого контенту — Best Practices тепер перевіряє, чи використовує сайт застарілі LLM-related API.
• Lighthouse CI v13 — значно спрощена конфігурація YAML для GitHub Actions.
• Інтеграція з Chrome Recorder — можна запускати Lighthouse для конкретних user flows (не лише для статичних сторінок).

Часті запитання про Google Lighthouse

Чи Lighthouse впливає на позиції в Google?

Безпосередньо — ні. Google не враховує «Lighthouse Score» як сигнал ранжування. Але Lighthouse вимірює Core Web Vitals (LCP, INP, CLS) та інші характеристики, які входять до Google Page Experience — реального алгоритму. Тому покращення Score у Lighthouse опосередковано допомагає SEO.

Чому Lighthouse показує різні результати щоразу?

Lighthouse запускає синтетичний тест на вашому комп’ютері, тому результати залежать від навантаження ЦП і мережі в момент аудиту, розширень браузера, завантажених файлів кешу. Для стабільних результатів: використовуйте режим інкогніто, запускайте 3–5 разів і беріть середнє значення, або використовуйте PageSpeed Insights (серверний запуск у стандартизованому середовищі).

Яка різниця між Mobile і Desktop у Lighthouse?

Lighthouse для Mobile емулює пристрій з повільнішим процесором (throttling ×4) і швидкістю мобільної мережі 4G, тому оцінки зазвичай нижчі. Desktop — без throttling. Google переважно використовує мобільний індексинг, тому для SEO важливіша оцінка Mobile. Однак у 2026 році Google починає більше диференціювати індексинг за типом пристрою, тому рекомендується перевіряти обидва варіанти.

Скільки часу займає виправлення Lighthouse Performance?

Залежить від стану сайту. Базові покращення (оптимізація зображень, увімкнення кешування, відкладення скриптів) займають 4–8 годин і можуть підняти Score з 50 до 80+. Глибока оптимізація (рефакторинг JavaScript, покращення TTFB, кардинальне виправлення CLS) — окремий проект тривалістю 1–4 тижні залежно від складності сайту.