Filosofi PE Mulai dengan HTML

Peningkatan Progresif (PE) adalah praktik membangun pengalaman yang dapat digunakan hanya dengan HTML, lalu menambahkan CSS untuk tampilan dan JavaScript untuk interaktivitas. Setiap lapisan menyempurnakan lapisan sebelumnya; tidak ada yang diperlukan agar halaman dapat berfungsi.

HTML adalah lapisan yang paling tangguh. HTML dapat mengurai sebagian dokumen yang cacat, mengabaikan tag yang tidak dipahaminya, dan berfungsi tanpa skrip atau lembar gaya. Sebaliknya, berkas CSS yang hilang menurunkan kualitas tampilan, sedangkan bundel JS yang rusak dapat membuat halaman tidak dapat digunakan.

Konten (HTML), Tampilan (CSS), Perilaku (JS). Tombol kirim adalah <button type="submit"> yang sebenarnya — formulir tetap dikirim meskipun JS gagal. CSS membuatnya menarik; JS dapat mencegat pengiriman untuk AJAX, tetapi HTML yang mendasarinya menjamin tindakan tersebut.

Jaringan terputus. Skrip gagal dimuat. Pengguna menonaktifkan JS. Koneksi lambat mengalami batas waktu sebelum bundel tiba. Halaman PE menurun secara bertahap dalam setiap kondisi ini: pengguna tetap dapat membaca, bernavigasi, dan mengirimkan formulir hanya dengan HTML.

Halaman yang menampilkan HTML yang dapat digunakan sebelum skrip dimuat memiliki First Contentful Paint yang lebih cepat, Time to Interactive yang lebih singkat, dan skor Core Web Vitals yang lebih baik. Peramban menampilkan konten bermakna tanpa menunggu JS melakukan bootstrap.

Elemen HTML asli sudah dilengkapi aksesibilitas. <button> dapat diaktifkan dengan papan ketik; <input type="email"> mendapatkan papan ketik virtual yang tepat; <a> diumumkan sebagai tautan oleh pembaca layar. PE menghasilkan pengaturan aksesibel secara otomatis.

Perayap mesin pencari lebih menyukai HTML yang dapat diurai tanpa menjalankan JavaScript. Halaman yang dibangun dengan PE diindeks sepenuhnya tanpa eksekusi JS; halaman yang hanya berupa SPA bergantung pada dukungan skrip perayap dan sering kali kehilangan konten.

Aplikasi Satu Halaman merender semuanya di sisi klien dan rusak sepenuhnya ketika JS gagal. PE adalah kebalikannya: server mengirimkan HTML lengkap, lalu JS menambahkan penyempurnaan seperti pengambilan awal, pembaruan optimistis, atau penyuntingan langsung tanpa pernah mengambil alih fungsi dasar.

Remix, Komponen Server Next.js, SvelteKit, dan Astro semuanya cenderung menggunakan HTML yang dirender di server dengan peningkatan JS progresif. Memilih kerangka kerja seperti ini menjadikan PE sebagai pilihan yang paling mudah.

Antarmuka yang sangat interaktif (penyunting kolaboratif, aplikasi menggambar, permainan waktu nyata) tidak dapat benar-benar ada tanpa JS. "Cadangan tanpa JS" untuk aplikasi semacam itu mungkin berupa mode statis hanya-baca — lebih baik daripada tidak ada sama sekali, tetapi tidak dapat dihindari memiliki kemampuan yang lebih terbatas. Sampaikan komprominya dengan jujur.

"Buat agar berfungsi, lalu buat agar menarik, kemudian buat agar cepat." Bangun formulir HTML terlebih dahulu; pastikan formulir tersebut berfungsi dengan curl. Tambahkan CSS untuk tata letak. Tambahkan JS untuk validasi langsung, pembaruan optimistis, atau pengiriman melalui AJAX. Setiap lapisan bersifat opsional; hasil akhirnya memadukan pengalaman yang hebat untuk semua orang.

Apa janji utama Peningkatan Progresif?

Peningkatan Progresif dimulai dengan HTML semantik yang berfungsi tanpa CSS atau JS, lalu menambahkan CSS untuk tampilan dan JS untuk interaktivitas. Setiap lapisan bersifat opsional; halaman menurun secara bertahap ketika terjadi kegagalan. PE unggul dalam kinerja, aksesibilitas, SEO, dan ketangguhan — dengan konsekuensi pekerjaan desain di awal yang lebih banyak untuk aplikasi yang sangat interaktif.