Lighthouse и PageSpeed Insights в SEO

Скорость сайта влияет на позиции в поиске. Чтобы измерить скорость, используют два инструмента: Lighthouse и PageSpeed Insights (PSI).

Lighthouse - это вкладка в DevTools браузера. Документация: developer.chrome.com/docs/lighthouse. PSI - онлайн-сервис от Google: pagespeed.web.dev. Оба показывают похожие метрики, но PSI использует реальные данные пользователей, а Lighthouse - лабораторные замеры.

Как запустить

В Chrome открой DevTools, найди вкладку Lighthouse и нажми Analyze page load. Через несколько секунд получишь отчет.

В PSI вставь URL страницы на pagespeed.web.dev и нажми Analyze.

Какие метрики показывают

Главные метрики - это Core Web Vitals. Их три:

LCP (Largest Contentful Paint) - время загрузки самого крупного элемента на экране. Хорошо, если меньше 2.5 секунд.

INP (Interaction to Next Paint) - скорость отклика на клик или тап. Хорошо, если меньше 200 миллисекунд.

CLS (Cumulative Layout Shift) - сдвиг верстки. Хорошо, если меньше 0.1.

Есть и другие метрики: FCP, TBT, Speed Index. Но для SEO важнее всего Core Web Vitals.

Что означают оценки

Lighthouse ставит оценку от 0 до 100 по четырем категориям: Performance, Accessibility, Best Practices, SEO.

Оценка Performance ниже 50 - плохо. От 50 до 89 - средне. От 90 и выше - хорошо.

Но не гонись за сотней. Даже 90 - отличный результат. Важнее не цифра, а конкретные проблемы в отчете.

Как читать рекомендации

После отчета прокрути вниз до раздела Opportunities. Там список того, что можно улучшить. Каждый пункт показывает, сколько секунд он сэкономит.

Например, пункт "Eliminate render-blocking resources" означает, что CSS или JS блокируют отрисовку страницы. Нужно вынести их в отложенную загрузку.

Пункт "Properly size images" говорит, что картинки больше, чем нужно. Сожми их или используй srcset.

Пункт "Reduce unused JavaScript" означает, что подключен код, который не используется на странице. Убери лишнее.

Что чинить первым

Сначала чини то, что влияет на LCP, INP и CLS. Это прямо влияет на SEO.

Потом смотри на Opportunities с наибольшей экономией времени. Начни с картинок и шрифтов.

В последнюю очередь чини мелочи вроде неиспользуемого CSS. Они дают мало, но иногда помогают.

Практические задачи