HCC Website Performance Standards

Lighthouse goals

Performance — 95+ on mobile, 100 on desktop.
Accessibility — 100.
Best Practices — 100.
SEO — 100.

Scores are measured on a mid-tier mobile profile (Moto G Power, 4G Slow) with cache disabled. Scores from a Wi-Fi desktop don't count.

Accessibility

WCAG 2.2 AA at minimum on every page.
All interactive elements keyboard-reachable and visibly focused.
Color contrast 4.5:1 for body text, 3:1 for large text and UI.
Every image has meaningful alt text (or alt="" for decorative).
Forms have labels, error messages, and correct input types.
Semantic HTML — real headings, real lists, real buttons.

Best practices

HTTPS on every route, HSTS enabled.
No console errors on production.
No mixed content, no deprecated APIs.
Passwords hashed with modern algorithms (never MD5, never SHA1).
Third-party scripts audited quarterly.

SEO requirements

Unique title and meta description per route.
Single H1 per page.
OpenGraph and Twitter meta on every route.
JSON-LD schema per page type (LocalBusiness, Service, FAQ, Breadcrumb, Article, Product).
sitemap.xml auto-generated and submitted.
robots.txt sensible and canonical tags correct.

Performance budgets

First-party JS — under 100KB gzipped for the initial route.
CSS — under 30KB gzipped for the initial route.
Total transfer for the homepage — under 500KB gzipped.
LCP — under 2.0s on mid-tier mobile.
CLS — under 0.05.
INP — under 150ms.

Image standards

AVIF or WebP, never raw JPG/PNG in production.
srcset with 2–3 widths, sizes attribute defined.
loading="lazy" and decoding="async" below the fold.
Explicit width and height on every img.
Hero image preloaded with <link rel="preload">.

Animation limits

CSS transitions and view transitions preferred over JS animation.
Never animate layout properties (width, top, left) — animate transform and opacity.
Respect prefers-reduced-motion.
No autoplay video with sound. Ever.

Security headers

Content-Security-Policy set per project.
Strict-Transport-Security (HSTS) with preload.
X-Content-Type-Options: nosniff.
Referrer-Policy: strict-origin-when-cross-origin.
Permissions-Policy locking down unused APIs.

Responsive design

Mobile-first. Every layout is designed at 375px first, then scaled up through tablet (768px) and desktop (1280px+). No horizontal scroll at any width. Tap targets minimum 44×44px.

Browser support

The last two versions of Chrome, Safari, Firefox, and Edge, plus iOS Safari 15+ and Android Chrome. Legacy IE is explicitly not supported.

QA checklist (pre-launch)

Lighthouse mobile — 95+ across the board.
Real-device test on iPhone and mid-tier Android.
Keyboard-only navigation of every interactive flow.
Screen reader smoke test (VoiceOver on macOS or NVDA on Windows).
Every form submits, validates, and confirms success.
404 and 500 pages render correctly.
Analytics fires on every page and event.
sitemap.xml and robots.txt live and correct.
Google Search Console verified.
Google Business Profile aligned with site NAP.

Questions people ask about HCC Standards.

Do you really hit 100 on Lighthouse?

On desktop, yes — every route. On mobile, 95+ across the board is our floor and 100 is our target. Scores are measured on a throttled mid-tier device, not a Wi-Fi laptop.

What if my site can't hit the JavaScript budget?

Then something is wrong with the architecture. We ship server-rendered pages with route-level code splitting; the initial route almost never legitimately needs more than 100KB of first-party JS.

Are these standards different for e-commerce?

Slightly. E-commerce routes get a higher JS budget for the cart and checkout, but the homepage, category pages, and product pages hold to the same performance thresholds.