Boost Lighthouse Performance (Partially Fixes Issue #433) by Roaring30s · Pull Request #509 · livepeer/explorer

Roaring30s · 2026-01-26T17:15:44Z

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:

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
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 · 2026-01-26T17:15:48Z

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

A member of the Team first needs to authorize it.

vercel · 2026-02-13T16:31:13Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer-arbitrum-one	Ready	Preview, Comment	Feb 13, 2026 4:34pm

vercel · 2026-02-13T16:37:17Z

components/PopoverLink/index.tsx

+      },
+    },
+  };
+


PopoverLink incorrectly treats internal links with newWindow=true as external, causing full page reloads instead of client-side navigation

I actually think this is wrong. But would double-check @Roaring30s

vercel · 2026-02-13T16:37:17Z

pages/api/ens-data/image/[name].tsx

+            effort: 6,
+          });
+
+          // Set appropriate content type (fallback to original if optimization failed)


Incorrect content-type fallback logic in image optimization creates ambiguity between success and failure cases

ECWireless

The improvements look generally great, especially the OrchestratorListSkeleton. Could you just address the comments below + AI comments (some AI comments could very well just be wrong)?

ECWireless · 2026-02-13T17:44:15Z

components/Drawer/index.tsx

              trigger={
-                <A
-                  as={Text}
+                <Box


This causes inconsistent styling in the mobile drawer:

ECWireless · 2026-02-13T18:00:43Z

components/PopoverLink/index.tsx

+      },
+    },
+  };
+


I actually think this is wrong. But would double-check @Roaring30s

ECWireless · 2026-02-13T18:08:42Z

layouts/main.tsx

              href="https://docs.livepeer.org/references/contract-addresses"
            >
-              <A>
+              <A


For whatever reason, this still does not seem to open a new tab

ECWireless · 2026-02-13T18:11:17Z

pages/index.tsx

+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      minHeight: "44px",
+                      padding: "$2 $3",


Not the biggest fan of the extra padding/height

ECWireless · 2026-02-13T18:12:23Z

pages/index.tsx

+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      minHeight: "44px",


Not the biggest fan of the extra padding/height. Also seems to be pushing the window to the right on mobile:

ECWireless · 2026-02-13T18:21:12Z

pages/index.tsx

-                  >
-                    Loading orchestrators…
-                  </Box>
+                  <OrchestratorListSkeleton />


Could we actually add this to the orchestrators page too?

vercel · 2026-02-13T18:22:32Z

layouts/main.tsx

              href="https://docs.livepeer.org/references/contract-addresses"
            >
-              <A>
+              <A


External absolute URL wrapped in Next.js Link component with nested anchor doesn't open in new tab properly

vercel · 2026-02-13T18:22:32Z

components/Drawer/index.tsx

              trigger={
-                <A
-                  as={Text}
+                <Box


The "Get LPT" button lacks styling consistency with surrounding drawer links, appearing visually inconsistent due to missing color, hover effects, and proper button reset styling

Copilot

Pull request overview

This PR aims to improve Lighthouse Performance/Accessibility/Best Practices/SEO scores for the Livepeer Explorer by optimizing ENS avatar images, adding semantic/accessibility attributes, improving touch targets, and enabling production browser source maps.

Changes:

Add a Sharp-based image optimization utility and integrate it into the ENS avatar image API to serve resized WebP images.
Improve accessibility/semantics across the UI (alt text, aria-labels, <main> landmark, decorative icons hidden from AT, touch target sizing).
Enable productionBrowserSourceMaps in next.config.js and add a global meta description.

Reviewed changes

Copilot reviewed 21 out of 23 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks Sharp and its transitive dependencies.
package.json	Adds `sharp` dependency.
next.config.js	Enables production browser source maps.
lib/api/image-optimization.ts	New reusable Sharp-based image optimizer utility.
pages/api/ens-data/image/[name].tsx	Uses optimizer to resize/convert ENS avatars and sets caching/headers.
pages/_app.tsx	Adds global meta description.
layouts/main.tsx	Adds `<main>` landmark, improves link a11y/security, removes `useWindowSize`, adds ConnectButton skeleton.
pages/index.tsx	Improves touch targets/spacing and uses orchestrator list skeleton while loading.
components/OrchestratorList/Skeleton.tsx	New skeleton UI for orchestrator list loading state.
components/ConnectButton/Skeleton.tsx	New skeleton UI for ConnectButton dynamic import loading state.
components/Logo/index.tsx	Adds accessible label to the logo link.
components/Profile/index.tsx	Adds alt text and aria-labels to profile links/icons.
components/AccountCell/index.tsx	Adds alt text for account avatar image.
components/DelegatingWidget/Header.tsx	Adds alt text for delegate avatar image.
components/IdentityAvatar/index.tsx	Adds alt text for identity avatar image.
components/Drawer/index.tsx	Uses a semantic button element for “Get LPT” trigger.
components/PopoverLink/index.tsx	Refactors styles and changes handling of external/internal links.
components/OrchestratorList/index.tsx	Adds roles/aria adjustments for tooltips/popovers/actions.
components/ExplorerChart/index.tsx	Adds grouping roles to chart title layout.
components/RoundStatus/index.tsx	Adds roles/aria-hidden to icons and tooltip-related role adjustments.
pages/migrate/orchestrator.tsx	Adds alt text to migration diagram image.
pages/migrate/delegator/index.tsx	Adds alt text to migration diagram image.
pages/migrate/broadcaster.tsx	Adds alt text to migration diagram image.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-13T18:25:59Z

pages/api/ens-data/image/[name].tsx

@@ -48,9 +49,30 @@ const handler = async (



The fetch response isn’t checked for ok before reading/processing the body. If the remote returns a 404/500 HTML page (or other non-image), optimizeImage will fall back and this route will still return that body with cache headers, which is incorrect for an image endpoint. Consider validating response.ok (and possibly content-type starts with image/) and returning notFound/badRequest before calling arrayBuffer().

Suggested change

if (!response.ok) {

return notFound(res, "ENS avatar not found");

}

const contentTypeHeader = response.headers.get("content-type") || "";

if (!contentTypeHeader.toLowerCase().startsWith("image/")) {

return notFound(res, "ENS avatar not found");

}

Copilot · 2026-02-13T18:26:00Z

lib/api/image-optimization.ts

+export async function optimizeImage(
+  imageBuffer: ArrayBuffer,
+  options: OptimizeImageOptions = {}
+): Promise<OptimizeImageResult> {
+  const { width = 96, height = 96, quality = 75, effort = 6 } = options;
+


New image optimization logic is introduced here but there are no unit tests covering success vs fallback paths (e.g., valid PNG/JPEG input -> WebP output; invalid/corrupt input -> original buffer returned). Since the repo already has Jest unit tests for lib utilities, adding tests will help prevent regressions and make behavior explicit.

Copilot · 2026-02-13T18:26:00Z

components/Profile/index.tsx

@@ -159,12 +162,20 @@
                href={identity.url}
                target="__blank"


target="__blank" is not the standard value and will open a named browsing context rather than reliably opening a new tab/window. This should be target="_blank" for external links.

Suggested change

target="__blank"

target="_blank"

Copilot · 2026-02-13T18:26:00Z

components/Profile/index.tsx

              <A
                variant="contrast"
                css={{ fontSize: "$2" }}
                href={`https://twitter.com/${identity.twitter}`}
                target="__blank"
                rel="noopener noreferrer"
+                aria-label={`View ${identity.twitter} on Twitter`}


target="__blank" is not the standard value and will open a named browsing context rather than reliably opening a new tab/window. This should be target="_blank" for external links.

Copilot · 2026-02-13T18:26:01Z

components/RoundStatus/index.tsx

            <ExplorerTooltip
              multiline
+              role="group"
              content={


Passing role="group" into ExplorerTooltip will be forwarded to the underlying Radix Tooltip.Content, overriding its default role="tooltip". That breaks tooltip semantics for assistive tech and can reintroduce aria-role issues. Remove the role prop here, or apply grouping semantics to a wrapper around the trigger/content instead of the tooltip content element.

Copilot · 2026-02-13T18:26:02Z

components/OrchestratorList/index.tsx

            }
          >
-            <Box>Delegated Stake</Box>
+            <Box role="button">Delegated Stake</Box>


role="button" is applied to a Box used as a tooltip trigger, but the element still isn’t keyboard-focusable/clickable (no tabIndex, no key handlers, and it’s likely rendered as a div). For accessibility, use an actual <button type="button"> (e.g., as="button") or ensure the element is focusable and supports keyboard interaction.

Suggested change

<Box role="button">Delegated Stake</Box>

<Box as="button" type="button">Delegated Stake</Box>

Copilot · 2026-02-13T18:26:03Z

components/Profile/index.tsx

              <A
                variant="contrast"
                css={{ fontSize: "$2" }}
                href={`https://github.com/${identity.github}`}
                target="__blank"
                rel="noopener noreferrer"
+                aria-label={`View ${identity.github} on GitHub`}


target="__blank" is not the standard value and will open a named browsing context rather than reliably opening a new tab/window. This should be target="_blank" for external links.

Copilot · 2026-02-13T18:26:03Z

components/RoundStatus/index.tsx

              </Text>
            </Box>
            <ExplorerTooltip
+              role="group"


Passing role="group" into ExplorerTooltip will be forwarded to the underlying Radix Tooltip.Content, overriding its default role="tooltip". That breaks tooltip semantics for assistive tech and can reintroduce aria-role issues. Remove the role prop here, or apply grouping semantics to a wrapper around the trigger/content instead of the tooltip content element.

Suggested change

role="group"

Copilot · 2026-02-13T18:26:03Z

components/OrchestratorList/index.tsx

              }
            >
-              <Box>Forecasted Yield</Box>
+              <Box role="button">Forecasted Yield</Box>


role="button" is applied to a Box used as a tooltip trigger, but the element still isn’t keyboard-focusable/clickable (no tabIndex, no key handlers, and it’s likely rendered as a div). For accessibility, use an actual <button type="button"> (e.g., as="button") or ensure the element is focusable and supports keyboard interaction.

Suggested change

<Box role="button">Forecasted Yield</Box>

<Box as="button" type="button">Forecasted Yield</Box>

Copilot · 2026-02-13T18:26:03Z

components/Logo/index.tsx

@@ -179,7 +179,7 @@ const LivepeerLogo = ({
  if (!isLink) return markup;
  return (
    <Link href="/" passHref>


With the current Next.js Link behavior (and existing usage in this repo), nesting a raw <a> inside <Link> typically requires legacyBehavior, otherwise it can produce warnings/errors (“Link with child”). To avoid that, either add legacyBehavior here or remove the <a> wrapper and put the aria-label on the Link/child component in a supported way.

Suggested change

<Link href="/" passHref>

<Link href="/" passHref legacyBehavior>

Roaring30s added 14 commits January 24, 2026 14:37

feat: add image optimization

5385c04

fix: add meta description

71712df

feat: enable production source maps for better debugging

6698525

feat: add main landmark

2d512ab

fix: add aria-labels and alt tags for accessibility improvements

9810ecc

fix: add role to forecasted yield assumptions filters

343c143

fix: add aria attributes to explorer chart

accb9b0

fix: remove aria attribute for DotHorizontalIcon

696bd65

fix: add aria fixes to components

50ddb53

fix: enlarge touch targets for sub buttons for orch table

aa0911a

feat: add connect button skeleton to remove cls

1d008ed

feat: add table loader skeleton

1b083e9

remove useWindowSize hook to eliminate forced reflows

0fb397a

chore: cleanup image-optimization

bfcbd13

Roaring30s requested a review from ECWireless as a code owner January 26, 2026 17:15

ECWireless added this to the Explorer Maintenance - Milestone 5 milestone Feb 2, 2026

ECWireless added this to Explorer - Data Exposure Feb 2, 2026

github-project-automation bot moved this to Todo in Explorer - Data Exposure Feb 2, 2026

ECWireless moved this from Todo to In Review in Explorer - Data Exposure Feb 2, 2026

rickstaa closed this Feb 4, 2026

github-project-automation bot moved this from In Review to Done in Explorer - Data Exposure Feb 4, 2026

rickstaa reopened this Feb 4, 2026

Roaring30s and others added 2 commits February 5, 2026 18:50

Merge branch 'main' into fix-lighthouse-performance

ef4073a

Merge branch 'main' into fix-lighthouse-performance

3f5b8ca

vercel bot deployed to Preview February 13, 2026 16:34 View deployment

vercel bot reviewed Feb 13, 2026

View reviewed changes

ECWireless requested changes Feb 13, 2026

View reviewed changes

ECWireless requested a review from Copilot February 13, 2026 18:16

Copilot started reviewing on behalf of ECWireless February 13, 2026 18:17 View session

ECWireless reviewed Feb 13, 2026

View reviewed changes

vercel bot reviewed Feb 13, 2026

View reviewed changes

Copilot AI reviewed Feb 13, 2026

View reviewed changes

+          if (!response.ok) {
+            return notFound(res, "ENS avatar not found");
+          }
+          const contentTypeHeader = response.headers.get("content-type") || "";
+          if (!contentTypeHeader.toLowerCase().startsWith("image/")) {
+            return notFound(res, "ENS avatar not found");
+          }

	<Box role="button">Delegated Stake</Box>
	<Box as="button" type="button">Delegated Stake</Box>

	<Box role="button">Forecasted Yield</Box>
	<Box as="button" type="button">Forecasted Yield</Box>

	<Link href="/" passHref>
	<Link href="/" passHref legacyBehavior>

Conversation

Roaring30s commented Jan 26, 2026

Lighthouse Performance & Accessibility Improvements

Summary

Changes Made

SEO Improvements

Performance Improvements

Best Practices Improvements

Accessibility Improvements

Testing

Future Performance Improvements

Files Changed

Lighthouse scores locally before improvements

Lighthouse scores locally after improvements

Uh oh!

vercel bot commented Jan 26, 2026

Uh oh!

vercel bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ECWireless left a comment

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

ECWireless Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

vercel bot commented Feb 13, 2026 •

edited

Loading

vercel bot Feb 13, 2026 •

edited

Loading

vercel bot Feb 13, 2026 •

edited

Loading