Modern Web Development Best Practices: Performance, Accessibility, and DX

Modern Web Development Best Practices: Performance, Accessibility, and DX

Modern web development isn’t about chasing every new framework. It’s about shipping fast, accessible experiences with a workflow that scales. In this post, I’ll share the practices I use across projects to improve performance, accessibility, and developer experience (DX). Each section includes code and concrete steps you can adopt today.

Performance: ship less, render smart, cache well

Optimize the critical path

Your first render should be fast and meaningful. Treat the critical path—HTML, CSS, minimal JS, and above‑the‑fold assets—as sacred.

<!-- Preload critical font and hero image -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image" imagesrcset="/img/hero.webp 1x, /img/hero@2x.webp 2x">

• Inline only the CSS needed for the first paint

• Defer non‑critical scripts with defer or type="module"

• Prefer modern formats: WebP/AVIF for images, WOFF2 for fonts

Measure what matters

Web Vitals are north stars: LCP, INP, CLS.

// web-vitals.ts
import { onLCP, onINP, onCLS } from 'web-vitals';
import { send } from './analytics';

onLCP((m) => send('lcp', m.value));
onINP((m) => send('inp', m.value));
onCLS((m) => send('cls', m.value));

Track these per route and surface regressions in CI and dashboards.

Reduce JavaScript, embrace SSR/SSG and RSC

Hydration tax is real. Consider hybrid rendering with Next.js/Nuxt and React Server Components or Vue SSR to move work to the server.

// Next.js (App Router) server component example
// app/products/page.tsx
import { getProducts } from '@/lib/db';

export default async function ProductsPage() {
  const products = await getProducts(); // runs on server
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

• Keep client components small

• Use use server actions to reduce API round‑trips

• Split bundles by route and lazy‑load rarely used code

Cache aggressively (at the right layer)

Avoid expensive re‑work with layered caches.

# Static assets (immutable)
Cache-Control: public, max-age=31536000, immutable

# HTML (short‑lived)
Cache-Control: public, s-maxage=60, stale-while-revalidate=300

• Use an edge cache or CDN for static resources

• Add application‑level caches for expensive queries

• Adopt stale‑while‑revalidate to hide origin slowness

Accessibility: design for everyone by default

Accessibility is table stakes, not an afterthought. Bake it in from the first component.

Semantics and landmarks

Use the correct elements and regions so assistive tech can navigate your UI.

<header role="banner">...</header>
<nav aria-label="Primary">...</nav>
<main id="content" role="main">...</main>
<footer role="contentinfo">...</footer>

Forms, labels, and errors

Every input needs a visible label and an accessible name. Associate errors with their fields.

<label for="email">Email</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-error">
<div id="email-hint" class="hint">We’ll never share your email.</div>
<div id="email-error" class="error" role="alert" hidden>Enter a valid email.</div>

Keyboard and focus management

Make interactive elements focusable and visibly focused. Manage focus on route transitions and dialogs.

// After rendering a modal
modalEl.showModal();
modalEl.querySelector<HTMLElement>('[data-initial]')?.focus();

// Restore focus when closing
const lastFocus = document.activeElement as HTMLElement;
modalEl.addEventListener('close', () => lastFocus?.focus());

Color contrast and motion

• Ensure 4.5:1 contrast for text (3:1 for large text)

• Provide prefers-reduced-motion alternatives

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

Automated checks and linters

Add checks to CI so regressions fail fast.

# Example CI step
npx axe --chromium --urls https://localhost:3000 --disable-iframe
npx lighthouse http://localhost:3000 --preset=desktop --output=json --output-path=./reports/lh.json

Developer Experience (DX): make the happy path the default

Great DX isn’t just nice to have. It shortens lead time, reduces defects, and improves morale.

Fast local feedback

• Hot reload and component previews (Vite, Next dev server)

• Type‑checking in editor and pre‑push

// package.json scripts
{
  "scripts": {
    "dev": "next dev",
    "typecheck": "tsc -p tsconfig.json --noEmit",
    "lint": "eslint .",
    "test": "vitest",
    "prepush": "npm run typecheck && npm run lint && npm run test -w"
  }
}

Consistent code and APIs

Codify decisions once and reuse everywhere.

// .eslintrc.json
{
  "extends": ["next", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react-hooks/exhaustive-deps": "warn"
  }
}

• Adopt a UI kit or design system for consistency

• Prefer feature‑based file structure for discoverability

src/
  app/
  components/
  features/
    checkout/
      components/
      hooks/
      api/

API contracts and type‑safe data

Use a single source of truth for schemas and generate types for client and server.

// zod schema → types and runtime validation
import { z } from 'zod';
export const Order = z.object({ id: z.string().cuid(), total: z.number().nonnegative() });
export type Order = z.infer<typeof Order>;

• Validate at the edges, trust types inside

• Consider tRPC or OpenAPI clients for typed calls

Preview environments and PR checks

Every PR should have a deploy preview with automated checks.

# .github/workflows/ci.yml
name: ci
on: [pull_request]
jobs:
  web:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm run typecheck && npm run lint && npm test
      - run: npm run build
      - name: Upload build
        uses: actions/upload-artifact@v4
        with: { name: web, path: .next }

Wire this to your hosting provider (Vercel/Netlify/Fly) for ephemeral previews.

Bringing it together: a pragmatic workflow

1. Start with measurement: baseline Web Vitals, Lighthouse, and axe.

1. Fix the critical path: font, image, and CSS optimizations; reduce JS.

1. Introduce SSR/SSG and server components where they cut JS and network hops.

1. Enforce accessibility in CI, and close the loop with manual keyboard checks.

1. Invest in DX: fast feedback, typed contracts, previews per PR.

1. Keep it observable: logs, metrics, and error boundaries on the client.

Practical takeaways

• Treat the critical path as sacred and measure Web Vitals continuously.

• Prefer server‑side work and lean client bundles; lazy‑load with intent.

• Make accessibility non‑negotiable with semantic HTML, focus management, and CI checks.

• Standardize DX: scripts, linting, type‑checking, previews, and typed API contracts.

• Automate what you can, document what you must, and keep the path to production boring.

Conclusion

Performance, accessibility, and DX reinforce each other. Fast, inclusive apps with reliable tooling are easier to maintain and a better experience for everyone—users, teammates, and on‑call engineers. Pick one improvement from each section, ship it this week, and measure the impact. Momentum follows.