Руководство по повышению качества сайта на Astro — достижение оценки PageSpeed Mobile 99

Введение

Официальный сайт Acecore, перезапущенный в марте 2026 года, был создан на Astro 6 + UnoCSS + Cloudflare Pages. Однако только что запущенный сайт находился в лучшем случае на уровне «работает» — с пространством для улучшений по производительности, SEO, доступности и UX.

Эта статья подводит итог пути через более чем 150 улучшений для достижения PageSpeed Insights Mobile 99 и идеальных 100 баллов по всем метрикам на десктопе.

Задача PageSpeed Mobile 99

Первое, что нужно сообщить: достижение высокой оценки PageSpeed Insights на мобильных значительно сложнее, чем можно ожидать.

Мобильная симуляция Lighthouse

PageSpeed Insights запускает Lighthouse под капотом, применяя следующие ограничения для мобильных тестов:

Это означает, что даже страница, загружающаяся за 1 секунду на оптоволокне, будет загружаться 5–6 секунд при симуляции Lighthouse. Загрузка 200 КиБ CSS вызывает примерно 1 секунду блокировки на медленном 4G.

Нелинейная шкала оценок

Оценки PageSpeed не линейны:

• 50 → 90: Достижимо базовыми оптимизациями (сжатие изображений, удаление ненужных скриптов)
• 90 → 95: Требует стратегического подхода к доставке CSS, шрифтов и изображений
• 95 → 99: Тюнинг на уровне миллисекунд. Решения между инлайнингом CSS и внешними файлами становятся критичными
• 99 → 100: Зависит от времени ответа внешних CDN и собственной погрешности измерений Lighthouse. Крайне сложно достигать стабильно для сайтов с AdSense или GA4

Разброс оценок

Даже для одного и того же сайта оценки могут колебаться на 2–5 баллов между измерениями. Причины:

• Время ответа CDN изображений (например, wsrv.nl)
• Статус кэша пограничных серверов Cloudflare Pages
• Собственная погрешность измерений Lighthouse

По этой причине целью должна быть «стабильно высокая оценка при повторных измерениях», а не «один раз набрать 100».

Итоговые оценки

Несмотря на эти трудности, мы смогли стабильно достигать следующих оценок:

Четыре столпа улучшений

Улучшения были организованы в четыре основные категории, каждая из которых подробно описана в отдельных статьях.

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

Оптимизация производительности внесла наибольший вклад в достижение Mobile 99. Мы систематически устраняли узкие места: стратегия доставки CSS (инлайн против внешних файлов), самостоятельный хостинг шрифтов, оптимизация адаптивных изображений и отложенная загрузка AdSense/GA4.

Три наиболее значимых изменения:

• Вынос CSS во внешний файл: Переход от инлайнинга 190 КиБ CSS к внешнему файлу сократил размер передачи HTML до 91%
• Исправление несоответствия имени шрифта: @fontsource-variable/noto-sans-jp регистрирует имя шрифта Noto Sans JP Variable, но CSS ссылался на Noto Sans JP — это несоответствие было обнаружено и исправлено
• Адаптивные изображения: Установлены srcset + sizes для всех изображений для подачи изображений соответствующего размера на мобильных

2. SEO

Для поддержки расширенных результатов Google мы реализовали 7 типов структурированных данных JSON-LD. В сочетании с OGP-мета-тегами, каноническими URL, оптимизацией sitemap и улучшениями RSS-ленты мы создали основу для точной передачи структуры сайта поисковым системам.

3. Доступность

Оценка PageSpeed Accessibility 100 была достигнута прохождением автоматизированных тестов axe DevTools и Lighthouse. Это включало добавление aria-hidden к декоративным иконкам (более 30 случаев), уведомления screen reader для внешних ссылок, исправления контрастности (text-slate-400 → text-slate-500) и глобальное применение стилей focus-visible — стабильная, постепенная работа.

4. UX и качество кода

Мы устранили проблемы поломки скриптов, вызванные View Transitions (ClientRouter), во всех компонентах и внедрили полнотекстовый поиск с Pagefind. На стороне кода была улучшена типобезопасность TypeScript и централизованы константы (URL соцсетей, ID рекламы, GA4 ID объединены в константы SITE), что значительно повысило поддерживаемость.

Технологический стек

Заключение

Достижение PageSpeed Insights Mobile 99 сводится к строгому следованию принципу «не отправляй то, что не нужно». Стратегия доставки CSS, самостоятельный хостинг шрифтов, оптимизация изображений, отложенная загрузка внешних скриптов — каждое из этих мер само по себе простое, но в совокупности они дают значительный эффект.

Параллельное улучшение SEO, доступности и UX позволяет достичь высоких оценок во всех четырёх категориях. Вместо того чтобы зацикливаться на 100, стремление к стабильным 95+ — более реалистичная цель.

Подробное описание каждой темы смотрите по ссылкам выше. Информацию о рабочем процессе улучшений и отражении изменений в коде также смотрите в статье Рабочий процесс разработки с GitHub Copilot.