PE Felsefesi: HTML ile Başlayın

Aşamalı İyileştirme (PE), yalnızca HTML ile kullanılabilir bir deneyim oluşturup ardından sunum için CSS, etkileşim için JavaScript katmanlarını ekleme uygulamasıdır. Her katman bir öncekini geliştirir; sayfanın çalışması için hiçbiri zorunlu değildir.

HTML en dayanıklı katmandır. Hatalı olduğunda kısmen ayrıştırılır, anlamadığı etiketleri yok sayar ve betikler ya da stil sayfaları olmadan çalışır. Buna karşılık, eksik bir CSS dosyası görünümü bozar; bozuk bir JavaScript paketi ise sayfayı kullanılamaz hâle getirebilir.

İçerik (HTML), Sunum (CSS), Davranış (JS). Gönder düğmesi gerçek bir <button type="submit"> öğesidir — JS çalışmasa bile form gönderilir. CSS onu güzelleştirir; JS, AJAX için gönderme işlemini engelleyebilir, ancak temel HTML eylemi güvence altına alır.

Ağ bağlantıları kopar. Betikler yüklenemez. Kullanıcılar JS'yi devre dışı bırakır. Yavaş bağlantılarda paketler ulaşmadan zaman aşımına uğrar. Bir PE sayfası bunların her birinde düzgünce kademeli olarak işlev kaybeder: kullanıcı yalnızca HTML kullanarak okumaya, gezinmeye ve gönderim yapmaya devam edebilir.

Betikler yüklenmeden önce kullanılabilir HTML oluşturan sayfalarda İlk İçerik Boyaması daha hızlı, Etkileşime Geçme Süresi daha kısa ve Temel Web Hayati Metrikleri puanları daha iyi olur. Tarayıcı, JS'nin başlatılmasını beklemeden anlamlı içeriği görüntüler.

Gerçek HTML öğeleri, erişilebilirliği yerleşik olarak sunar. <button> klavyeyle etkinleştirilebilir; <input type="email"> doğru sanal klavyeyi açar; <a> ekran okuyucuları tarafından bağlantı olarak duyurulur. PE, ek çaba gerektirmeden erişilebilir varsayılanlar üretir.

Arama motoru tarayıcıları, JavaScript çalıştırmadan ayrıştırabilecekleri HTML'yi tercih eder. PE ile oluşturulan sayfalar, JS çalıştırılmadan tamamen dizine eklenir; yalnızca SPA olan sayfalar tarayıcının betik desteğine bağlıdır ve çoğu zaman içerik kaçırır.

Tek Sayfalı Uygulamalar her şeyi istemci tarafında oluşturur ve JS başarısız olduğunda tamamen bozulur. PE bunun tersidir: sunucu eksiksiz HTML gönderir ve JS, temel işlevin denetimini hiçbir zaman ele geçirmeden önceden getirme, iyimser güncellemeler veya yerinde düzenleme gibi iyileştirmeler ekler.

Remix, Next.js Server Components, SvelteKit ve Astro, sunucu tarafından oluşturulan HTML'yi ve aşamalı JS iyileştirmesini destekler. Böyle bir çerçeve seçmek, PE'yi en az direnç gerektiren yol hâline getirir.

Son derece etkileşimli kullanıcı arayüzleri (ortak çalışmaya dayalı düzenleyiciler, çizim uygulamaları, gerçek zamanlı oyunlar) JS olmadan anlamlı biçimde var olamaz. Bu tür uygulamalarda PE'nin "JS'siz geri dönüşü", statik ve salt okunur bir kip olabilir — hiç yoktan iyidir, ancak kaçınılmaz olarak daha sınırlıdır. Ödünleşim konusunda dürüst olun.

"Önce çalışır hâle getirin, sonra güzelleştirin, ardından hızlandırın." Önce HTML formunu oluşturun; curl ile çalıştığını doğrulayın. Düzen için CSS ekleyin. Yerinde doğrulama, iyimser güncellemeler veya AJAX gönderimi için JS ekleyin. Her katman isteğe bağlıdır; sonuç, herkes için harika bir deneyim oluşturmak üzere bu katmanları birleştirir.

Aşamalı İyileştirmenin temel vaadi nedir?

Aşamalı İyileştirme, CSS veya JS olmadan çalışan anlamsal HTML ile başlar; ardından sunum için CSS, etkileşim için JS katmanlarını ekler. Her katman isteğe bağlıdır; sayfa arızalar karşısında düzgünce kademeli olarak işlev kaybeder. PE; performans, erişilebilirlik, arama motoru optimizasyonu ve dayanıklılık açısından kazanım sağlar — ancak son derece etkileşimli uygulamalar için başlangıçta daha fazla tasarım çalışması gerektirir.