Why Progressive Enhancement Still Matters in 2025
The web is messy. Users browse on flagship smartphones with 5G, on decade-old laptops tethered to flaky hotel Wi-Fi, and on screen readers that never execute a single line of JavaScript. A single website must work for all of them.
That is exactly the problem progressive enhancement was designed to solve—and two decades after the term was coined, it is more relevant than ever.
Google’s Core Web Vitals now directly influence search rankings. The European Accessibility Act (EAA) comes into force in June 2025, mandating digital accessibility for a wide range of businesses. Meanwhile, the median page weight has crossed 2.5 MB, with JavaScript alone accounting for roughly 500 KB on mobile (HTTP Archive, 2024). Sites that ship mountains of JS before the user can read a headline are losing traffic, revenue, and legal compliance.
Progressive enhancement is not a trend. It is an engineering strategy that delivers resilience, performance, and accessibility by design.
Understanding the Core Principles
The Three Layers
Progressive enhancement organizes a web experience into three distinct layers:
| Layer | Technology | Role | What Happens If It Fails |
|---|---|---|---|
| Content | Semantic HTML | Delivers meaning, structure, and core functionality | Nothing—this is the baseline that always works |
| Presentation | CSS | Adds layout, color, typography, animation | Content remains readable, just unstyled |
| Behavior | JavaScript | Adds interactivity, dynamic updates, client-side logic | Core content and navigation still function |
The key insight is simple: each layer is an enhancement of the one below it. If JavaScript fails to load—because of a network glitch, a corporate proxy, a browser extension, or a Content Security Policy error—the user still gets content. If CSS fails, the content is still there in a logical reading order.
Progressive Enhancement vs. Graceful Degradation
These two terms are often confused, but they represent opposite directions:
- Graceful degradation starts at the top (a fully featured JS-driven experience) and tries to patch things for less capable environments.
- Progressive enhancement starts at the bottom (solid HTML) and builds upward.
The practical difference is enormous. With graceful degradation, the fallback is an afterthought. With progressive enhancement, the baseline is the product—everything else is a bonus.
At Lueur Externe, our development team has embraced progressive enhancement as a foundational practice since the early days of the agency. After more than 20 years of building websites, we have seen first-hand that sites built on a resilient HTML-first foundation outperform their JS-heavy counterparts in search rankings, conversion rates, and long-term maintainability.
How to Implement Progressive Enhancement: A Practical Guide
Step 1 — Start With Semantic, Accessible HTML
Before you think about styles or scripts, make sure the HTML document works on its own. That means:
- Using semantic elements (
<nav>,<main>,<article>,<section>,<aside>,<footer>) instead of generic<div>soup. - Ensuring forms submit data to the server without JavaScript (
actionandmethodattributes). - Providing meaningful link text (“Read the full case study” instead of “Click here”).
- Including
altattributes on images,labelelements on form controls, and proper heading hierarchy.
Here is a minimal but fully functional contact form that works with zero JavaScript:
<form action="/api/contact" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>This form is fully functional in every browser since the late 1990s. A screen reader can parse it. A search engine can understand it. A user on a train going through a tunnel can fill it out, and it will submit when the connection comes back.
Step 2 — Layer on CSS for Visual Design
Once the HTML is solid, add CSS to make the page visually compelling. Progressive enhancement applies here too:
- Use feature queries (
@supports) to deliver advanced layouts only to browsers that understand them. - Use
prefers-reduced-motionandprefers-color-schememedia queries to respect user preferences. - Avoid hiding critical content with
display: nonepurely for aesthetic reasons—that content disappears if CSS loads but JavaScript doesn’t toggle it.
/* Base layout: single column, works everywhere */
.grid {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
/* Enhanced layout for browsers supporting CSS Grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}This CSS delivers a clean single-column layout to every browser, then upgrades to a responsive grid for those that support it—classic progressive enhancement.
Step 3 — Add JavaScript as an Enhancement
This is where most teams go wrong. Instead of building the core experience in JS, treat JavaScript as the icing:
- Form validation: Add real-time inline validation with JS, but keep the
required,type="email", andpatternattributes in HTML so native browser validation kicks in if JS fails. - Navigation: Build your nav with
<a>tags that link to real URLs. Then use JS to intercept clicks for smoother client-side transitions. - Interactive components: Accordions, tabs, and modals should be built on top of working content. A
<details>/<summary>element, for instance, gives you an accordion with zero JavaScript.
<!-- No-JS accordion using native HTML -->
<details>
<summary>What is your return policy?</summary>
<p>You can return any item within 30 days of purchase for a full refund.
Items must be in their original packaging.</p>
</details>Then enhance it:
// Enhance: allow only one details element open at a time
if ('content' in document.createElement('template')) {
const allDetails = document.querySelectorAll('details');
allDetails.forEach((detail) => {
detail.addEventListener('toggle', () => {
if (detail.open) {
allDetails.forEach((other) => {
if (other !== detail) other.removeAttribute('open');
});
}
});
});
}Notice the feature check on line 2. We only run the enhancement if the browser supports the features we need. Users without JavaScript still see expandable FAQ items.
Real-World Performance Impact
Progressive enhancement is not just a philosophical nicety—it delivers measurable results.
Case Study: E-Commerce Product Listing
Consider two approaches to building a product listing page for a PrestaShop store:
| Metric | JS-First SPA | Progressive Enhancement |
|---|---|---|
| Time to First Byte (TTFB) | 620 ms | 180 ms |
| Largest Contentful Paint (LCP) | 4.2 s | 1.4 s |
| Total Blocking Time (TBT) | 890 ms | 120 ms |
| Cumulative Layout Shift (CLS) | 0.18 | 0.02 |
| JS Bundle Size | 487 KB (gzipped) | 62 KB (gzipped) |
| Works Without JS | ❌ Blank page | ✅ Full product list |
Figures based on aggregated benchmarks from projects delivered by Lueur Externe for PrestaShop merchants, tested on a mid-range Android device over a 4G connection.
The progressive enhancement approach rendered products 3× faster, shipped 87% less JavaScript, and passed all Core Web Vitals thresholds. The SPA version failed LCP and TBT on mobile.
Faster load times translate directly to revenue. According to Deloitte’s 2020 “Milliseconds Make Millions” study, a 0.1-second improvement in mobile site speed can increase conversion rates by up to 8.4% for retail sites.
Modern Frameworks That Embrace Progressive Enhancement
The JavaScript ecosystem has spent years moving away from progressive enhancement (think early React SPAs with empty <div id="root"> bodies). But the pendulum has swung back. Several modern frameworks now put progressive enhancement at their core:
- Remix / React Router v7: Forms work without JS via standard HTML submissions. JS adds client-side transitions as an enhancement.
- Astro: Ships zero JavaScript by default. Interactive “islands” hydrate only when needed.
- SvelteKit: Server-side renders every page. Progressive hydration adds interactivity.
- Next.js (App Router): React Server Components reduce client-side JS. Server Actions handle form submissions without client-side JavaScript.
- Enhance.dev: A framework explicitly built around web standards and progressive enhancement.
Choosing the right framework for your project depends on your stack, team expertise, and business goals. Whether you are running a WordPress content site, a PrestaShop store, or a custom application on AWS, Lueur Externe can help you select and implement the architecture that delivers the best balance of developer experience, performance, and resilience.
Common Objections—And Why They Don’t Hold Up
”Nobody disables JavaScript anymore.”
True—very few users manually disable JS. But JavaScript can fail for many other reasons:
- Network errors or timeouts (especially on mobile)
- Browser extensions blocking scripts (ad blockers, privacy tools)
- CDN outages (remember the Fastly outage of June 2021?)
- Corporate firewalls and proxies stripping or modifying scripts
- Race conditions during hydration
A 2023 study by the UK Government Digital Service found that roughly 1 in every 93 page views did not receive JavaScript successfully. For a site with 1 million monthly views, that is over 10,000 visits where a JS-dependent site would show a blank page.
”It’s more work upfront.”
Building the HTML layer first does require discipline, but it actually reduces total effort over the project lifecycle:
- Debugging is easier because you can isolate issues to a specific layer.
- Automated testing is simpler: you can test HTML output with lightweight integration tests, without spinning up a headless browser.
- Accessibility compliance is largely built in, reducing the cost of remediation later.
- SEO performance improves without needing complex server-side rendering setups to “fix” an SPA.
”It limits what we can build.”
Progressive enhancement does not mean “no JavaScript.” It means JavaScript is not a prerequisite for basic functionality. You can still build rich, interactive experiences—animations, real-time updates, drag-and-drop interfaces—on top of a working baseline.
Think of it like an elevator in a building. The stairs (HTML) are always there. The elevator (JS) makes the experience faster and more convenient. But if the elevator breaks, nobody is stranded.
A Practical Checklist for Your Next Project
Before your next sprint, run through this progressive enhancement checklist:
- Can a user read all critical content with JavaScript disabled?
- Do all links navigate to real URLs (not
href="#"with JS click handlers)? - Do all forms submit data to the server without relying on JS for the submission itself?
- Are images using
<img>with properalttext, not rendered via JS or CSSbackground-imagefor content images? - Does the page pass Core Web Vitals on a mid-range mobile device over 3G?
- Is the heading hierarchy logical (H1 → H2 → H3, no skipped levels)?
- Are interactive components keyboard-accessible even without JS enhancements?
- Are CSS feature queries (
@supports) used for advanced layout features? - Is the JS bundle size under 100 KB gzipped for the initial load?
- Does the site work—at a basic level—if the CDN serving your JS goes down?
If you answer “no” to more than two or three of these, there is room for improvement.
The SEO Connection
Search engines are sophisticated, but they still love fast, semantic, accessible HTML. Here is why progressive enhancement directly supports your SEO goals:
- Faster rendering = better Core Web Vitals = higher rankings. Google has confirmed that page experience signals, including LCP, FID/INP, and CLS, are ranking factors.
- Semantic HTML helps crawlers understand content. Proper use of headings, landmarks, and structured markup gives search engines clear signals about your content hierarchy.
- Reduced JS dependency means faster, more reliable indexing. Googlebot does render JavaScript, but not instantly. Pages that rely entirely on client-side rendering may wait hours or days to be fully indexed. Server-rendered HTML is indexed immediately.
- Accessibility improvements correlate with SEO improvements. Alt text, heading structure, link text, and ARIA landmarks benefit both screen readers and search engine crawlers.
Conclusion: Build for Everyone, Enhance for the Best
Progressive enhancement is not a limitation—it is a competitive advantage. In an era where Core Web Vitals influence rankings, accessibility legislation is tightening, and users expect instant page loads, building on a resilient HTML foundation is the smartest investment you can make.
Start with content. Add style. Then add behavior. Test each layer independently. The result is a website that works for the user on a ten-year-old phone in a rural area and for the power user on a fiber connection with the latest browser—and for every search engine crawler in between.
At Lueur Externe, we have been applying these principles since 2003 across WordPress sites, PrestaShop stores, and custom web applications hosted on AWS. If you want a website that is fast, accessible, resilient, and built to rank, we would love to talk.
Get in touch with Lueur Externe → and let’s build something that works for everyone.