Философия PE: начинайте с HTML

Прогрессивное улучшение (PE) — это практика создания пригодного к использованию интерфейса только с HTML, а затем добавления CSS для оформления и JavaScript для интерактивности. Каждый слой улучшает предыдущий; для работы страницы не требуется ни один из них.

HTML — самый устойчивый слой. Он частично разбирается даже при ошибках, игнорирует непонятные ему теги и работает без скриптов и таблиц стилей. Напротив, отсутствие файла CSS ухудшает внешний вид, а повреждённый пакет JS может сделать страницу непригодной к использованию.

Содержимое (HTML), оформление (CSS), поведение (JS). Кнопка отправки — это настоящий <button type="submit"> — форма отправляется, даже если JS не работает. CSS делает её красивой; JS может перехватить отправку для AJAX, но базовая HTML-разметка гарантирует выполнение действия.

Сети отключаются. Скрипты не загружаются. Пользователи отключают JS. При медленном соединении истекает время ожидания до загрузки пакетов. Страница, созданная по принципам PE, плавно адаптируется к каждой из этих ситуаций: пользователь по-прежнему может читать, перемещаться по странице и отправлять формы, используя только HTML.

Страницы, отображающие пригодный к использованию HTML до загрузки скриптов, быстрее достигают первой отрисовки содержимого, имеют меньшее время до интерактивности и получают более высокие оценки по основным веб-показателям. Браузер отображает содержательный контент, не дожидаясь запуска JS.

Настоящие элементы HTML уже имеют встроенную поддержку доступности. <button> можно активировать с клавиатуры; <input type="email"> получает подходящую виртуальную клавиатуру; <a> объявляется программами чтения с экрана как ссылка. PE бесплатно обеспечивает доступные настройки по умолчанию.

Поисковые роботы предпочитают HTML, который можно разобрать без выполнения JavaScript. Страницы, созданные по принципам PE, полностью индексируются без выполнения JS; страницы, построенные только как SPA, зависят от поддержки скриптов поисковым роботом и часто теряют часть содержимого.

Одностраничные приложения отображают всё на стороне клиента и полностью перестают работать при сбое JS. PE устроено противоположным образом: сервер выдаёт полный HTML, а JS добавляет улучшения, такие как предварительная загрузка, оптимистичные обновления или редактирование без перехода, не подменяя базовую функциональность.

Remix, серверные компоненты Next.js, SvelteKit и Astro ориентированы на HTML, отображаемый на сервере, с постепенным улучшением с помощью JavaScript. Выбор такого фреймворка делает PE самым простым путём.

Полностью интерактивные интерфейсы (совместные редакторы, приложения для рисования, игры в реальном времени) не могут полноценно существовать без JS. «Резервный вариант без JS» для таких приложений может быть статичным режимом только для чтения — это лучше, чем ничего, но возможности неизбежно будут ограничены. Честно оценивайте компромисс.

«Сначала добейтесь работоспособности, затем сделайте интерфейс красивым, а потом быстрым». Сначала создайте HTML-форму и проверьте её работу с помощью curl. Добавьте CSS для разметки. Добавьте JS для проверки на месте, оптимистичных обновлений или отправки через AJAX. Каждый слой необязателен; вместе они создают отличные условия для всех пользователей.

Каково основное обещание прогрессивного улучшения?

Прогрессивное улучшение начинается с семантического HTML, работающего без CSS и JS, а затем добавляет CSS для оформления и JS для интерактивности. Каждый слой необязателен; при сбоях страница плавно упрощается. PE обеспечивает преимущества в производительности, доступности, SEO и устойчивости, но требует больше первоначальной работы по проектированию высокоинтерактивных приложений.