Skip to content

Boost Lighthouse Performance (Partially Fixes Issue #433) #509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Roaring30s wants to merge 17 commits into
base: main
Choose a base branch
from
Open

Boost Lighthouse Performance (Partially Fixes Issue #433) #509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5385c04
feat: add image optimization
Roaring30s Jan 24, 2026
71712df
fix: add meta description
Roaring30s Jan 24, 2026
6698525
feat: enable production source maps for better debugging
Roaring30s Jan 24, 2026
2d512ab
feat: add main landmark
Roaring30s Jan 24, 2026
9810ecc
fix: add aria-labels and alt tags for accessibility improvements
Roaring30s Jan 24, 2026
343c143
fix: add role to forecasted yield assumptions filters
Roaring30s Jan 24, 2026
accb9b0
fix: add aria attributes to explorer chart
Roaring30s Jan 24, 2026
696bd65
fix: remove aria attribute for DotHorizontalIcon
Roaring30s Jan 24, 2026
50ddb53
fix: add aria fixes to components
Roaring30s Jan 24, 2026
aa0911a
fix: enlarge touch targets for sub buttons for orch table
Roaring30s Jan 26, 2026
1d008ed
feat: add connect button skeleton to remove cls
Roaring30s Jan 26, 2026
1b083e9
feat: add table loader skeleton
Roaring30s Jan 26, 2026
0fb397a
remove useWindowSize hook to eliminate forced reflows
Roaring30s Jan 26, 2026
bfcbd13
chore: cleanup image-optimization
Roaring30s Jan 26, 2026
ef4073a
Merge branch 'main' into fix-lighthouse-performance
Roaring30s Feb 5, 2026
3f5b8ca
Merge branch 'main' into fix-lighthouse-performance
ECWireless Feb 13, 2026
ebba531
Merge branch 'main' into fix-lighthouse-performance
Roaring30s Feb 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/AccountCell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ const Index = ({ active, address }) => {
borderColor: "$neutral5",
}}
src={identity.avatar}
alt={
identity?.name ? `${identity.name} avatar` : `${address} avatar`
}
/>
) : (
<QRCodeCanvas
Expand Down
15 changes: 15 additions & 0 deletions components/ConnectButton/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Skeleton } from "@livepeer/design-system";

const ConnectButtonSkeleton = () => (
<Skeleton
css={{
height: "40px",
minWidth: "145px",
width: "145px",
borderRadius: "8px",
display: "inline-block",
}}
/>
);

export default ConnectButtonSkeleton;
5 changes: 5 additions & 0 deletions components/DelegatingWidget/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ const Header = ({
height: 40,
}}
src={delegateProfile.avatar}
alt={
delegateProfile?.name
? `${delegateProfile.name} avatar`
: `${delegateProfile?.id || "delegate"} avatar`
}
/>
) : (
<QRCodeCanvas
Expand Down
9 changes: 5 additions & 4 deletions components/Drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { DrawerItem } from "@layouts/main";
import { Box, Flex, Link as A, Text } from "@livepeer/design-system";
import { Box, Flex, Link as A } from "@livepeer/design-system";
import { IS_L2 } from "lib/chains";
import Link from "next/link";
import Router, { useRouter } from "next/router";
Expand Down Expand Up @@ -162,8 +162,9 @@ const Index = ({

<LlamaswapModal
trigger={
<A
as={Text}
<Box
Copy link
Collaborator

@ECWireless ECWireless Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This causes inconsistent styling in the mobile drawer:

Image

Copy link
Contributor

@vercel vercel bot Feb 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix on Vercel

as="button"
type="button"
css={{
cursor: "pointer",
fontSize: "$2",
Expand All @@ -172,7 +173,7 @@ const Index = ({
}}
>
Get LPT
</A>
</Box>
}
>
<Box
Expand Down
2 changes: 2 additions & 0 deletions components/ExplorerChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@ const ExplorerChart = ({
return (
<Box css={{ position: "relative", width: "100%", height: "100%" }}>
<Box
role="group"
css={{
position: "absolute",
zIndex: 3,
Expand Down Expand Up @@ -264,6 +265,7 @@ const ExplorerChart = ({
}
>
<Flex
role="group"
css={{
alignItems: "center",
}}
Expand Down
1 change: 1 addition & 0 deletions components/IdentityAvatar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const IdentityAvatar = ({ identity, address, size = 24, css = {} }: Props) => {
transition: "opacity 150ms ease",
}}
src={avatarSrc}
alt={`${address} avatar`}
onLoad={() => setImageLoaded(true)}
onError={() => setHasAvatarError(true)}
/>
Expand Down
2 changes: 1 addition & 1 deletion components/Logo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ const LivepeerLogo = ({
if (!isLink) return markup;
return (
<Link href="/" passHref>
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copilot uses AI. Check for mistakes.
{markup}
<a aria-label="Livepeer Explorer home">{markup}</a>
Copy link
Contributor

@vercel vercel bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Raw <a> tag nested inside Next.js Link component without legacyBehavior prop causes warnings in Next.js 13+ (including v16.1.5)

Fix on Vercel

</Link>
);
};
Expand Down
81 changes: 81 additions & 0 deletions components/OrchestratorList/Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { Box, Flex, Skeleton } from "@livepeer/design-system";

const OrchestratorListSkeleton = () => {
return (
<Box
css={{
border: "1px solid $colors$neutral4",
backgroundColor: "$panel",
borderRadius: "$4",
}}
>
{/* Input section skeleton */}
<Box
css={{
marginTop: "$4",
marginLeft: "$5",
marginBottom: "$4",
}}
>
<Flex css={{ alignItems: "center", marginBottom: "$2" }}>
<Skeleton css={{ width: 20, height: 20, borderRadius: "$2" }} />
<Skeleton css={{ width: 200, height: 16, marginLeft: "$2" }} />
</Flex>
<Flex css={{ gap: "$2", marginBottom: "$2" }}>
<Skeleton css={{ width: 120, height: 32, borderRadius: "$2" }} />
<Skeleton css={{ width: 120, height: 32, borderRadius: "$2" }} />
<Skeleton css={{ width: 120, height: 32, borderRadius: "$2" }} />
</Flex>
</Box>

{/* Table header skeleton */}
<Box
css={{ padding: "$3 $5", borderBottom: "1px solid $colors$neutral4" }}
>
<Flex css={{ gap: "$4" }}>
<Skeleton css={{ width: 150, height: 16 }} />
<Skeleton css={{ width: 120, height: 16 }} />
<Skeleton css={{ width: 120, height: 16 }} />
<Skeleton css={{ width: 100, height: 16 }} />
<Skeleton css={{ width: 100, height: 16 }} />
</Flex>
</Box>

{/* Table rows skeleton (10 rows) */}
{Array.from({ length: 10 }).map((_, i) => (
<Box
key={i}
css={{
padding: "$3 $5",
borderBottom: i < 9 ? "1px solid $colors$neutral4" : "none",
}}
>
<Flex css={{ gap: "$4", alignItems: "center" }}>
<Skeleton css={{ width: 150, height: 40, borderRadius: "$2" }} />
<Skeleton css={{ width: 120, height: 20 }} />
<Skeleton css={{ width: 120, height: 20 }} />
<Skeleton css={{ width: 100, height: 20 }} />
<Skeleton css={{ width: 100, height: 20 }} />
</Flex>
</Box>
))}

{/* Pagination skeleton */}
<Flex
css={{
paddingTop: "$4",
paddingBottom: "$4",
alignItems: "center",
justifyContent: "center",
gap: "$3",
}}
>
<Skeleton css={{ width: 20, height: 20, borderRadius: "$2" }} />
<Skeleton css={{ width: 100, height: 16 }} />
<Skeleton css={{ width: 20, height: 20, borderRadius: "$2" }} />
</Flex>
</Box>
);
};

export default OrchestratorListSkeleton;
43 changes: 23 additions & 20 deletions components/OrchestratorList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Orchestrator</Box>
<Box role="button">Orchestrator</Box>
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">Orchestrator</Box>
<Box
as="button"
type="button"
css={{ all: "unset", cursor: "pointer" }}
>
Orchestrator
</Box>

Copilot uses AI. Check for mistakes.
</ExplorerTooltip>
),
accessor: "id",
Expand Down Expand Up @@ -359,7 +359,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Forecasted Yield</Box>
<Box role="button">Forecasted Yield</Box>
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
</ExplorerTooltip>
</Flex>
),
Expand All @@ -380,6 +380,7 @@ const OrchestratorList = ({
<PopoverTrigger disabled={isNewlyActive} asChild>
<Badge
size="2"
role="button"
css={{
cursor: !isNewlyActive ? "pointer" : "default",
color: "$white",
Expand Down Expand Up @@ -854,7 +855,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Delegated Stake</Box>
<Box role="button">Delegated Stake</Box>
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
</ExplorerTooltip>
),
accessor: "totalStake",
Expand Down Expand Up @@ -888,7 +889,7 @@ const OrchestratorList = ({
</Box>
}
>
<Box>Trailing 90D Fees</Box>
<Box role="button">Trailing 90D Fees</Box>
</ExplorerTooltip>
Comment on lines 891 to 893
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
),
accessor: "ninetyDayVolumeETH",
Expand Down Expand Up @@ -922,23 +923,21 @@ const OrchestratorList = ({
}}
asChild
>
<Flex css={{ alignItems: "center" }}>
<IconButton
aria-label="Orchestrator actions"
css={{
cursor: "pointer",
marginLeft: "$1",
opacity: 1,
<IconButton
aria-label="Orchestrator actions"
css={{
cursor: "pointer",
marginLeft: "$1",
opacity: 1,
transition: "background-color .3s",
"&:hover": {
bc: "$primary5",
transition: "background-color .3s",
"&:hover": {
bc: "$primary5",
transition: "background-color .3s",
},
}}
>
<DotsHorizontalIcon />
</IconButton>
</Flex>
},
}}
>
<DotsHorizontalIcon />
</IconButton>
</PopoverTrigger>
<PopoverContent
css={{ borderRadius: "$4", bc: "$neutral4" }}
Expand Down Expand Up @@ -1057,6 +1056,7 @@ const OrchestratorList = ({
>
<Badge
size="2"
role="button"
css={{
cursor: "pointer",
color: "$white",
Expand Down Expand Up @@ -1154,6 +1154,7 @@ const OrchestratorList = ({
>
<Badge
size="2"
role="button"
css={{
cursor: "pointer",
color: "$white",
Expand Down Expand Up @@ -1241,6 +1242,7 @@ const OrchestratorList = ({
>
<Badge
size="2"
role="button"
css={{
cursor: "pointer",
color: "$white",
Expand Down Expand Up @@ -1323,6 +1325,7 @@ const OrchestratorList = ({
>
<Badge
size="2"
role="button"
css={{
cursor: "pointer",
color: "$white",
Expand Down
85 changes: 46 additions & 39 deletions components/PopoverLink/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,56 @@ import { ChevronRightIcon } from "@modulz/radix-icons";
import Link from "next/link";

const PopoverLink = ({ href, children, newWindow = false }) => {
return (
<A
as={Link}
href={href}
passHref
{...(newWindow
? {
target: "_blank",
rel: "noopener noreferrer",
}
: {})}
css={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
textDecoration: "none",
borderRadius: "$2",
cursor: "pointer",
marginBottom: "$1",
paddingLeft: "$3",
paddingRight: "$3",
paddingTop: "$1",
paddingBottom: "$1",
const linkStyles = {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
textDecoration: "none",
borderRadius: "$2",
cursor: "pointer",
marginBottom: "$1",
paddingLeft: "$3",
paddingRight: "$3",
paddingTop: "$1",
paddingBottom: "$1",
transition: ".2s transform",
"&:last-child": {
marginBottom: 0,
},
svg: {
transition: ".2s transform",
transform: "translateX(0px)",
},
"&:hover": {
bc: "$neutral6",
svg: {
transition: ".2s transform",
"&:last-child": {
marginBottom: 0,
},
svg: {
transition: ".2s transform",
transform: "translateX(0px)",
},
"&:hover": {
bc: "$neutral6",
svg: {
transition: ".2s transform",
transform: "translateX(6px)",
},
},
}}
>
transform: "translateX(6px)",
},
},
};

Copy link
Contributor

@vercel vercel bot Feb 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix on Vercel

Copy link
Collaborator

@ECWireless ECWireless Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

// For external links, use regular anchor tag to avoid Next.js Link issues
if (newWindow || href.startsWith("http")) {
return (
<A href={href} target="_blank" rel="noopener noreferrer" css={linkStyles}>
Comment on lines +35 to +38
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition forces all href values starting with "http" to open in a new tab (target="_blank"), even when newWindow is false. That makes the component’s newWindow API misleading. Consider splitting “external link” handling from “open in new window” behavior, and only set target/_blank when newWindow is true (while still avoiding Next.js Link for external URLs if desired).

Copilot uses AI. Check for mistakes.
{children}
<Box
as={ChevronRightIcon}
aria-hidden="true"
css={{ marginLeft: "$2", width: 16, height: 16 }}
/>
</A>
);
}

// For internal links, use Next.js Link
return (
<A as={Link} href={href} passHref css={linkStyles}>
{children}
<Box
as={ChevronRightIcon}
aria-hidden="true"
css={{ marginLeft: "$2", width: 16, height: 16 }}
/>
</A>
Expand Down
Loading
Loading