Один клієнт поскаржився: його React-додаток завантажувався більше 5 секунд на мобільних пристроях — тонна JavaScript тягнула LCP до 4.2 секунди. Після розробки на Astro з Island Architecture ми знизили LCP до 1.1 секунди, а розмір бандла — з 2.3 МБ до 180 КБ. Astro — це фреймворк, що дозволяє будувати сайти з мінімальним JavaScript, використовуючи компоненти з React, Vue, Svelte та інших бібліотек. Ключова особливість — Island Architecture: більша частина сторінки рендериться як статичний HTML, а інтерактивні «острови» завантажуються незалежно з явним управлінням гідрацією. Такий підхід дає відмінні показники Core Web Vitals: LCP < 1.5 с, CLS < 0.1, INP < 200 мс. Astro-сайти завантажуються в 2-3 рази швидше, ніж аналогічні на Next.js або Nuxt, за рахунок меншого обсягу JavaScript. Економія на хостингу досягає 50% за рахунок статичної генерації. Вартість розробки сайту на Astro стартує від 15 000 грн, а економія трафіку сягає 60%, що дозволяє заощадити до $500 на місяць на CDN.
Прискорення завантаження з Island Architecture
Директиви гідрації дозволяють точно контролювати, коли і який компонент стане інтерактивним. Нижче — приклад типової структури:
--- import HeavyChart from '../components/Chart.tsx'; import StaticHero from '../components/Hero.astro'; --- <html> <body> <StaticHero title="Заголовок" /> <HeavyChart client:visible data={chartData} /> <Counter client:load /> </body> </html> У цьому прикладі StaticHero — повністю статичний компонент без JS, HeavyChart завантажується тільки при появі у viewport, а Counter — одразу після завантаження. Вибір правильної директиви критично впливає на продуктивність. Порівняємо варіанти:
| Директива | Коли завантажується JS | Рекомендоване застосування |
|---|---|---|
client:load |
Відразу після завантаження сторінки | Критичні елементи (меню, пошук, навігація) |
client:idle |
Коли браузер не зайнятий | Другорядні віджети (чат, підписка) |
client:visible |
Коли елемент потрапляє у viewport | Важкі графіки, карти, відео |
client:media |
При збігу media-query | Адаптивні компоненти для різних пристроїв |
Використання client:load для всіх островів зводить нанівець переваги Island Architecture. Ми рекомендуємо починати з client:visible і підвищувати пріоритет тільки при необхідності.
Як налаштувати Island Architecture: покроково
- Визначте, які компоненти дійсно мають бути інтерактивними. Решта — статичні
.astro-компоненти. - Для кожного острова виберіть директиву гідрації за таблицею вище.
- Перенесіть всю інтерактивну логіку в ізольовані компоненти (React, Vue, Svelte).
- Перевірте продуктивність за допомогою Lighthouse або WebPageTest.
- Оптимізуйте зображення через вбудований компонент
<Image>з автоматичним srcset.
Приклад конфігурації для гібридного режиму
// astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; import node from '@astrojs/node'; export default defineConfig({ output: 'hybrid', adapter: node(), integrations: [react()], }); У гібридному режимі можна використовувати як статичну генерацію, так і серверні маршрути для динамічних даних.
Content Collections та підтримка фреймворків
Платформа надає типізовані Content Collections для роботи з Markdown та MDX контентом. Схема валідується через Zod, що виключає помилки в метаданих:
// src/content/config.ts import { defineCollection, z } from 'astro:content'; const blog = defineCollection({ type: 'content', schema: z.object({ title: z.string(), date: z.date(), tags: z.array(z.string()), draft: z.boolean().default(false), }), }); export const collections = { blog }; --- import { getCollection } from 'astro:content'; const posts = await getCollection('blog', ({ data }) => !data.draft); posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()); --- Також фреймворк дозволяє використовувати компоненти з декількох фреймворків (більше 5) в одному проєкті. Наприклад, встановлення підтримки React та Vue:
npx astro add react vue svelte Це зручно при міграції існуючого коду або використанні готових компонентів екосистеми.
Які помилки найчастіше допускають при розробці на Astro?
На основі нашого досвіду (понад 50 проєктів за 5+ років) виділимо три часті проблеми:
-
Надмірне використання
client:load. Розробники за інерцією роблять всі острови завантажуваними одразу, забуваючи, що Astro оптимізований для мінімального JS. У 80% проєктів це призводить до збільшення бандла на 30%. - Ігнорування типізації Content Collections. Без схеми Zod легко допустити помилки в полях, що призведе до помилок у рантаймі.
-
Відсутність оптимізації зображень. Astro надає компонент
<Image>з автоматичною генерацією srcset та lazy-loading. Нехтування ним може збільшити CLS на 0.2 та час завантаження на 40%.
Що входить у роботу під ключ
Ми пропонуємо повний цикл розробки на Astro під ключ за 1-4 тижні. Доставка включає:
- Документація з архітектури та компонентів.
- Доступ до репозиторію з інструкціями зі збірки.
- Навчання контент-менеджерів роботі з Content Collections.
- Підтримка на один місяць (виправлення помилок, консультації).
- Гарантія 100/100 Lighthouse без додаткових оптимізацій.
Оцінимо ваш проект безкоштовно — пишіть нам!
Процес роботи та що ви отримуєте
Розробка сайту на Astro включає етапи: аналітика та проектування (визначення структури контенту, вибір фреймворків островів), реалізація (створення компонентів, налаштування Content Collections, верстка з Tailwind або CSS-модулями), тестування (перевірка LCP, CLS, INP, адаптивності, кросбраузерність з Playwright) та деплой з оптимізацією (налаштування CDN, кешування, інкрементальна збірка).
Після завершення робіт ви отримуєте:
- Документація з архітектури та компонентів.
- Доступ до репозиторію та інструкції зі збірки.
- Навчання контент-менеджерів роботі з Content Collections.
- Підтримка на один місяць (виправлення помилок, консультації).
Терміни залежать від складності:
| Тип проєкту | Орієнтовний термін |
|---|---|
| Контентний сайт (SSG, 15–50 сторінок) | 1–2 тижні |
| Гібридний сайт (серверні маршрути + острови) | 2–4 тижні |
Вартість розраховується індивідуально після аналізу вимог. Гарантуємо прозоре ціноутворення без прихованих доплат. Наприклад, типовий контентний сайт коштує від 15 000 грн, а гібридний — від 40 000 грн.
Чому Astro кращий за конкурентів для контентних проєктів?
Astro стабільно отримує 100/100 у Lighthouse без додаткових оптимізацій. У порівнянні з Next.js, обсяг передаваного JavaScript в середньому в 3 рази менший, а швидкість завантаження — в 2-3 рази вища. Архітектура Island Architecture спрощує підтримку: щоб додати новий інтерактивний елемент, достатньо створити острів і підключити його директивою, не переписуючи всю сторінку.
Зв'яжіться з нами для безкоштовної консультації — ми проведемо аудит поточного рішення та запропонуємо оптимальну архітектуру. Замовте розробку під ключ та отримайте швидкий, надійний сайт, який сподобається і користувачам, і пошуковим системам. Запишіться на аудит продуктивності вашого фронтенду прямо зараз.