28. Производительность

Astro строит сайты, которые работают молниеносно. Ключевой принцип фреймворка — Zero JavaScript by default: каждая страница отдаётся как чистый HTML без единого лишнего байта JavaScript.

Почему Astro такой быстрый?

В традиционном SPA-фреймворке браузер проходит длинный путь перед тем, как пользователь увидит контент:

1. Загрузка HTML (пустой shell)
2. Парсинг и выполнение JavaScript-бандла
3. Рендеринг компонентов
4. Гидратация DOM

Astro полностью меняет этот подход. Компоненты рендерятся на сервере в момент сборки или на лету — браузер получает готовый HTML. JavaScript добавляется только там, где требуется интерактивность, через директивы client:*.

Core Web Vitals

Google оценивает качество веб-страниц по метрикам Core Web Vitals:

Метрика	Полное название	Цель
LCP	Largest Contentful Paint	< 2.5 сек
FID	First Input Delay	< 100 мс
CLS	Cumulative Layout Shift	< 0.1
TTFB	Time to First Byte	< 800 мс

Сайты, построенные на Astro, регулярно показывают 100/100 баллов в Lighthouse.

Измерение с Lighthouse

# Анализ через CLI
npx lighthouse https://my-astro-site.com --output html

# Через Chrome DevTools: F12 → Lighthouse → Analyze page load

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

Встроенный компонент <Image /> из astro:assets автоматически обрабатывает изображения:

• Конвертация в WebP и AVIF для современных браузеров
• Автоматический lazy loading (loading="lazy")
• Предотвращение CLS через явные размеры
• srcset для адаптивных изображений

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image
  src={heroImage}
  alt="Описание изображения"
  width={1200}
  height={630}
  format="webp"
/>

Оптимизация шрифтов

Загружайте только нужные начертания и используйте font-display: swap:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
  rel="stylesheet"
/>

Или размещайте шрифты локально в папке public/fonts/ для максимальной скорости.

Prefetching

Astro умеет предзагружать страницы ещё до того, как пользователь кликнет по ссылке:

astro.config.mjs

export default defineConfig({
  prefetch: {
    prefetchAll: true,
    defaultStrategy: 'hover',
  }
});

<!-- Явный prefetch для конкретной ссылки -->
<a href="/about" data-astro-prefetch>О нас</a>

Архитектура островков (Islands Architecture)

Самое мощное преимущество Astro — частичная гидратация. Вместо гидратации всей страницы только интерактивные «острова» получают JavaScript:

<!-- Статический компонент — 0 байт JS -->
<Header />

<!-- Интерактивный остров — JS загружается, когда виден -->
<ShoppingCart client:visible />

<!-- Загружается только после полной загрузки страницы -->
<ChatWidget client:idle />

Анализ бандла

Проанализируйте финальный бандл с помощью:

# Встроенный анализатор Vite
npx astro build --verbose

# Или подключите rollup-plugin-visualizer
npm install -D rollup-plugin-visualizer