name: lighthouse-optimization description: Optimize web applications to achieve 95%+ Lighthouse scores across all categories. Use when optimizing performance, accessibility, best practices, or SEO for web applications.

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> has lang attribute
<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

lighthouse-optimization

$ Installieren

name: lighthouse-optimization description: Optimize web applications to achieve 95%+ Lighthouse scores across all categories. Use when optimizing performance, accessibility, best practices, or SEO for web applications.

Lighthouse Optimization

Overview

Target Scores

Performance Optimization

Core Web Vitals

Optimization Strategies

Accessibility Optimization

Critical Issues

1. Touch Targets

2. Semantic HTML

3. ARIA Labels

4. Heading Hierarchy

Accessibility Checklist

Best Practices Optimization

Console Errors

Source Maps

Security Headers

SEO Optimization

Required Elements

Implementation Patterns

HTML Structure

Touch Target CSS

Service Worker Optimization

Testing and Validation

Lighthouse Audit Process

Automated Testing

Common Issues and Solutions

Issue: Touch Targets Too Small

Issue: Missing Main Landmark

Issue: Missing Lang Attribute

Issue: CSS 404 Error

Issue: Console Errors

Best Practices

DO:

DON'T:

Resources

Repository

Actions

Related Skills