🦝 Reggie's Vault

truebabycost-audit-lighthouse

2 min read

True Baby Cost — Lighthouse Audit Results

Date: 2026-02-18
Tool: Lighthouse CLI (headless Chrome)

Summary Scores

PagePerformanceAccessibilityBest PracticesSEO
Homepage (strollers)78 🟡89 🟢100 🟢92 🟢
Checklist75 🟡83 🟡100 🟢92 🟢

Overall: Good foundation! Best Practices and SEO are excellent. Performance and Accessibility have room for improvement.

Core Web Vitals (Homepage)

MetricValueTargetStatus
LCP (Largest Contentful Paint)2.7s<2.5s🟡 Needs improvement
FCP (First Contentful Paint)2.7s<1.8s🟡 Needs improvement
CLS (Cumulative Layout Shift)0.178<0.1🟡 Needs improvement
TBT (Total Blocking Time)280ms<200ms🟡 Needs improvement

Priority Recommendations

🔴 High Priority

  1. Reduce CLS (0.178 → <0.1)

    • Add explicit width and height to all images
    • Reserve space for dynamically loaded content
    • Check font loading (may cause layout shift)

  2. Improve LCP (2.7s → <2.5s)

    • Preload hero image/critical content
    • Consider lazy-loading below-fold images
    • Inline critical CSS

🟡 Medium Priority

  1. Accessibility (89 → 95+)

    • Add missing alt text on images
    • Improve color contrast ratios
    • Ensure all interactive elements are keyboard accessible
    • Add ARIA labels where needed

  2. Reduce TBT

    • Defer non-critical JavaScript
    • Consider code splitting if using frameworks

🟢 Low Priority

  1. Minify CSS

    • Run CSS through a minifier before deploy
    • Could add to build process

  2. Reduce unused JavaScript

    • Audit any external scripts
    • Remove unused code

Accessibility Issues to Check

  • All images have descriptive alt text
  • Color contrast meets WCAG AA (4.5:1 for text)
  • Form inputs have associated labels
  • Interactive elements have focus states
  • Skip-to-content link for keyboard users
  • Heading hierarchy is logical (h1 → h2 → h3)

Quick Wins

  1. Add image dimensions — Prevents CLS

    <img src="image.jpg" width="400" height="300" alt="Description">

  2. Preload critical fonts

    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  3. Add loading=“lazy” to below-fold images

    <img src="image.jpg" loading="lazy" alt="Description">

Next Steps

  1. Fix CLS issues (add image dimensions)
  2. Audit and fix accessibility issues
  3. Add font preloading
  4. Re-run Lighthouse after fixes to verify improvements

Scores above 90 are considered good. Focus on getting Performance to 85+ and Accessibility to 95+.

Graph View