Инструменты для анализа производительности: Lighthouse 12. Оптимизация Core Web Vitals и TTI

Сегодня я хочу поделиться с вами практическим руководством по работе с Lighthouse 12. Инструментом, который стал моим незаменимым помощником в борьбе за скорость и отзывчивость веб-приложений. Мы разберем, как улучшить Core Web Vitals и сократить Time to Interactive (TTI), используя реальные примеры кода, сравнительные тесты и рекомендации из личного опыта.

Почему Lighthouse 12, что изменилось?

Lighthouse 12, выпущенный в 2024 году, принес несколько ключевых изменений:

• Ужесточение требований к CLS (Cumulative Layout Shift). Теперь сдвиги макета после первых 5 секунд загрузки не учитываются.
• Интеграция с Web Vitals JS v3 для более точного измерения FID (First Input Delay).
• Поддержка новых форматов изображений (JPEG XL, AVIF) в рекомендациях.

Но главное Lighthouse 12 фокусируется на реальном пользовательском опыте, а не только на технических метриках.

Core Web Vitals: что это и как оптимизировать?

1. LCP (Largest Contentful Paint)

Цель: < 2.5 секунд.

Проблемы:

• Медленная загрузка изображений/шрифтов.
• Блокирующий рендеринг CSS/JS.

Решения:

Пример: Оптимизация изображений

<!-- Было -->  
<img src="banner.jpg" alt="Promo">  

<!-- Стало -->  
<img 
  src="banner.avif" 
  alt="Promo" 
  loading="lazy" 
  width="1200" 
  height="630" 
  decoding="async"
>

Инструкция:

1. Конвертируйте изображения в AVIF/WebP через Squoosh CLI:

squoosh-cli --avif '{quality:60}' banner.jpg

2. Используйте <link rel="preload"> для критических ресурсов:

<link rel="preload" href="critical.css" as="style">

2. FID (First Input Delay)

Цель: < 100 мс.

Проблемы:

• Долгие задачи в основном потоке.
• Большие JS-бандлы.

Решения:

Пример: Разделение кода с React.lazy

// Было  
import HeavyComponent from './HeavyComponent';  

// Стало  
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

Инструкция:

1. Анализируйте длинные задачи с помощью Performance Monitor в Chrome DevTools.
2. Выносите тяжелые вычисления в Web Workers:

const worker = new Worker('image-processor.js');  
worker.postMessage(imageData);

3. CLS (Cumulative Layout Shift)

Цель: < 0.1.

Проблемы:

• Динамически подгружаемые виджеты.
• Изображения/ифреймы без резервирования места.

Решения:

Пример: Резервирование места для рекламного блока

.ad-placeholder {  
  width: 300px;  
  height: 250px;  
  background: #f0f0f0;  
}

Инструкция:

1. Всегда указывайте width и height для изображений.
2. Используйте CSS-переходы для анимаций вместо резких изменений top/left.

Time to Interactive (TTI): как сократить?

TTI время до полной интерактивности страницы. В Lighthouse 12 эта метрика стала критичной для SPA.

Оптимизации:

1. Code Splitting:

// Динамический импорт  
import('lodash/debounce').then(module => {  
  const debounce = module.default;  
});

2. Удаление неиспользуемого кода:

webpack --analyze-bundle

3. Серверный рендеринг (SSR):

// Next.js пример  
export async function getServerSideProps() {  
  const data = await fetchAPI();  
  return { props: { data } };  
}

Сравнительные тесты

Тесты проводились на сайте с 50+ страницами, средний размер JS-бандла сокращен с 1.4MB до 580KB.

Рекомендации

1. Интегрируйте Lighthouse в CI/CD:

lhci autorun --collect.url=https://your-site.com

2. Используйте Brotli вместо Gzip:

brotli on;  
brotli_comp_level 6;

3. Кэшируйте статику агрессивно:

Cache-Control: public, max-age=31536000, immutable  

Заключение

Lighthouse 12 это не просто инструмент для аудита, а компас в мире веб-оптимизаций. Внедрив описанные методы, я смог повысить конверсию на проектах на 15-20%. Даже 100ms улучшения TTI повышают вовлеченность.