🦝 Reggie's Vault

truebabycost-review-performance

4 min read

True Baby Cost Performance & Accessibility Review

Audit date: February 21, 2026 Site: truebabycost.com

Executive Summary

Quick wins identified for both performance and accessibility.

The site is static HTML (no framework overhead) which is inherently fast, but there are optimization opportunities in font loading, image handling, and accessibility attributes.

Performance Analysis

Current Architecture: ✅ Good Foundation

  • Static HTML - No JavaScript framework = fast initial load
  • Cloudflare Pages - Edge caching, CDN distribution
  • No external JS dependencies (except Google Fonts)

Font Loading: ⚠️ Improvement Opportunity

Current implementation:

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">

Issues:

  • Render-blocking font request
  • Loading many font weights (5 for Plus Jakarta, 3 for Space Grotesk)
  • font-display: swap is set but still delays LCP

Recommendations:

  1. Subset fonts - Only load weights actually used
  2. Preconnect (already done ✅)
  3. Consider self-hosting fonts for better caching
  4. Use font-display: optional for non-critical fonts
  5. Reduce to 2-3 weights max per font family

Estimated impact: 100-300ms improvement in LCP

Image Optimization: ⚠️ Needs Attention

Current state:

  • Images directory exists (/images/)
  • Not clear if images are optimized

Recommendations:

  1. Use WebP format with PNG/JPG fallback
  2. Add srcset for responsive images
  3. Implement lazy loading for below-fold images (loading="lazy")
  4. Set explicit width/height attributes to prevent CLS
  5. Compress images (TinyPNG, ImageOptim)

Example improvement:

<!-- Before -->
<img src="stroller.jpg">
 
<!-- After -->
<img 
  src="stroller.webp"
  srcset="stroller-400.webp 400w, stroller-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  width="400" 
  height="300"
  loading="lazy"
  alt="UPPAbaby Vista stroller in gray">

CSS Optimization: Minor Improvements

Current: Inline styles in HTML files

Recommendations:

  1. Extract critical CSS to <head> (keep for above-fold)
  2. Move non-critical CSS to external file with async loading
  3. Remove unused CSS rules (audit with Chrome DevTools Coverage)
  4. Minify CSS (build step)

Third-Party Scripts

Google Analytics (GA4): Present

  • Already using gtag.js
  • Consider moving to defer or loading after page load

Recommendations:

  1. Load GA4 script with defer attribute
  2. Consider Plausible/Fathom for lighter analytics (GDPR-friendly too)

Accessibility Analysis

Semantic HTML: ✅ Generally Good

  • Using <main>, <nav>, <footer> appropriately
  • Heading hierarchy seems logical

Color Contrast: ⚠️ Verify

Brand colors:

Action items:

  1. Test text-on-background combinations with contrast checker
  2. Ensure 4.5:1 ratio for normal text
  3. Ensure 3:1 ratio for large text

Form Accessibility: ⚠️ Check Email Capture

Review needed:

  • Does email input have associated <label>?
  • Is there proper aria-label or aria-describedby?
  • Focus states visible?
  • Error messages accessible?

Interactive Elements: ⚠️ Needs Verification

Checklist page concerns:

  • Collapsible sections - do they have aria-expanded?
  • Category navigation - keyboard accessible?
  • Mobile FAB - does it have proper focus management?

Recommendations:

  1. Add aria-expanded to expandable sections
  2. Ensure all interactive elements have visible focus states
  3. Add role="button" where needed
  4. Ensure keyboard navigation works (Tab, Enter, Escape)

Alternative Text: ⚠️ Unknown State

Action items:

  1. Verify all images have descriptive alt attributes
  2. Decorative images should have alt=""
  3. Product images should describe the product

Screen Reader Testing

Recommended tests:

  1. Navigate site with VoiceOver (Mac) or NVDA (Windows)
  2. Ensure page structure is logical
  3. Verify form interactions are announced properly
  4. Check that dynamic content updates are announced

Quick Wins Checklist

Performance Quick Wins (1-2 hours)

TaskImpactEffort
Add loading="lazy" to imagesMedium15 min
Add explicit width/height to imagesMedium30 min
Reduce Google Fonts weightsLow-Medium15 min
Add defer to GA scriptLow5 min
Compress imagesMedium30 min

Accessibility Quick Wins (1-2 hours)

TaskImpactEffort
Add missing alt textHigh30 min
Add aria-expanded to collapsiblesMedium20 min
Verify color contrastMedium20 min
Add focus stylesMedium20 min
Label form inputsHigh15 min

Lighthouse Audit Recommendations

Before deploying fixes, run Lighthouse:

  1. Chrome DevTools → Lighthouse tab
  2. Test both Mobile and Desktop
  3. Target scores: Performance >90, Accessibility >90, SEO >95

Current estimate based on code review:

  • Performance: ~75-85 (font/image optimization needed)
  • Accessibility: ~80-90 (minor fixes needed)
  • Best Practices: ~90+ (looks clean)
  • SEO: ~85-95 (canonical issues noted in SEO review)

Mobile Performance Considerations

Checklist page mobile redesign (completed Feb 20):

  • Card-based layout ✅
  • Tap to expand ✅
  • FAB category nav ✅
  • Sticky bottom bar ✅

Verify:

  1. Touch targets ≥44px
  2. No horizontal scroll
  3. Text readable without zoom
  4. Forms don’t zoom on focus (use font-size: 16px minimum)

Core Web Vitals Targets

MetricTargetNotes
LCP (Largest Contentful Paint)<2.5sFont optimization will help
FID (First Input Delay)<100msLikely good (minimal JS)
CLS (Cumulative Layout Shift)<0.1Add image dimensions

Implementation Priority

This Week

  1. Add loading="lazy" to all images
  2. Add width/height to images
  3. Fix color contrast issues if found
  4. Add aria-expanded to collapsibles

Next Week

  1. Optimize and convert images to WebP
  2. Self-host fonts or reduce weights
  3. Full Lighthouse audit and fixes
  4. Screen reader testing

Later

  1. Service worker for offline support
  2. Performance monitoring (Web Vitals JS)
  3. A/B test page speed impact on engagement

Review completed by Reggie (subagent task) February 21, 2026

Note: This review is based on code inspection. Run actual Lighthouse audits for precise scores and additional issues.

Graph View