Technical Deep Dive.
10 Layers. Zero Compromises.
The Nitrosite Standard is our proprietary 10-layer architecture that systematically eliminates every performance bottleneck, accessibility gap, and SEO blind spot. Here's exactly how we achieve 100/100/100/100 on every page.
Lighthouse Audit
Mobile + Desktop — All Categories
Performance
Accessibility
Best Practices
SEO
Achieved through the Nitrosite Standard — 10 systematic layers.
Where It Started
Designed at The University of Oxford
The techniques behind the Nitrosite Standard were developed during research at The University of Oxford, where the intersection of information architecture, network performance, and human-computer interaction created the foundation for a fundamentally different approach to web engineering.
Rather than layering frameworks on top of frameworks — the default in modern web development — the Oxford research started from first principles: what is the absolute minimum a browser needs to render a perfect page? Every technique in the Nitrosite Standard traces back to that question.
The result is a 10-layer architecture that treats performance, accessibility, and SEO not as afterthoughts to be patched, but as structural properties of the system itself. Each layer was validated against real-world legal industry workloads before being codified into the standard.
University of Oxford
Research & Development
Layer One
Zero-Stylesheet Architecture
Most websites load a monolithic CSS file containing styles for every page. Visitors download tens of thousands of unused rules on every request. The Nitrosite Standard eliminates this entirely.
We compile Tailwind CSS per-page using a custom build pipeline. Each HTML file is scanned individually, and only the utility classes it actually uses are extracted, tree-shaken, minified, and inlined directly into a <style> tag in the <head>.
Build Pipeline
for each page in htmlFiles:
scan HTML for Tailwind classes
generate minimal CSS (tree-shaken)
minify output
inject <style> inline in <head>
Result: 0 external stylesheets
0 render-blocking resources
~22KB CSS per pageFont Stack
IBM Plex Sans
400, 500, 600, 700
Poppins
700, 900
Material Symbols
Subset — 47 icons
Total font payload: 73KB vs. Google Fonts CDN avg: 250KB+
Layer Two
Self-Hosted & Subsetted Fonts
Google Fonts adds DNS lookups, TLS handshakes, and third-party connections that slow down every page load. We eliminate all of that by self-hosting every font.
Each font file is subset to the Latin unicode range, compressed as woff2, and served from the same origin with content-hashed filenames for immutable caching. The font-display: swap property ensures text is immediately visible during loading.
Layer Three
Critical Resource Preloading
Browsers discover font files late — only after parsing CSS that references them. This creates a critical request chain: HTML → CSS → Font. Each link adds network latency.
The Nitrosite Standard uses <link rel="preload"> hints in the <head> to place fonts in the browser's high-priority download queue before any CSS is parsed. The chain collapses to parallel downloads.
Before vs. After
// Without preloading (sequential)
HTML ──→ CSS ──→ Font discovery ──→ Download
200ms 50ms 150ms
Total: 400ms
// With preloading (parallel)
HTML ──→ CSS (parse inline)
└──→ Fonts (already downloading)
Total: 200msArchitecture Comparison
Traditional (React/Next.js)
Nitrosite Standard (Static HTML)
Layer Four
Static-First Architecture
JavaScript frameworks ship hundreds of kilobytes of runtime code that must be downloaded, parsed, compiled, and executed before the page becomes interactive. This is the single largest cause of poor mobile performance scores.
Nitrosite is pure HTML. No React. No Next.js. No hydration. The page is interactive the instant it renders. Time to Interactive equals First Contentful Paint. Total Blocking Time is literally zero.
Layer Five
Edge Deployment & Caching
Every Nitrosite is deployed to AWS S3 with CloudFront CDN in front. Content is served from 450+ edge locations worldwide, putting files physically close to every visitor.
Content-hashed assets (fonts, images, scripts) are cached for one full year with the immutable directive. HTML pages are cached for one hour. Returning visitors load pages almost entirely from browser cache.
Cache Strategy
// Fonts & static assets
Cache-Control: public, max-age=31536000, immutable
// Hashed filename = safe to cache forever
// ibm-plex-sans-latin.b2c9031d.woff2
// HTML pages
Cache-Control: public, max-age=3600
// 1 hour — content updates propagate quickly
// Architecture
S3 (origin) → CloudFront (CDN) → Browser
450+ edge locationsKeyboard Navigation
Full tab-order, focus management, and skip-to-content links on every page.
Color Contrast
WCAG 2.1 AA compliant contrast ratios across all text and interactive elements.
Heading Hierarchy
Proper h1 → h2 → h3 structure for screen readers and document outline.
ARIA Labels
aria-label, aria-hidden, aria-haspopup attributes on all interactive components.
Layer Six
Semantic HTML & Accessibility
Accessibility isn't a checkbox — it's a legal requirement (ADA compliance) and a direct ranking factor. Lighthouse tests for 50+ accessibility criteria. We pass every single one.
Every page uses semantic HTML5 elements, proper ARIA attributes, skip-to-content links, logical heading hierarchy, and meets WCAG 2.1 AA color contrast requirements. The lang="en" attribute, viewport meta, and logical tab order are guaranteed on every deployment.
Layer Seven
Structured Data & SEO
Google's SEO audit checks for 14 specific criteria. We satisfy all of them, plus add rich structured data that most law firm websites completely miss.
Every page ships with JSON-LD schema markup including Organization, BreadcrumbList, WebPage, and Product types. Combined with canonical URLs, Open Graph tags, Twitter Cards, XML sitemap, and robots.txt, search engines get a complete, machine-readable picture of your site.
JSON-LD Schema
{
"@context": "schema.org",
"@graph": [
{ "@type": "Organization" },
{ "@type": "BreadcrumbList" },
{ "@type": "WebPage" },
{ "@type": "Product",
"name": "Nitrosite" }
]
}
+ Open Graph meta tags
+ Twitter Card meta tags
+ Canonical URL per page
+ XML sitemap (29 URLs)Service Worker Precache
Entire site available offline after first visit.
Layer Eight
Progressive Web App
Every Nitrosite registers a service worker that precaches all pages, fonts, and components on the first visit. After that, the entire site works offline. Returning visitors get instant page loads from the service worker cache.
A web manifest enables installability on mobile devices, and the theme-color meta tag ensures a polished native-app feel in the browser chrome.
Layer Nine
Asset Optimization
Every byte in a Nitrosite is audited. Images use SVG for vector graphics, PNG is crushed to minimum file size, and no unoptimized images exist in the critical rendering path.
The Material Symbols icon font is subset from 2.5MB down to 47KB containing only the specific icons used across the site. This single optimization saves 98% of the original file weight.
Total Page Weight
Component Bytes
─────────────────────────────
HTML (inline CSS) ~50KB
Fonts (4 woff2) ~73KB
Components (JS) ~4KB
Favicon ~2KB
─────────────────────────────
Total ~129KB
After gzip ~45KB
WordPress average: ~3.5MB
Nitrosite: ~45KBCompression Results
Layer Ten
Compression Pipeline
Every text-based asset — HTML, CSS (inline), JavaScript, JSON, XML, SVG — is served with gzip encoding. This final layer compresses the already-optimized content by an additional 65-80%, dramatically reducing time-on-wire.
CloudFront handles compression automatically at the edge, so the origin server never needs to compress on-the-fly. Fonts are already in woff2 format (pre-compressed), so they pass through without double-encoding overhead.
The Difference
Nitrosite Standard vs. Traditional
The numbers speak for themselves. Here's how a Nitrosite compares to a typical law firm website.
| Metric | WordPress / React | Nitrosite (Nitrosite Standard) |
|---|---|---|
| Performance Score | 35-65 | 100 |
| Accessibility Score | 60-80 | 100 |
| Best Practices Score | 70-85 | 100 |
| SEO Score | 75-90 | 100 |
| Page Weight | 3-8 MB | ~45 KB (gzipped) |
| Load Time (3G) | 8-15 seconds | Under 1 second |
| Total Blocking Time | 500-2000ms | 0ms |
| External Requests | 40-120 | 6 |
See It In Action.
Run a Lighthouse audit on this page right now. Open Chrome DevTools, go to the Lighthouse tab, and click Analyze. We'll wait.