Skip to main content Accessibility Feedback

WTF is the Lean Web, anyways?

This week, I had a conversation with a friend of mine about what the Lean Web actually is.

Static HTML and vanilla JS are clearly Lean Web. But are they always? Is an empty HTML file with entirely JS-rendered content still the Lean Web?

Can a WordPress site be? What about a React app, but one that’s compiled into mostly HTML and a little JS with something like Astro?

Today, I want to explore this a bit more. Let’s dig in!

A philosophy, not a tech stack

The Lean Web is an approach to web development that focuses on fast, resilient experiences that work for everyone.

It’s not a tech stack. There are some tools and implementations that are pretty clearly Lean Web, and some that are clearly not. And there’s also a whole gray area of “it depends” in the middle.

So what exactly makes something the Lean Web?

Principle 1: Embrace the platform

If there’s a browser-native feature that does what you need (accessibly), prefer that over a third-party library.

For example, if you’re getting some elements on the page and just toggling some classes on them, use Element.querySelector() and the classList API instead of jQuery. If you need to call an API, using the fetch() method instead of Axios.

The Lean Web is all about resilience. That means using HTML and CSS instead of JavaScript when the platform provides an appropriate solution.

If you need a simple show/hide component, use the details and summary elements instead of writing a disclosure script and setting and modifying ARIA attributes. If you want to animate scrolling to an anchor link, use the scroll-behavior: smooth CSS property instead of intercepting clicks and using the scrollTo() method.

The web platform can do amazing things. Use it to your full advantage!

Principle 2: Favor small, modular tools

The web platform is really powerful, but sometimes, what you want to do isn’t supported out-of-the-box.

For example, there are no native dropdown or toggle tab elements. There’s no baked-in feature for DOM diffing. For these things (and many more), you either need to write your own custom code or reach for a third-party tool.

When you do, favor tools that are small, modular, and dependency-free.

For example, a library that just handles dropdown menus is better than one that require React or Vue to work. If you need state-based UI in your project, Preact or SolidJS are better choices than React or Vue. They’re a fraction of the size, have fewer abstractions, and render DOM updates faster, too!

Instead of multi-tools, opt for single-purpose tools that don’t lock you into a broader ecosystem.

Principle 3: Build a web for everyone

If a site isn’t accessible, or only works in certain browsers, or crashes on slow internet connections… it’s not the Lean Web.

The web is for everyone, and the things we build must be, too.

Doing that means that you need to understand semantic HTML, and how people with various disabilities navigate the web. You need to test what you build with screen readers and keyboard-only navigation. You need to make sure that when failures happen, the critical parts of your site or app still work.

But this extends to the people that build for the web, too.

Build tools and processes that include large amounts of NPM dependencies, are overly dependent on knowing command line prompts, or are heavily JavaScript focused gatekeep very talented people from participating. And they create a tool chain that’s a nightmare to maintain.

Something we don’t talk about nearly enough is how simpler web development approaches are better for developers, too!

The gray area

And that brings us to the gray area.

There are some things that are clearly Lean Web, and some things that clearly are not.

  • A static website that’s only flat HTML files and CSS (maybe with a sprinkling of vanilla JS or dependency-free libraries) is Lean Web.
  • A single-page client-side React app is NOT Lean Web.

But because the Lean Web isn’t a tech stack, there’s a whole bunch of stuff in the middle where it gets murky.

  • Is a WordPress site Lean Web? It could be. With good server-side caching, it can be really fast. You can rip out the default jQuery that gets loaded, and serve mostly just HTML and CSS.
  • Are sites built with tools like Svelte and Astro Lean Web? They take mostly JavaScript as an input, and render mostly static HTML with a sprinkling of JS as an output, so from a user perspective, I think they are. But Astro in particularly kind of encourages a continued use of overly complex dev tools, so… from a dev perspective, maybe not?
  • Is a single-page client-side app that uses vanilla JS or Preact Lean Web? Maybe! If it’s a blog or news site, definitely not. If it’s a streaming site like YouTube or SoundCloud where media plays while you browse, it almost has to be an SPA. So using a smaller tool like Preact is the Lean Web way.
  • Can complex browser apps ever be Lean Web? I think so, but I’m not sure where the line is that says one app is and another isn’t. As a generalization, I’d say rendering whatever you can with HTML and progressively enhancing the interactive bits with an Islands Architecture approach gets you in the right direction, though.

What do you think?

Are there any principles you’d add? Any you’d remove? Any hard lines that make something squarely Lean Web or not?