Skip to content
17 min

Web development best practices: the standards we hold every project to

Thom Krupa

Thom KrupaCTO

Most best-practice lists are tips: true, harmless, and forgotten by the next sprint. A standard is different. It has a number, an owner, and a consequence for missing it. This is the set we hold every project to, organized by the outcomes they protect.

Summarize in

ChatGPT

or

TL;DR

Web development best practices, compressed to the standards that actually decide outcomes:

  • Performance is a budget, not a vibe. Pass Core Web Vitals at the 75th percentile of real users (LCP under 2.5 s, INP under 200 ms, CLS under 0.1), then budget stricter than Google requires: on a content page we start from under 100 KB of compressed JavaScript, an LCP image under 150 KB, and two font families or fewer.
  • Reliability comes from removing moving parts. Render on the server or at build time, keep dependencies few and current, make every deploy reversible, and monitor real users rather than waiting for complaints.
  • Accessibility is law, not polish. The European Accessibility Act has applied since June 2025. Build to WCAG 2.2 AA, test with a keyboard and a screen reader, and treat overlay widgets as the liability they are.
  • SEO and AI visibility are the same discipline now. Semantic HTML, stable URLs, structured data, and server-rendered content serve Google and AI assistants alike; most AI crawlers never execute JavaScript.
  • Maintainability is measured in year three. A component system with design tokens, a content model that frees marketers from developer tickets, and decisions written down are what keep a site cheap to change.
  • None of it survives without enforcement. A best practice that is not checked in CI, owned by a named person, or audited on a schedule is a hope, not a standard.

The rest of this guide takes each outcome in turn: what we require, the numbers we hold, and where the deeper playbook lives.

Best practices are standards, not tips

Search for web development best practices and you get lists: fifteen tips, twenty principles, all true, none binding. “Optimize your images” is advice. “The LCP image is under 150 KB in AVIF or WebP, and the build fails if it is not” is a standard. The difference is not the sentiment. It is the number, the owner, and the consequence.

This guide is our standards document, the one we hold every project to, written for the person who has to hold a team or a vendor to it. That shapes two choices. First, it is organized by outcome rather than by technology, because “use framework X” ages badly and “the page loads in under 2.5 seconds for real users” does not. Second, every practice comes with the honest version of the trade-off, because best practices for web development that ignore cost get quietly abandoned by week six.

One framing before the detail. The six outcomes below are not equal in urgency. Accessibility has legal deadlines attached. Performance has revenue attached. Maintainability has your operating cost for the next five years attached. If you can only enforce three things this quarter, enforce a performance budget, an accessibility gate, and a dependency update cadence. Everything else builds on those.

Performance: budget it or lose it

Speed is the best practice everyone endorses and almost no one defends, because it dies by a thousand reasonable additions: one more script, one more font weight, one more autoplaying video. The only durable countermeasure is a budget agreed before design starts and enforced after launch.

The floor is Google’s, the target is yours. Core Web Vitals define a public pass line, measured on real users at the 75th percentile: Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, Cumulative Layout Shift under 0.1. Treat those as the failing grade, not the goal, because a site that barely passes today fails after the next feature. Our SEO guide to page experience and Core Web Vitals covers what actually breaks each metric on content-heavy sites and how much ranking weight the numbers really carry.

Measure the field, not the lab. A Lighthouse score on a developer’s laptop is a lab result under lab conditions. Your users are on mid-range Android phones on hotel Wi-Fi. Field data, from the Chrome UX Report or your own real-user monitoring, is the number that counts, and the two routinely disagree. The complete guide to measuring web performance explains where they diverge and which to trust when.

Budget the assets that dominate the page. Our starting defaults for a content-heavy marketing site, adjusted per project but never abandoned:

  • JavaScript: under 100 KB compressed on content pages. JavaScript is the most expensive byte on the web because it is parsed and executed, not just downloaded, and it is what breaks INP. Many of our builds ship close to none on article and landing pages, which is a rendering-strategy decision more than a heroic optimization.
  • Images: the LCP image under 150 KB, everything explicitly sized. AVIF and WebP are supported across all major browsers; there is no reason to ship a photographic PNG in 2026. Explicit dimensions on every image are what keep CLS at zero. Our comparison of web image formats shows which format wins for photos, graphics, and icons, with real file sizes.
  • Fonts: two families or fewer, WOFF2, subsetted, self-hosted, under 100 KB total. Fonts sit directly on the critical path to first text render, and third-party font hosts add a connection you do not control. The full playbook is in our guide to web font optimization.
  • Third-party scripts: each one has a named owner, a measured cost, and a review date. Analytics, consent tooling, chat widgets, and tag managers are collectively the most common reason a fast site becomes a slow one within a year, because nobody owns their removal. We measured the damage script by script in how popular scripts slow down your website. The standard is simple: no script ships without someone able to say what it costs in milliseconds and what business question it answers.

Enforce in CI, review in production. Budgets live in the build pipeline, where a pull request that blows the JavaScript budget fails before a human reviews it, and in a monthly look at field data, where regressions that crept past the lab get caught. A budget that lives in a slide deck protects nothing.

This is also where we can show receipts instead of asserting. When Backlinko replatformed onto headless WordPress and Next.js with us, performance scores rose 64% and pages loaded three times faster, in a two-month migration. Veezu’s move off WordPress lifted mobile performance scores 96%. Alpro’s rebuild made page loads 127% faster and improved LCP by 63.4%.

Backlinko

Backlinko: 3x faster loading on Headless WordPress and Next.js

In just 2 months, we moved Backlinko to Headless WordPress and Next.js, achieving 64% performance improvements and 3x faster loading speeds, enhancing user experience and SEO.

Read the story →

Veezu

Moving Veezu off WordPress to publish without developers

We migrated Veezu off WordPress onto Next.js and Contentful: mobile performance up 95%, and a content team that publishes independently.

Read the story →

Danone

Danone's Alpro: AEM to Contentful, a site marketers run themselves

We took Danone's Alpro from a monolithic Adobe Experience Manager setup to Contentful and Next.js: faster pages, easier publishing for the marketing team, engagement up 20%, and bounce rate down 6%.

Read the story →

Reliability and security: boring by design

The most secure and reliable component of any website is the one that does not exist. Most of our reliability standards are subtractions.

Render on the server or at build time by default. Client-side rendering, where the server sends an empty shell and JavaScript assembles the page in the browser, is the root cause of a remarkable share of performance, SEO, and reliability problems. Static and server-rendered pages are faster, cacheable at the edge, readable by every crawler, and have dramatically less that can fail at 2 a.m. Reach for client-side rendering only where genuine interactivity demands it: dashboards, configurators, editors. Our comparison of rendering strategies walks through the trade-offs; the short version is that pre-rendering wins for everything with a URL you want people to find.

Treat dependencies as liabilities you chose to hold. Every package is code you run but did not write, and supply-chain attacks target exactly that trust. The standard: a lockfile in version control, automated dependency updates on a weekly cadence with CI as the safety net, a quarterly pass to delete what is no longer used, and a bias against adding a dependency for anything under a hundred lines. The plugin-sprawl version of this failure mode is one of the hidden risks of relying on WordPress: hundreds of third-party packages, each a maintenance obligation and an attack surface, many abandoned by their authors.

Ship the security basics as defaults, not tickets. HTTPS everywhere with HSTS. A content security policy, even a permissive one you tighten over time. Modern security headers. Secrets in a managed store, never in the repository. Least-privilege API tokens that expire. Form endpoints rate-limited and validated on the server, because client-side validation is a courtesy, not a control. None of this is exotic; the standard is simply that these decisions are made once, encoded in the project scaffold, and no page ships without them.

Make every deploy reversible. Atomic deploys with instant rollback turn the scariest question in web operations, “can we undo this?”, into a routine one. If rolling back requires restoring a database backup, you do not have a rollback plan; you have an incident-extension plan.

Watch real users, not just uptime. An uptime monitor tells you the server answered. Error tracking and real-user monitoring tell you whether people can actually use the site, catching the broken checkout on one browser and the script failing behind one consent state. The standard is that someone is notified about errors before customers report them.

Accessibility: the practice that became law

For years, accessibility lived on best-practice lists as the virtuous item everyone skipped. In the EU, that era is over. The European Accessibility Act has applied to businesses serving European consumers since June 28, 2025, with national enforcement and real penalties behind it. Our guide to the European Accessibility Act covers who it applies to and how to close a compliance gap; accessibility as a standard makes the business case beyond the legal one. For US-facing sites, the ADA raises parallel questions, which our website compliance guide for managers walks through.

Build to WCAG 2.2 AA, not the legal minimum. The harmonized European standard, EN 301 549, still references WCAG 2.1 AA today, but its updated version aligned with WCAG 2.2 is in final approval and expected to become the reference during 2026. Building to 2.2 AA now costs little and removes a re-audit later.

The practices that do most of the work are structural, not cosmetic:

  • Semantic HTML first: real headings in order, landmarks, buttons that are buttons, links that are links. Most ARIA in the wild is repairing what non-semantic markup broke.
  • Full keyboard operability with a visible focus state on every interactive element. This one test, unplugging the mouse, finds more real barriers than most tool runs.
  • Contrast at 4.5:1 for text, honest form labels, and error messages that say what went wrong and how to fix it.
  • Alt text as an editorial workflow with required fields in the CMS, not a developer afterthought.
  • Respect for reduced-motion preferences on any animation bigger than a hover state.

Test the way users actually experience it. Automated checkers are necessary and radically insufficient: they catch only a fraction of real barriers, because they cannot judge whether the reading order makes sense or the alt text says anything useful. The standard is automated checks in CI plus a manual pass per template: keyboard only, then a screen reader. Our review of accessibility audit tools covers what the automated layer can honestly do.

And a position we hold firmly: overlay widgets do not make a site compliant. A JavaScript layer bolted over an inaccessible page does not fix the page, and overlay-equipped sites keep appearing in complaints and legal actions. Accessibility is built in design, development, and QA or it is not built at all, which is exactly how we structure it in accessibility as a service.

SEO and AI visibility: build for readers you cannot see

Half your future visitors will never see your design. Crawlers, search engines, and AI assistants read the page as structure and text, and in 2026 the assistants matter commercially: a growing share of buying research happens inside AI answers, where your site is either citable or invisible. The encouraging news is that the same engineering serves both audiences.

Semantic HTML is the API you publish to the world. One h1 per page, headings that form a real outline, lists that are lists, tables that are tables. Search engines use it to understand the page; AI systems use it to extract and cite facts. Content whose meaning lives in div soup and visual layout gets skipped by both.

URLs are infrastructure. Treat them like it. Rankings, backlinks, and citations attach to URLs, so URLs should be stable for years, and every change should carry a 301 redirect maintained as an engineering artifact, not a plugin setting someone forgets to migrate. This matters most during replatforms, where careless URL handling quietly destroys years of earned equity; our playbook for protecting organic traffic through a replatform is the full procedure. A redesign, for the record, does not require touching your URLs at all.

Metadata and structured data are content, not code. Titles, descriptions, canonicals, and JSON-LD should be modeled as content fields with sensible fallbacks, editable by the marketing team, and validated per template in CI. On modern stacks nothing generates them for you by default, which is a transfer of ownership teams keep discovering after launch; what actually breaks in headless CMS SEO is our honest account of it.

For AI visibility, server-rendering stops being a preference and becomes a requirement. Most of the fetchers behind AI assistants do not execute JavaScript at all. A client-rendered page that Google eventually indexes is literally blank to them. Beyond rendering, the content that gets cited is the content that states facts explicitly: named authors, visible dates, summaries, and specifications in real fields rather than implications spread across paragraphs. Crawler policy is now a per-bot decision your team should make consciously, and llms.txt remains cheap to add but unproven in consumption; our free generator makes it a five-minute decision. The commercial context, including what AI answers are doing to organic click-through, is in AI visibility, GEO, and the coming drop in organic traffic.

Maintainability: the site your team can still change in year three

Most best-practice lists stop at launch. Launch is the cheapest day your site will ever have. The standards that decide your operating cost show up later, when the third campaign needs a landing page and the person who built the header has left.

A component system, not a pile of pages. Every UI element exists exactly once, composed everywhere it appears, so a brand refresh is an update to components rather than an archaeology project across templates. Why you need a design system makes the full argument, and documenting components in Storybook is how the system stays legible to people who did not build it.

Design tokens as the single source of visual truth. Colors, spacing, and typography defined once as design tokens and referenced everywhere. It sounds like a detail until the day the brand palette changes and the answer is a one-file edit instead of a quarter-long project.

A content model that matches how your team publishes. Model content as structured types, not as frozen page layouts, and decide deliberately which fields marketers own. The test we hold every build to: a marketer can ship a new landing page, edit metadata, and add a redirect without filing a developer ticket. If they cannot, the system has a design flaw, whatever the technology.

Code standards enforced by machines, judgment reserved for humans. Strict TypeScript, automated formatting and linting in CI, and small reviewed pull requests. The point is not ceremony; it is that no review time gets spent on style, so it gets spent on substance.

Decisions written down. Every project accumulates decisions: why this rendering strategy, why this CMS, why the budget allows 100 KB and not 200. We record them in short architecture decision records in the repository. It is the cheapest practice in this entire guide and the one teams thank us for in year three, because the alternative is re-litigating every decision from memory, usually someone else’s.

Sustainability: the constraint that pays twice

The web runs on electricity, and a heavy site burns it on every device that loads the page. The reason sustainability earns a place in a standards document rather than a values statement is that it is almost free to hold: the same disciplines that make a site fast, small pages, few scripts, efficient images, pre-rendered HTML and edge caching, are the ones that make it low-carbon. Add green hosting, which is a procurement decision rather than an engineering one, and measure page weight as part of the performance budget you already enforce. For organizations with sustainability reporting obligations, the numbers become a reportable win instead of a rounding error. The full picture, from frontend choices to hosting, is in our guide to sustainable web design.

How to make standards stick

Every practice above fails the same way: slowly, silently, one exception at a time. The countermeasures are unglamorous and they are the actual difference between teams that have standards and teams that have opinions:

  • Put the numbers in CI. Performance budgets, accessibility checks, structured-data validation, and dependency audits run on every pull request. Machines do not get tired of saying no.
  • Name an owner per outcome. Not a committee: a person who is asked monthly whether the field data still passes, whether the audit findings got fixed, whether the third-party script list got shorter or longer.
  • Audit on a calendar, not on a crisis. A quarterly review of field performance, accessibility, dependency health, and content debt takes a day and catches decay while it is still cheap.
  • Write down every exception. Exceptions are fine; undocumented exceptions become precedents. If a page ships over budget for a defensible reason, the reason goes in the record with an expiry date.

Common questions

What are web development best practices?

Web development best practices are the standards a professional team applies to every build so that outcomes stop depending on individual memory: performance budgets with hard numbers, security and reliability defaults, accessibility to WCAG 2.2 AA, engineering-grade SEO, maintainable component and content architecture, and enforcement mechanisms in the build pipeline. The distinguishing feature of a real best practice is that it is checkable: it has a number or a test attached, not just a sentiment.

Which web development best practice matters most?

Enforcement. Any single practice, a performance budget, an accessibility gate, a dependency cadence, matters less than the mechanism that keeps it applied after week six. If forced to rank the practices themselves: a performance budget enforced in CI, accessibility built into QA, and server-side or build-time rendering deliver the most outcome per unit of discipline, because each one prevents a whole category of expensive failures rather than a single bug.

Are website development best practices different from web app development best practices?

The foundations are identical: rendering strategy, budgets, accessibility, dependency hygiene, and maintainability apply to both. App development best practices add weight in specific places: INP and interaction responsiveness dominate over load-time metrics, authentication and session security become first-order concerns, accessibility testing has to cover complex interactive widgets rather than mostly documents, and client-side rendering earns its place more often. What does not change is the principle: every standard needs a number, an owner, and a check.

Has AI changed web development best practices?

In two directions. AI-assisted development means more code is produced faster, which raises the value of every enforcement mechanism in this guide: generated code passes through the same budgets, linters, and reviews or the codebase degrades at machine speed. And AI-driven discovery means your site is now read by assistants that do not execute JavaScript and cite explicitly stated facts, which turns server rendering, semantic HTML, and structured content from best practices into visibility requirements.

How do I hold an agency or vendor to these standards?

Put the numbers in the contract and ask for the evidence, not the assurance: the CI configuration that enforces the performance budget, field Core Web Vitals for comparable past work, an accessibility statement with the audit behind it, and the redirect plan if any URLs change. A capable partner will have all of this within a day, because it already exists. The reaction to the request is itself the assessment.

Want a site held to these standards, not just built once?

We design, build, and run websites against every standard in this guide, and we put the budgets, the checks, and the decisions in writing so your team can hold us to them.

Talk to us

Authors

Thom Krupa
Thom KrupaCTO

Co-founder of Bejamas. Focuses on helping people create faster and better websites and apps. Never bet against the Web.

Share