La filosofía PE: empezar por HTML

La mejora progresiva (PE) consiste en crear una experiencia utilizable únicamente con HTML y añadir después CSS para la presentación y JavaScript para la interactividad. Cada capa mejora la anterior; ninguna es necesaria para que la página funcione.

HTML es la capa más resistente. Se analiza parcialmente cuando está mal formado, ignora las etiquetas que no entiende y funciona sin scripts ni hojas de estilos. En cambio, la ausencia de un archivo CSS degrada el aspecto, y un paquete de JavaScript dañado puede dejar una página inutilizable.

Contenido (HTML), presentación (CSS) y comportamiento (JS). Un botón de envío es un elemento <button type="submit"> real: el formulario se envía aunque falle JS. CSS mejora su aspecto; JS puede interceptar el envío para usar AJAX, pero el HTML subyacente garantiza la acción.

Las redes se interrumpen. Los scripts no se cargan. Los usuarios desactivan JS. Las conexiones lentas agotan el tiempo de espera antes de que lleguen los paquetes. Una página con PE se degrada correctamente en todos estos casos: el usuario aún puede leer, navegar y enviar formularios usando únicamente HTML.

Las páginas que muestran HTML utilizable antes de cargar los scripts tienen un First Contentful Paint más rápido, un Time to Interactive menor y mejores puntuaciones en Core Web Vitals. El navegador muestra contenido significativo sin esperar a que JS se inicialice.

Los elementos HTML reales incorporan accesibilidad. <button> se puede activar con el teclado; <input type="email"> muestra el teclado virtual adecuado; los lectores de pantalla anuncian <a> como un enlace. La PE proporciona valores predeterminados accesibles sin esfuerzo adicional.

Los rastreadores de los motores de búsqueda prefieren HTML que puedan analizar sin ejecutar JavaScript. Las páginas creadas con PE se indexan por completo sin ejecutar JS; las páginas que solo son SPA dependen de la compatibilidad del rastreador con los scripts y a menudo omiten contenido.

Las aplicaciones de una sola página renderizan todo en el cliente y dejan de funcionar por completo cuando falla JS. La PE es lo contrario: el servidor genera HTML completo y JS añade mejoras como la precarga, las actualizaciones optimistas o la edición en el lugar, sin asumir nunca el control de la funcionalidad básica.

Remix, Next.js Server Components, SvelteKit y Astro se orientan hacia HTML renderizado en el servidor con mejora progresiva mediante JS. Elegir uno de estos frameworks convierte la PE en el camino que requiere menos esfuerzo.

Las interfaces muy interactivas (editores colaborativos, aplicaciones de dibujo y juegos en tiempo real) no pueden existir de forma significativa sin JS. El «respaldo sin JS» de estas aplicaciones podría ser un modo estático de solo lectura: es mejor que nada, pero inevitablemente será más limitado. Sea honesto sobre esta compensación.

«Haga que funcione, después haga que sea atractivo y, por último, haga que sea rápido». Cree primero el formulario HTML y verifique que funciona con curl. Añada CSS para la distribución. Añada JS para la validación en el lugar, las actualizaciones optimistas o el envío mediante AJAX. Cada capa es opcional; el resultado combina una excelente experiencia para todos.

¿Cuál es la promesa fundamental de la mejora progresiva?

La mejora progresiva comienza con HTML semántico que funciona sin CSS ni JS y después añade CSS para la presentación y JS para la interactividad. Cada capa es opcional; la página se degrada correctamente cuando se producen fallos. La PE ofrece ventajas de rendimiento, accesibilidad, SEO y resistencia, a cambio de un mayor trabajo inicial de diseño en aplicaciones muy interactivas.