Прогрессивное улучшение в 2026 — не мёртвая ли идея

Прогрессивное улучшение (progressive enhancement, PE) сформулировал Стив Чемпион в 2003. Суть в трёх слоях: HTML — рабочая страница без всего, CSS — визуальное оформление сверху, JS — интерактивность вишенкой. Любой слой можно "снять", контент всё равно доступен. Альтернатива (graceful degradation) — наоборот, делать всё на JS и аккуратно проседать, если что-то не работает.

20 лет назад это было критично — IE 6, медленный JS, дорогой мобильный трафик. В 2026 у всех HTTP/2, JIT-компилятор, Wi-Fi. Логично спросить — а сейчас-то зачем?

Кто отключает JS

По данным GDS (правительство Великобритании, замеры 2022-2024), 1.1% запросов на gov.uk не выполняли JS. Из них меньше четверти — осознанный отказ. Остальные:

• JS не успел загрузиться — таймаут, медленный 3G, потеря пакетов;
• JS упал из-за ошибки в коде или сторонней библиотеке;
• браузер блокировал скрипт (Firefox в строгом режиме, корпоративный прокси);
• расширения-блокировщики снесли скрипт целиком;
• скрейперы и боты (поисковики тоже, хотя Googlebot и Яндекс рендерят JS).

Если у вас 100 000 посетителей в месяц — это 1 000-1 100 человек без JS. Если у них не работает форма заявки, это потерянные деньги. На gov.uk считают это критичным; в коммерции цифры аналогичные.

Что из принципов PE до сих пор работает

1. Семантический HTML как основа. Это не про "работает без JS", это про SEO, доступность, читалки экрана и AI-агентов (Bing Copilot, Perplexity, Яндекс GPT тащат контент именно из семантики). Кнопка должна быть <button>, ссылка — <a href>, форма — <form action method> с реальным action. Div с обработчиком onclick — анти-паттерн.

2. Формы с реальным action. SPA-формы с onSubmit={fetch(...)} ломаются при любой ошибке JS. Если форма имеет action="/contact" и method="post", она работает и без JS — серверный обработчик принимает данные, делает редирект. JS поверх — это улучшение UX (без перезагрузки), а не обязательное условие работы.

3. Ссылки, ведущие куда-то. SPA-маршруты должны быть настоящими URL с серверным fallback. Не <a onClick={navigate('/x')}>, а <a href="/x" onClick={...}>. Открыть в новой вкладке, скопировать, поделиться — всё работает.

4. Серверный рендер. Next.js, Nuxt, Astro, Remix — это и есть современная реализация PE. Сервер отдаёт HTML, клиент гидрирует. Если JS не загрузится — страница всё равно показывает контент. Это, наверное, главный вклад PE-идеи в современный фронт.

5. CSS как самостоятельный слой. Многое из того, для чего раньше нужен был JS, сейчас делается на CSS: :has(), :checked, :focus-within, scroll-driven animations, popover, View Transitions. Аккордеоны, табы, диалоги, тосты — всё можно без единой строчки JS. И это надёжнее.

6. Картинки и loading="lazy". Когда-то нужны были lazy-load библиотеки на JS. Сейчас браузерный loading="lazy" работает везде, и без JS картинки всё равно подгружаются.

Что из PE можно отпустить

Полная функциональность без JS как самоцель. Реалистично — поддерживать без JS критичные пути: контент, формы заявок, поиск, авторизация. Превращать SPA-конструктор сайтов в HTML-only приложение — бессмысленно, аудитория для этого не существует.

Тестирование под Lynx и текстовые браузеры. Сегодня их реально использует доли процента доли процента. Тестируем доступность через NVDA/VoiceOver на нормальных страницах — этого достаточно.

Параноидальные fallback на <noscript>. Тег жив, но содержательно нужен редко. Обычно достаточно того, что серверный HTML уже самодостаточный.

Жёсткое разделение слоёв. CSS уже частично делает работу JS, JS уже частично делает работу CSS. Это нормально. Главное — чтобы базовый сценарий работал без сторонних зависимостей.

Практический чек-лист для 2026

• Контент страницы есть в исходном HTML (View Source показывает заголовок, текст, мета). Без этого — нет SEO, нет соцпревью, AI-агенты не индексируют.
• Главные ссылки — настоящие URL с серверным маршрутом.
• Формы заявок имеют рабочий action на сервере (даже если JS перехватывает submit).
• Кнопки и ссылки имеют семантические теги. Никаких <div onClick>.
• Картинки имеют alt, width, height, loading="lazy".
• Видео имеют controls и тег track для субтитров.
• JS-ошибка в третьей библиотеке не должна обнулять всю страницу. Sentry/Bugsnag — must-have.
• Время до первой отрисовки контента (FCP) меньше 1.8 с на 4G — даже если JS ещё не отработал.

Почему это коммерчески важно

Внутренний кейс — лендинг с формой заявки. Раньше форма открывалась модалкой на React, при ошибке JS пользователь видел пустоту. Перенесли в обычный <form action="/lead" method="post"> с прогрессивным улучшением: JS перехватывает submit и шлёт через fetch, но если JS отвалился — браузер отправляет нативно, сервер принимает, делает редирект на /thank-you. По логам — 0.8% заявок шли через нативный submit. На тысяче заявок в месяц это 8 клиентов, которых раньше теряли молча. Цена доработки — час разработчика.

Идея жива, форма поменялась

В 2026 PE — это не "строй сайт под Netscape". Это проектирование с резервным сценарием: что увидит пользователь, если что-то пойдёт не так. SSR, реальные формы, семантика, CSS-фичи вместо JS — это и есть прогрессивное улучшение в современной упаковке. Подключите нас, если хотите аудит лендинга на устойчивость: проверим, что критичные сценарии работают при упавшем JS, медленном 3G и в режиме reader-mode браузера.