← Back to Home

100/100/100/100 PageSpeed

How we achieved perfect PageSpeed scores on both desktop and mobile through WCAG-compliant design and performance optimization

Desktop Results

Desktop PageSpeed 100/100/100/100
First Contentful Paint: 0.2s
Largest Contentful Paint: 0.2s
Total Blocking Time: 0ms
Cumulative Layout Shift: 0
Speed Index: 0.4s

Mobile Results

Mobile PageSpeed 100/100/100/100
First Contentful Paint: 0.8s
Largest Contentful Paint: 0.8s
Total Blocking Time: 0ms
Cumulative Layout Shift: 0
Speed Index: 2.3s

The Journey: 95 → 100 Accessibility

This site launched with strong scores: 100/100 Performance, 100/100 SEO, and 100/100 Best Practices. However, accessibility scored 95/100 due to color contrast issues that pa11y testing missed but Lighthouse caught.

Accessibility Fixes Applied

1. WCAG-Compliant Color System

Challenge: Brand color (#6399FC) had insufficient contrast (2.80:1) on white backgrounds
Solution: Created accent-blue-dark (#456bb0) with 5.27:1 contrast ratio
Result: Maintains brand identity while meeting WCAG AA standards

2. Button Contrast Optimization

Challenge: White text on light blue buttons (2.80:1 contrast)
Solution: Dark text on light blue background (5.12:1 contrast)
Hover: Darker blue background maintains contrast and provides visual feedback

3. Text Color Adjustments

Fixed: All gray-500/600 text upgraded to gray-700 (4.5:1+ contrast)
Fixed: Card descriptions, status text, footer elements
Result: Every text element now meets or exceeds WCAG AA requirements

4. Comprehensive Testing Approach

Tools: pa11y (WCAG 2.1 AA) + Lighthouse (color contrast)
Discovery: Lighthouse caught 9 issues that pa11y missed
Lesson: Use multiple testing tools for complete coverage

Performance Optimizations

  • ✓ Tailwind CSS: Local build, tree-shaken, minified to 16KB
  • ✓ Zero Layout Shift: CLS of 0 on both desktop and mobile
  • ✓ Semantic HTML: Proper use of article, section, nav elements
  • ✓ SEO Infrastructure: JSON-LD, OG images, sitemap, robots.txt
  • ✓ Static Deployment: Cloudflare Pages with no build step for instant deploys

Note: Mobile scores are tested under Slow 4G throttling with 4x CPU slowdown. Achieving 100/100 on throttled mobile demonstrates real-world performance for all users, regardless of device or network conditions.

Tech Stack

HTML

Semantic HTML5

CSS

Tailwind CSS v3

Testing

pa11y + Lighthouse

Hosting

Cloudflare Pages

Want these results for your project?

Get in Touch