Я Максим, веб-разработчик. Долгое время выбор стоял так: либо обычный многостраничный сайт с заметными перезагрузками между страницами, либо тяжёлый SPA на React ради плавных переходов — со своими проблемами для SEO и скорости первой загрузки. В 2026 году появилась третья дорога. Два браузерных механизма — View Transitions и Speculation Rules — дают плавные анимированные переходы и мгновенную загрузку следующей страницы без превращения сайта в SPA. Разбираю, что это и когда применять.
Проблема, которую это решает
У обычного сайта клик по ссылке даёт привычную картину: белый экран, перезагрузка. Резко, особенно на мобильном и медленном интернете. SPA убирает это — переходы плавные, — но цена высокая: сложность, проблемы с индексацией, тяжёлый JavaScript, медленная первая загрузка. Хотелось получить плавность SPA без его минусов. Это и дают новые API.
View Transitions: плавные переходы между страницами
View Transitions API анимирует переход между состояниями страницы и, что важнее, между разными страницами обычного многостраничного сайта (режим cross-document). Браузер сам делает плавный кроссфейд или морфинг элементов: например, превью товара плавно разворачивается в полную карточку. Раньше так умели только SPA. Теперь это работает на обычных ссылках, без фреймворка.
Speculation Rules: страница готова до клика
Speculation Rules API позволяет в JSON-правилах сказать браузеру, какие страницы предзагрузить (prefetch) или даже полностью отрендерить заранее (prerender). Пользователь навёл курсор или собирается кликнуть — нужная страница уже готова, и переход ощущается мгновенным. Это новее и автоматичнее ручных preload, prefetch и preconnect, про которые у меня есть отдельная статья: вы задаёте правила, а браузер сам решает, что и когда подгрузить.
Вместе это даёт ощущение приложения
Связка работает так: Speculation Rules заранее готовит следующую страницу, View Transitions плавно её показывает. Для пользователя сайт ведёт себя как приложение — без белых экранов и задержек, — но остаётся обычным многостраничным сайтом, который Яндекс нормально индексирует.
Поддержка браузеров
Честно про совместимость. Chromium-браузеры — Chrome, Edge и, что важно для России, Яндекс Браузер — поддерживают оба механизма. Safari и Firefox догоняют: часть возможностей уже есть, часть в процессе.
Ключевой момент — это прогрессивное улучшение. Там, где браузер не поддерживает анимацию или предзагрузку, переход просто остаётся обычным. Ничего не ломается: сайт работает у всех, а у большинства аудитории (Chromium и Яндекс Браузер) — с плавностью и мгновенной навигацией.
Когда применять, а когда нет
Стоит применять:
- каталоги и интернет-магазины: плавный переход «список → карточка товара» заметно улучшает ощущение;
- контентные сайты и блоги: мгновенные переходы между статьями удерживают читателя;
- лендинги и многостраничники, где важно ощущение качества.
Можно обойтись:
- сайт из пары страниц без активной навигации;
- уже хорошо сделанный SPA, менять архитектуру которого нет смысла.
Что это даёт бизнесу
- ощущение скорости и качества без переписывания сайта в SPA;
- лучше поведенческие факторы: меньше «дёрганья» при переходах, дольше сессии — а это сигналы для Яндекса;
- проще и дешевле в поддержке, чем полноценный SPA;
- сохраняется вся польза обычного сайта для SEO.
Чек-лист
- Найдите, где у сайта активная навигация между страницами (каталог, блог) — там эффект максимальный.
- Добавьте cross-document View Transitions для плавных переходов.
- Настройте Speculation Rules на предзагрузку вероятных следующих страниц.
- Убедитесь, что всё работает как прогрессивное улучшение — на неподдерживающих браузерах переход обычный.
- Проверьте, что prerender не нагружает сервер лишними запросами: предзагружайте разумно.
- Замерьте поведенческие метрики до и после.
Мой совет
Это редкий случай, когда улучшение почти бесплатное: вы добавляете плавность и мгновенную навигацию к обычному сайту, ничего не ломая и не переходя на тяжёлый SPA. Для каталогов и блогов эффект на ощущение скорости заметный. Хотите, чтобы ваш сайт на Next.js или обычный многостраничник ощущался как приложение, — пишите, внедрю.
