Что реально влияет на Lighthouse score

Коротко. LCP, INP, CLS — по приоритету.

Суть

Lighthouse — про LCP, INP, CLS и вес JS. Для React-лендинга главное: маленький бандл, быстрый хостинг, оптимальные изображения.

Ниже — практика без лишней теории: что делаю в реальных проектах (лендинги, визитки, MVP).

LCP

Hero-картинка WebP, preload, критический CSS inline минимум.

INP

Меньше долгих задач в main thread — разбивать тяжёлую работу.

TBT

Отложить аналитику, не грузить чат-виджет сразу.

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

requestIdleCallback(() => import('./analytics'))

npm run build && npx lighthouse https://site.ru --only-categories=performance

Что реально влияет на Lighthouse score — не абстрактная «оптимизация ради галочки», а влияние на заявки: медленная страница режет конверсию сильнее, чем спорный оттенок кнопки. Разберём, что проверять в первую очередь.

Чеклист перед релизом

• LCP: тяжёлый hero сжат (WebP/AVIF), критичный шрифт не блокирует отрисовку.
• CLS: у картинок и embed заданы width/height или aspect-ratio.
• INP: нет тяжёлых синхронных обработчиков на каждый input.
• JS: code splitting, без лишних UI-kit на весь сайт.
• Третьи стороны: метрика и чаты — после load или по согласию.

Гонитесь за метрикой в контексте устройства ЦА, а не только за зелёным Lighthouse на MacBook.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Core Web Vitals — метрики скорости
• Vite вместо CRA — стек сборки
• Услуги — разработка под задачу

Короткие ответы на частые вопросы

Это подойдёт моему бизнесу? Если вам нужен понятный сайт с заявкой или звонком — да; если десятки кабинетов и сложная логика — обсудим отдельный объём.

Что подготовить до старта? Тексты или тезисы, логотип, примеры конкурентов, доступы к домену и хостингу (если уже есть).

Как оценить результат? Скорость на мобилке, ясный CTA, отсутствие «битых» блоков и совпадение страницы с рекламой/поисковым запросом.

Итог по теме «Что реально влияет на Lighthouse score»

Сфокусируйтесь на сценарии пользователя, а не на количестве фич. Остальное — вопрос исполнения и дисциплины в проекте. Готов помочь с оценкой — контакты или Telegram из кнопки ниже.

Что измерить после правок

После изменений по теме «Что реально влияет на Lighthouse score» не верьте ощущениям — откройте Lighthouse в Chrome (мобильный профиль) и посмотрите LCP, INP и CLS. Сравните «до/после» в одной сети: иначе Wi‑Fi в офисе нарисует ложную картину.

На реальных проектах чаще всего выигрыш даёт связка: меньше JS на первом экране, размеры у картинок, отложенная метрика, нормальный хостинг в регионе аудитории. Один только плагин кэша редко спасает тяжёлый фронт.

• Запишите вес главной страницы (Document + JS) в Network.
• Проверьте главную на 4G throttling в DevTools.
• Если есть формы — кликните и оцените отклик (INP).

Подробнее про пороги метрик — в Core Web Vitals.

Цель 95+ в Lighthouse достижима на лендинге без тяжёлого JS; на SPA смотрите ещё полевые данные в Search Console.