Когда я только начал оптимизировать сайты под Lighthouse, мне казалось, что эти заветные «100/100» — как идеальный жим лёжа: вроде достижимы, но на практике постоянно что-то тянет вниз. Я часто вижу, как разработчики пытаются «накачать» скорость одним-двумя приёмами и удивляются, что результат не растёт. Это как делать только бицепс, игнорируя спину — перекос обеспечен.
Сегодня расскажу, как я стабильно вывожу проекты в зелёную зону. Без шаманства, с конкретикой и рабочими техниками.
🔥 Почему сайт не даёт 100 баллов
Lighthouse оценивает не просто скорость загрузки, а всю «форму» проекта: производительность, доступность, SEO, практики. Если проседает один блок — улетают баллы. Чаще всего вижу такие проблемы:
- Раздутые JS-бандлы, которые блокируют рендер.
- Неправильно подключённые шрифты.
- Кривой lazy-load изображений.
- Отсутствие оптимизации на стороне сервера (особенно на дешёвых хостингах).
- Огромные CSS, которые грузятся «в лоб».
Но это всё чинится — шаг за шагом.
🚀 Шаг 1. Раздели JavaScript по мышечным группам
Не нужно грузить весь бандл сразу. Делай code splitting:
const Widget = () => import('./widget.js');
В React — React.lazy, в Vue — асинхронные компоненты. Важно: помни про prefetch для экранов, куда пользователь точно зайдёт.
⚙️ Шаг 2. Подружись с Critical CSS
Я всегда выношу критические стили в <style> прямо в <head>. Всё остальное — async или preload.
Инструменты:
- penthouse
- critters (для Next.js)
- webpack-плагины для critical css
Это мгновенно поднимает CLS и Speed Index.
🧩 Шаг 3. Правильно загружай шрифты
Частая ошибка: разработчик цепляет woff2, но забывает указать font-display: swap. Из-за этого текст остаётся невидимым (FOIT).
Как надо:
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}
А ещё лучше — используй system fonts + variable fonts.
📸 Шаг 4. Картинки: заставь их работать на тебя
Картинки — как ноги в бодибилдинге: их часто игнорируют, а зря. Это огромный процент веса страницы.
Что делаю я:
- Перевожу всё в WebP и AVIF.
- Настраиваю responsive images (srcset).
- Добавляю loading="lazy" (но осторожно — первый экран должен грузиться сразу).
- На сервере использую сжатие через imagick или CDN-оптимизацию (Cloudflare Images / Uploadcare).
🔧 Шаг 5. Ускоряем сервер — база любого «силового роста»
Если сайт крутится на слабом хостинге, получить 100 баллов трудно.
Что реально даёт буст:
- Перевод проекта на VPS и оптимизация Nginx.
- Включение Brotli (лучше Gzip).
- Кэширование статики на 30–90 дней.
- HTTP/3 + QUIC.
- Использование CDN.
У меня в «Digital Мастерской» есть правило: если проект серьёзный — только VPS. Хостинг оставляем для лендингов.
🔥 Шаг 6. Убери всё, что мешает рендеру
Lighthouse очень чувствителен к:
- синхронным скриптам,
- сторонним виджетам,
- трекингам,
- неиспользуемому CSS.
Используй async, defer, отключай ненужные плагины и виджеты. Иногда удаление одного скрипта даёт +15–20 баллов.
🚀 Мой личный лайфхак
Я всегда прогоняю сайт не только через Chrome Lighthouse, но и:
- PageSpeed API (даёт реальные метрики),
- WebPageTest (показывает Waterfall),
- GTmetrix (удобно смотреть блокировки рендера).
И только после этого делаю итоговый набор правок. Такой «многоповторный подход» даёт лучший результат.
🏁 Финал
Вывести Lighthouse на 100 — это не магия. Это дисциплина: как в тренажёрке, когда ты не пропускаешь базу и работаешь над слабым звеном. Шаг за шагом — и результат обязательно придёт.
Если статья была полезна — жми лайк, подписывайся и обязательно пиши в комментариях, какой показатель Lighthouse у твоего проекта сейчас.
💪 Прокачиваем не только мышцы, но и цифровые проекты.