majiayu000 Lighthouse Optimization
Overview
This skill covers comprehensive optimization techniques to achieve 95%+ scores in all Lighthouse categories: Performance, Accessibility, Best Practices, and SEO.
Target Scores
- Performance: ≥ 95%
- Accessibility: ≥ 95%
- Best Practices: ≥ 95%
- SEO: ≥ 95%
Performance Optimization
Core Web Vitals
Target Metrics:
- FCP (First Contentful Paint): < 1.8s
- LCP (Largest Contentful Paint): < 2.5s
- TBT (Total Blocking Time): < 200ms
- CLS (Cumulative Layout Shift): < 0.1
- Speed Index: < 3.4s
Optimization Strategies
Minimize JavaScript Execution
- Code splitting
- Lazy loading
- Tree shaking
Optimize Asset Loading
- Preload critical resources
- Defer non-critical resources
- Use efficient cache lifetimes
Reduce Main Thread Blocking
- Minimize synchronous operations
- Use Web Workers for heavy computations
- Optimize WASM loading
Accessibility Optimization
Critical Issues
1. Touch Targets
Requirement: All interactive elements ≥ 48x48px
.btn, .tab, button {
min-width: 48px;
min-height: 48px;
padding: 12px 16px;
margin: 4px; /* Spacing between targets */
}
2. Semantic HTML
Required Elements:
<html lang="en">- Language attribute<main role="main">- Main landmark<header role="banner">- Header landmark<footer role="contentinfo">- Footer landmark
3. ARIA Labels
Add ARIA labels for screen readers:
rsx! {
button {
aria_label: "Add new reminder",
onclick: move |_| { /* ... */ },
"+ New Reminder"
}
}
4. Heading Hierarchy
Ensure proper heading structure:
- One
<h1>per page - Sequential heading levels (h1 → h2 → h3)
- No skipping levels
Accessibility Checklist
- All touch targets ≥ 48x48px
- Minimum 8px spacing between touch targets
-
<html>haslangattribute -
<main>landmark present - Proper heading hierarchy
- ARIA labels for interactive elements
- Color contrast ratio ≥ 4.5:1
- Keyboard navigation works
- Screen reader compatible
Best Practices Optimization
Console Errors
Fix all console errors:
- Handle all error cases
- Remove debug logs in production
- Fix WASM loading errors
- Fix CSS 404 errors
Source Maps
Enable source maps for debugging:
[profile.wasm-release]
debug = true # Enable source maps
Security Headers
Implement security headers:
- Content Security Policy (CSP)
- HSTS (if using HTTPS)
- COOP (Cross-Origin-Opener-Policy)
- X-Frame-Options
SEO Optimization
Required Elements
- Meta Tags:
rsx! {
head {
meta { charset: "utf-8" }
meta { name: "viewport", content: "width=device-width, initial-scale=1.0" }
meta { name: "description", content: "A simple and elegant reminder app" }
title { "Remind Me PWA - Your Personal Reminder Assistant" }
}
}
- Open Graph Tags (optional but recommended):
meta { property: "og:title", content: "Remind Me PWA" }
meta { property: "og:description", content: "A simple and elegant reminder app" }
meta { property: "og:type", content: "website" }
- Structured Data (optional):
- JSON-LD for better search results
Implementation Patterns
HTML Structure
rsx! {
html {
lang: "en",
head {
meta { charset: "utf-8" }
meta { name: "viewport", content: "width=device-width, initial-scale=1.0" }
meta { name: "description", content: "App description" }
title { "App Title" }
link { rel: "stylesheet", href: "assets/style.css" }
link { rel: "manifest", href: "assets/manifest.json" }
}
body {
header {
role: "banner",
// Header content
}
main {
role: "main",
// Main content
}
}
}
}
Touch Target CSS
:root {
--touch-target-min: 48px;
--touch-target-spacing: 8px;
}
.btn, .tab, button {
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
padding: 12px 16px;
margin: var(--touch-target-spacing);
}
Service Worker Optimization
const CACHE_NAME = 'remind-me-pwa-v2';
const urlsToCache = [
'/remind-me-pwa/',
'/remind-me-pwa/index.html',
'/remind-me-pwa/assets/style.css',
'/remind-me-pwa/assets/manifest.json',
'/remind-me-pwa/wasm/remind-me-pwa.wasm',
'/remind-me-pwa/wasm/remind-me-pwa.js'
];
// Cache with efficient lifetimes
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request).then((fetchResponse) => {
// Cache static assets with long lifetime
if (event.request.url.includes('/assets/') ||
event.request.url.includes('/wasm/')) {
const responseToCache = fetchResponse.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
}
return fetchResponse;
});
})
);
});
Testing and Validation
Lighthouse Audit Process
Run Audit:
- Open Chrome DevTools
- Go to Lighthouse tab
- Select categories
- Run audit
Review Results:
- Check all scores
- Review failing audits
- Note opportunities
Fix Issues:
- Address critical issues first
- Fix accessibility issues
- Optimize performance bottlenecks
Re-audit:
- Run audit again
- Verify improvements
- Target 95%+ in all categories
Automated Testing
# Install Lighthouse CI
npm install -g @lhci/cli
# Run Lighthouse CI
lhci autorun
Common Issues and Solutions
Issue: Touch Targets Too Small
Solution:
- Increase min-width/min-height to 48px
- Add padding to increase touch area
- Add spacing between elements
Issue: Missing Main Landmark
Solution:
- Wrap main content in
<main>element - Add
role="main"attribute
Issue: Missing Lang Attribute
Solution:
- Add
lang="en"to<html>element - Use appropriate language code
Issue: CSS 404 Error
Solution:
- Verify CSS path matches
base_path - Check file exists in build output
- Update service worker cache URLs
Issue: Console Errors
Solution:
- Fix all JavaScript/WASM errors
- Handle error cases gracefully
- Remove debug logs
Best Practices
DO:
- ✅ Always test with Lighthouse before release
- ✅ Fix accessibility issues immediately
- ✅ Optimize performance continuously
- ✅ Use semantic HTML
- ✅ Ensure proper touch target sizes
- ✅ Add all required meta tags
- ✅ Fix console errors
DON'T:
- ❌ Don't ignore Lighthouse warnings
- ❌ Don't skip accessibility fixes
- ❌ Don't use small touch targets
- ❌ Don't forget semantic HTML
- ❌ Don't leave console errors
- ❌ Don't skip source maps