Boost Lighthouse Performance (Partially Fixes Issue #433)

[Roaring30s]

Lighthouse Performance & Accessibility Improvements

Summary

This PR improves Lighthouse scores across Performance, Accessibility, Best Practices, and SEO by optimizing images, adding semantic HTML, improving accessibility attributes, and enabling production source maps.

Fixes #433

Changes Made

SEO Improvements

• Added meta description - Resolved Lighthouse SEO warning, boosting SEO score to near 100/100

Performance Improvements

• Image optimization with Sharp - Resized ENS avatars from 704×704 to 96×96 and converted to WebP format, reducing file sizes by ~95% and improving performance metrics
  • Created reusable optimizeImage utility in lib/api/image-optimization.ts
  • Integrated Sharp optimization into /api/ens-data/image/[name] endpoint
  • Images now served as WebP with proper caching headers

Best Practices Improvements

• Enabled production source maps - Added productionBrowserSourceMaps: true to next.config.js to resolve Lighthouse Best Practices warning for large first-party JavaScript. Improves debugging and error tracking without impacting end users.

• Added main landmark - Wrapped page content in semantic <main> element to resolve Lighthouse Best Practices warning. Improves accessibility for screen readers and assistive technologies by providing clear page structure navigation.

Accessibility Improvements

• Added alt tags to all images - Ensured all Box as="img" elements have descriptive alt text across:

  • components/Profile/index.tsx
  • components/AccountCell/index.tsx
  • components/DelegatingWidget/Header.tsx
  • components/IdentityAvatar/index.tsx
  • Migration diagram pages

• Fixed links without discernible names - Added aria-label attributes to links:

  • Logo link in components/Logo/index.tsx
  • External contract address links in layouts/main.tsx
  • Social media links in components/Profile/index.tsx
  • Added rel="noopener noreferrer" for security on external links

• Fixed touch target areas - Increased minimum size to 44×44px and added proper spacing for:

  • "Performance Leaderboard" button
  • "View All" buttons in Orchestrators and Transactions tables
  • Added aria-hidden="true" to decorative arrow icons

• Fixed aria-role mismatches - Added appropriate role attributes:

  • role="button" for interactive badges and action buttons
  • role="group" for chart titles with tooltips
  • role="group" for "Initialized"/"Locked" status indicators

Testing

Lighthouse Score Reproduction:

• Used Chrome Incognito mode
• Disabled cache to simulate first-time visitors
• Screenshots of before/after Lighthouse scores included

Future Performance Improvements

To further boost the Performance section of Lighthouse, consider:

1. Eliminate forced reflows from useWindowSize hook

   • Replace useWindowSize from react-use with CSS media queries or window.matchMedia API
   • Affected components:
     • components/BottomDrawer/index.tsx
     • components/DelegatingWidget/Input.tsx
     • layouts/account.tsx
     • pages/treasury/[proposal].tsx
     • pages/voting/[poll].tsx
   • The useWindowSize hook uses ResizeObserver and getBoundingClientRect() synchronously, causing forced reflows during initial render

2. Host fonts internally with Next.js Font Optimization

   • Replace Google Fonts <link> tags in pages/_document.tsx with next/font (Inter and Roboto Mono)
   • Team permission needed to execute this step
   • Benefits:
     • Eliminates external font requests
     • Self-hosts fonts for better performance
     • Automatic font optimization and subsetting
     • Reduces render-blocking resources

Files Changed

• pages/_app.tsx - Added meta description
• next.config.js - Enabled production source maps
• lib/api/image-optimization.ts - New utility for image optimization
• pages/api/ens-data/image/[name].tsx - Integrated Sharp optimization
• layouts/main.tsx - Added main landmark, aria-labels, removed useWindowSize
• components/Logo/index.tsx - Added aria-label
• components/Profile/index.tsx - Added alt tags and aria-labels
• components/AccountCell/index.tsx - Added alt tags
• components/DelegatingWidget/Header.tsx - Added alt tags
• components/IdentityAvatar/index.tsx - Added alt tags and width/height attributes
• pages/index.tsx - Fixed touch targets and spacing
• pages/orchestrators.tsx - Fixed touch targets
• components/RoundStatus/index.tsx - Fixed aria-role mismatches
• components/OrchestratorList/index.tsx - Fixed aria-role mismatches
• components/ExplorerChart/index.tsx - Fixed aria-role mismatches
• Migration diagram pages - Added alt tags

Lighthouse scores locally before improvements

Lighthouse scores locally after improvements

[vercel]

@Roaring30s is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.