Filozofia PE — zacznij od HTML

Progressive Enhancement (PE) to praktyka budowania użytecznego interfejsu za pomocą samego HTML, a następnie dodawania CSS odpowiedzialnego za wygląd i JavaScriptu zapewniającego interaktywność. Każda warstwa ulepsza poprzednią, ale żadna nie jest wymagana, aby strona działała.

HTML jest najbardziej odporną warstwą. Nawet w przypadku niepoprawnej składni jest częściowo interpretowany, nieznane tagi są ignorowane, a dokument działa bez skryptów i arkuszy stylów. Dla porównania brak pliku CSS pogarsza wygląd, a uszkodzony pakiet JavaScriptu może sprawić, że strona stanie się bezużyteczna.

Treść (HTML), prezentacja (CSS), zachowanie (JS). Przycisk przesyłania formularza to prawdziwy element <button type="submit"> — formularz zostanie wysłany nawet wtedy, gdy JS zawiedzie. CSS nadaje mu wygląd, a JS może przechwycić wysłanie formularza na potrzeby AJAX, ale podstawowy HTML gwarantuje wykonanie tej czynności.

Połączenie sieciowe może zostać przerwane. Skrypty mogą się nie załadować. Użytkownicy mogą wyłączyć JS. Przy wolnych połączeniach może upłynąć limit czasu, zanim pakiety dotrą do przeglądarki. Strona oparta na PE degraduje się łagodnie w każdej z tych sytuacji: użytkownik nadal może czytać, nawigować i wysyłać formularze, korzystając wyłącznie z HTML.

Strony, które wyświetlają użyteczny HTML przed załadowaniem skryptów, mają krótszy First Contentful Paint, krótszy Time to Interactive i lepsze wyniki Core Web Vitals. Przeglądarka wyświetla istotną treść bez oczekiwania na uruchomienie JS.

Prawdziwe elementy HTML mają wbudowane funkcje ułatwień dostępu. <button> można aktywować za pomocą klawiatury, <input type="email"> wywołuje odpowiednią klawiaturę wirtualną, a <a> jest ogłaszany przez czytniki ekranu jako odnośnik. PE zapewnia dostępne ustawienia domyślne bez dodatkowego wysiłku.

Roboty wyszukiwarek preferują HTML, który mogą przeanalizować bez wykonywania JavaScriptu. Strony zbudowane zgodnie z PE są w całości indeksowane bez wykonywania JS, natomiast strony działające wyłącznie jako SPA zależą od obsługi skryptów przez robota i często nie mają zindeksowanej całej treści.

Aplikacje SPA renderują całość po stronie klienta i całkowicie przestają działać, gdy JS zawiedzie. PE działa odwrotnie: serwer generuje kompletny HTML, a JS dodaje ulepszenia, takie jak wstępne pobieranie danych, optymistyczne aktualizacje czy edycja w miejscu, nie przejmując nigdy podstawowej funkcjonalności.

Remix, komponenty serwerowe Next.js, SvelteKit i Astro wszystkie preferują HTML renderowany po stronie serwera z progresywnym ulepszaniem za pomocą JavaScriptu. Wybór takiego frameworka sprawia, że PE staje się najprostszą drogą.

Wysoce interaktywne interfejsy, takie jak edytory współpracy, aplikacje do rysowania czy gry działające w czasie rzeczywistym, nie mogą sensownie istnieć bez JS. W takich aplikacjach „zastępczy wariant bez JS” może oznaczać statyczny tryb tylko do odczytu — lepszy niż nic, ale siłą rzeczy ograniczony. Należy uczciwie uwzględnić ten kompromis.

„Najpierw spraw, żeby działało, potem zadbaj o wygląd, a na końcu przyspiesz”. Najpierw należy zbudować formularz HTML i sprawdzić jego działanie za pomocą curl. Następnie należy dodać CSS odpowiadający za układ, a potem JS do walidacji w miejscu, optymistycznych aktualizacji lub wysyłania AJAX. Każda warstwa jest opcjonalna, a ich połączenie zapewnia wszystkim doskonałe doświadczenie.

Jaka jest główna obietnica Progressive Enhancement?

Progressive Enhancement zaczyna się od semantycznego HTML, który działa bez CSS i JS, a następnie dodaje CSS odpowiedzialny za prezentację oraz JS zapewniający interaktywność. Każda warstwa jest opcjonalna, a strona łagodnie degraduje się w przypadku awarii. PE zapewnia korzyści w zakresie wydajności, dostępności, SEO i odporności, ale wymaga większego nakładu pracy projektowej na początku w przypadku wysoce interaktywnych aplikacji.