Мы часто видим сайты, которые теряют 30–50% конверсии из-за медленной загрузки. Lighthouse — автоматизированный инструмент аудита от Google — показывает цифры, но не объясняет, что именно делать. Наш аудит не просто даёт score, а выявляет конкретные причины плохих метрик и предлагает план исправления. Опыт наших инженеров — более 50 успешных проектов по ускорению веб-приложений. Типичная картина: на десктопе всё летает, а на мобильных при 3G страница грузится 8 секунд, LCP зашкаливает за 4 секунды, а CLS постоянно красный. Причина — неоптимизированные изображения, тяжёлые JS-бандлы и отсутствие code splitting. Без детального аудита вы будете гадать, что именно тормозит.
Свяжитесь с нами для предварительной консультации — мы оценим сложность вашего сайта за один день.
Как правильно запускать Lighthouse?
Синтетические тесты Lighthouse имитируют Moto G4 на 4G с CPU throttling 4x. Это медианное мобильное устройство — на десктопе цифры будут лучше. Для стабильных результатов:
- запускайте в инкогнито без расширений (расширения влияют на метрики);
- делайте 3–5 прогонов и берите медиану (Lighthouse нестабилен ±10–20 баллов);
- сравнивайте с конкурентами на той же методологии.
# Lighthouse CLI — стабильнее DevTools: разброс на 15-20% меньше npm install -g lighthouse for i in 1 2 3; do lighthouse https://mysite.ru \ --output json \ --output-path "run-$i.json" \ --chrome-flags="--headless" \ --throttling-method=simulate \ --preset=mobile done Какие метрики влияют на скорость?
| Метрика | Вес в score | Что измеряет |
|---|---|---|
| LCP | 25% | Загрузка крупнейшего элемента |
| TBT (Total Blocking Time) | 30% | Время блокировки main thread |
| CLS | 25% | Сдвиги макета |
| FCP | 10% | Первая отрисовка контента |
| Speed Index | 10% | Скорость визуального заполнения |
TBT имеет наибольший вес и коррелирует с INP в реальных условиях. Сайты с большим бандлом JS без code splitting всегда имеют высокий TBT. Синтетика Lighthouse хороша, но реальные данные CrUX (Chrome User Experience Report) ещё ценнее — они показывают, что видят пользователи.
Сравнение Lighthouse и CrUX
| Характеристика | Lighthouse | CrUX |
|---|---|---|
| Тип | Синтетический | Реальные пользователи |
| Условия | Контролируемые (Moto G4) | Разные устройства/сети |
| Данные | Единичный тест | Агрегат за 28 дней |
| Применимость | Любой сайт | Требует трафика > 1000 уникальных |
Комбинация обоих источников даёт полную картину: Lighthouse показывает потенциальные проблемы, CrUX — реальный опыт.
Почему TBT — самая опасная метрика?
TBT напрямую связан с длинными задачами (>50ms) на основном потоке. Мы используем DevTools Performance и Treemap для анализа бандла. Типичные виновники: moment.js (67KB), lodash без tree-shaking, полный import import * as Icons from 'react-icons'. Анализ бандла с помощью webpack-bundle-analyzer показывает, что можно выкинуть. Оптимизация может сократить расходы на хостинг до 30% за счёт уменьшения нагрузки на сервер.
# webpack-bundle-analyzer npm run build -- --profile npx webpack-bundle-analyzer dist/stats.json Как улучшить LCP?
LCP-элемент — часто самое большое изображение или текст. Типичные проблемы:
<!-- Проблема: lazy-loading на LCP-элементе --> <img src="hero.jpg" loading="lazy" ...> <!-- Исправление: eager + fetchpriority --> <img src="hero.webp" loading="eager" fetchpriority="high" width="1200" height="500" alt="LCP hero image"> Если LCP — фоновое изображение CSS, Lighthouse его не видит как img. Решение: перейти на <img> или добавить <link rel="preload">. Согласно Lighthouse на GitHub, добавление fetchpriority="high" может сократить LCP на 15-20%.
Как бороться с CLS?
Причины layout shift:
- изображения без
width/height; - динамически вставляемые баннеры/рекламные блоки;
- шрифты с FOUT (Flash of Unstyled Text);
- skeleton screens с неправильными размерами.
Диагностика через DevTools → Rendering → Layout Shift Regions (выделяет зелёным). Типичные ошибки, вызывающие CLS:
- Отсутствие размеров у изображений (всегда указывайте
widthиheightили используйтеaspect-ratio). - Рекламные вставки без резервирования места — задавайте минимальную высоту контейнера.
- Динамический контент, загружающийся после отрисовки — используйте
min-heightили skeleton.
Автоматизация с PageSpeed Insights API
Для автоматического мониторинга после деплоя используйте API:
PSI_KEY="YOUR_GOOGLE_API_KEY" URL="https://mysite.ru/" curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&key=${PSI_KEY}&strategy=mobile" | \ jq '{ lcp: .lighthouseResult.audits["largest-contentful-paint"].displayValue, tbt: .lighthouseResult.audits["total-blocking-time"].displayValue, cls: .lighthouseResult.audits["cumulative-layout-shift"].displayValue, score: .lighthouseResult.categories.performance.score }' Что входит в работу
- Детальный отчёт с оценками по 4 категориям Lighthouse (Performance, Accessibility, Best Practices, SEO);
- Приоритизированный список задач с impact/effort (быстрые победы, средний уровень, серьёзные рефакторинги);
- Конфигурационные файлы (Lighthouse CLI, webpack) для самостоятельного мониторинга;
- Рекомендации по оптимизации Core Web Vitals с примерами кода;
- Консультация и ответы на вопросы в течение 2 недель после сдачи.
Ориентировочные сроки
Полный аудит (Lighthouse, DevTools трейс, анализ бандла, CrUX данные, приоритизированный список задач): 1–2 дня. Для крупных сайтов с несколькими типами страниц (главная, каталог, товар, checkout) — 2–3 дня. Стоимость рассчитывается индивидуально. Получите консультацию — свяжитесь с нами по контактам на сайте. Мы гарантируем, что после выполнения рекомендаций ваш сайт пройдёт аудит Lighthouse на 90+ баллов, а LCP, TBT и CLS войдут в зелёную зону. Закажите аудит, чтобы не гадать — мы покажем, что и как исправить.