Skip to content

Commit c905a83

Browse files
aelmanaaaelmanaa
authored
perf directory (#2889)
* perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * perf directory * update * update * update * update * update
1 parent d6ce0f9 commit c905a83

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+602
-158
lines changed

‎astro.config.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,25 @@ export default defineConfig({
107107
adapter: vercel(),
108108
vite: {
109109
plugins: [yaml()],
110+
build: {
111+
target: "esnext", // Use latest ES features, no transpilation for modern browsers
112+
// Optimize CSS delivery
113+
cssMinify: true,
114+
// Increase the threshold for inlining assets to reduce render-blocking CSS
115+
assetsInlineLimit: 20000, // Inline CSS files up to 20KB to eliminate render-blocking
116+
// Removed manual chunking to prevent serverless function bloat
117+
// rollupOptions: {
118+
// output: {
119+
// manualChunks: ...
120+
// }
121+
// },
122+
},
123+
esbuild: {
124+
target: "esnext", // Match build target for consistency
125+
},
126+
css: {
127+
devSourcemap: false,
128+
},
110129
},
111130
legacy: {
112131
collections: false,

‎src/components/Address.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ const AddressComponent = ({
4444
style={{ height: "16px", width: "16px", minWidth: "12px" }}
4545
data-clipboard-text={address}
4646
onClick={handleClick}
47+
aria-label="Copy address to clipboard"
4748
>
48-
<img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
49+
<img src="/assets/icons/copyIcon.svg" alt="" />
4950
</button>
5051

5152
<style jsx>{`

‎src/components/Aside.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const icons = {
2323
<img src={icons[type].src} style="width: 1.5em;height: 1.5em;" alt={type} />
2424
</div>
2525
<div class="asideContent">
26-
<p class="title heading-100" aria-hidden="true">
26+
<p class="title heading-100">
2727
{title}
2828
</p>
2929
<slot />

‎src/components/CCIP/Breadcrumb/Breadcrumb.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
display: flex;
33
gap: var(--space-2x);
44
align-items: center;
5-
color: var(--gray-500);
5+
color: var(--gray-700);
66
flex-wrap: wrap;
77
}
88

99
.ccip-hero__breadcrumb a {
10-
color: var(--gray-500);
10+
color: var(--gray-700);
1111
}
1212

1313
.ccip-hero__breadcrumb a:hover {
14-
color: var(--gray-700);
14+
color: var(--gray-800);
1515
}
1616

1717
.ccip-hero__breadcrumb a:last-child {

‎src/components/CCIP/Cards/NetworkCard.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
background: var(--white);
77
border: 1px solid var(--gray-200);
88
border-radius: var(--space-1x);
9+
/* Optimize rendering performance */
10+
contain: layout style paint;
11+
will-change: background-color;
912
}
1013

1114
.network-card__container:hover {

‎src/components/CCIP/Cards/NetworkCard.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { memo } from "react"
12
import "./NetworkCard.css"
23

34
interface NetworkCardProps {
@@ -7,10 +8,10 @@ interface NetworkCardProps {
78
logo: string
89
}
910

10-
function NetworkCard({ name, totalLanes, totalTokens, logo }: NetworkCardProps) {
11+
const NetworkCard = memo(function NetworkCard({ name, totalLanes, totalTokens, logo }: NetworkCardProps) {
1112
return (
1213
<div className="network-card__container">
13-
<img src={logo} alt="" />
14+
<img src={logo} alt="" loading="lazy" />
1415
<div>
1516
<h3>{name}</h3>
1617
<p>
@@ -19,6 +20,6 @@ function NetworkCard({ name, totalLanes, totalTokens, logo }: NetworkCardProps)
1920
</div>
2021
</div>
2122
)
22-
}
23+
})
2324

2425
export default NetworkCard

‎src/components/CCIP/Cards/TokenCard.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
border-radius: var(--space-1x);
1515
justify-content: center;
1616
cursor: pointer;
17+
/* Optimize rendering performance */
18+
contain: layout style paint;
19+
will-change: background-color;
1720
}
1821

1922
.token-card__container:hover {

‎src/components/CCIP/Cards/TokenCard.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { memo } from "react"
12
import { fallbackTokenIconUrl } from "~/features/utils/index.ts"
23
import "./TokenCard.css"
34

@@ -8,15 +9,15 @@ interface TokenCardProps {
89
onClick?: () => void
910
}
1011

11-
function TokenCard({ id, logo, link, onClick }: TokenCardProps) {
12+
const TokenCard = memo(function TokenCard({ id, logo, link, onClick }: TokenCardProps) {
1213
if (link) {
1314
return (
1415
<a href={link}>
1516
<div className="token-card__container">
1617
{/* We cannot use the normal Image/onError syntax as a fallback as the element is server rendered
1718
and the onerror does not seem to work correctly. Using Picture will also not work. */}
18-
<object data={logo} type="image/png">
19-
<img src={fallbackTokenIconUrl} alt="" />
19+
<object data={logo} type="image/png" aria-label={`${id} token logo`}>
20+
<img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
2021
</object>
2122
<h3>{id}</h3>
2223
</div>
@@ -26,23 +27,23 @@ function TokenCard({ id, logo, link, onClick }: TokenCardProps) {
2627

2728
if (onClick) {
2829
return (
29-
<div className="token-card__container" onClick={onClick} role="button">
30-
<object data={logo} type="image/png">
31-
<img src={fallbackTokenIconUrl} alt="" />
30+
<button type="button" className="token-card__container" onClick={onClick} aria-label={`View ${id} token details`}>
31+
<object data={logo} type="image/png" aria-label={`${id} token logo`}>
32+
<img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
3233
</object>
3334
<h3>{id}</h3>
34-
</div>
35+
</button>
3536
)
3637
}
3738

3839
return (
3940
<div className="token-card__container">
4041
<object data={logo} type="image/png">
41-
<img src={fallbackTokenIconUrl} alt="" />
42+
<img src={fallbackTokenIconUrl} alt="" loading="lazy" />
4243
</object>
4344
<h3>{id}</h3>
4445
</div>
4546
)
46-
}
47+
})
4748

4849
export default TokenCard

‎src/components/CCIP/ChainHero/ChainHero.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
font-size: 14px;
7878
line-height: 22px;
7979
padding-bottom: var(--space-4x);
80-
color: var(--gray-500);
80+
color: var(--gray-700);
8181
}
8282

8383
.ccip-chain-hero__feeTokens__item {
@@ -121,7 +121,7 @@
121121
.ccip-chain-hero__token-logo__symbol {
122122
font-weight: 500;
123123
font-size: 18px;
124-
color: var(--gray-500);
124+
color: var(--gray-700);
125125
}
126126

127127
.ccip-chain-hero__feeTokens__list {

‎src/components/CCIP/ChainHero/ChainHero.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,12 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
339339
height="20px"
340340
className="ccip-chain-hero__feeTokens__item__logo"
341341
>
342-
<img src={fallbackTokenIconUrl} alt={token.name} width="20px" height="20px" />
342+
<img
343+
src={fallbackTokenIconUrl}
344+
alt={`${token.name} token logo`}
345+
width="20px"
346+
height="20px"
347+
/>
343348
</object>
344349
<div>{token.name}</div>
345350
<Address endLength={4} contractUrl={contractUrl} address={address} />
@@ -356,7 +361,7 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
356361
>
357362
<img
358363
src={fallbackTokenIconUrl}
359-
alt={`${nativeCurrency.symbol} icon`}
364+
alt={`${nativeCurrency.symbol} token logo`}
360365
width="20px"
361366
height="20px"
362367
/>

0 commit comments

Comments
 (0)