← QA & Testing

Lighthouse — Performance & Accessibility Audit

Auditing my own live site instead of a random public one — real findings, including a deployment gap I didn't know was there.

Role: QA — performance & accessibility auditing (portfolio project)

Site under test: felipeherrera.app — my own live portfolio, in production

Most "Lighthouse case study" projects run the tool against a random public site once and stop there. I audited my own production site instead: it's the one app where I can actually act on every finding, and running it caught something I didn't expect — production was quietly serving a stale build.

Lighthouse Performance Testing Accessibility (WCAG) SEO

Scope & environment

Pages audited: home (/) and the UX/UI case-studies index (/uxui.html).

Tooling: Lighthouse 13.4.0 CLI, headless Chrome, mobile form factor, simulated throttling (150ms RTT, 4x CPU slowdown — a standard "mid-tier phone on slow 4G" profile).

Categories: Performance, Accessibility, Best Practices, SEO.

Scores

PagePerformanceAccessibilityBest PracticesSEO
/ (home) 89 87 100 100
/uxui.html 89 87 100 100

↳ Raw JSON + interactive HTML reports for both pages: lighthouse/ on GitHub.

Findings

Every number below came straight out of Lighthouse's own audit data — nothing eyeballed.

BUG010 — Production is serving a stale build (lang="es" instead of lang="en")
Lighthouse · felipeherrera.app (production)
Expected resultLive page matches the repo's current source: <html lang="en">
Actual resultThe live page still serves <html lang="es"> — the English translation was done locally but never deployed. Not a code bug, a deployment gap the audit happened to catch.
Severity: Medium Priority: Medium
[Accessibility] Insufficient color contrast on 4+ elements (both pages)
WCAG AA — needs 4.5:1
Expected resultText/background pairs meet the 4.5:1 contrast ratio
Actual resultMeasured ratios as low as 2.82:1 (hero pink overlay text) — e.g. .hero-hint at 4.45:1, the pink .nav-card-desc overlay at 4.17:1, .helper-note/footer links at 3.77:1
Severity: Medium
[Accessibility] Home page has no <main> landmark
Lighthouse audit: landmark-one-main
Expected resultA main landmark lets screen reader users skip straight to page content
Actual resultindex.html has no element with the main role
Severity: Low
[Accessibility] Heading order skips a level on /uxui.html
Lighthouse audit: heading-order
Expected resultHeading levels descend sequentially (h1 → h2 → h3) so screen readers can navigate by heading
Actual resultAn <h3 class="section-title"> appears without a preceding <h2> in the same subtree
Severity: Low
[Performance] Render-blocking requests and unoptimized images (both pages)
Lighthouse opportunities — not defects, optimization headroom
Estimated savings~1.9–2.0s from deferring render-blocking CSS/fonts; 107–171 KiB from better image compression/sizing
ContextDoesn't tank the score — Performance is already 89/100 on both pages audited
Priority: Low

Recommendations, in priority order

  1. Push the pending FELIPEWEB commits to GitHub/Vercel — fixes BUG010 for free along with everything else already done locally but not deployed.
  2. Fix the 4 flagged color-contrast pairs (darken text or lighten the background a few percent in styles.css).
  3. Add a <main> landmark wrapping page content in index.html.
  4. Fix the heading-order gap on /uxui.html.
  5. Defer render-blocking font/CSS requests and compress the heavier case-study screenshots — lowest priority, since Performance already sits at 89/100.
View repository on GitHub → ← Back to QA & Testing