Skip to content

Commit ac4f03e

Browse files
kanishksingh23kanishksingh23
committed
perf: improve home page performance
Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com> perf: improve home page performance Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com> perf: improve home page performance Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com> perf: fix partner image CLS by using empty src placeholder Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com> perf: use sized svg placeholder for partner images to prevent CLS Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
1 parent b042e0d commit ac4f03e

4 files changed

Lines changed: 80 additions & 44 deletions

File tree

‎gatsby-config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,9 @@ module.exports = {
480480
{
481481
resolve: "gatsby-plugin-purgecss",
482482
options: {
483-
printRejected: true,
483+
printRejected: false,
484+
develop: false,
485+
purgeOnly: ["src/"],
484486
},
485487
},
486488
]

‎src/sections/General/Footer/index.js‎

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,9 @@ const Footer = ({ location }) => {
7979
? `https://github.com/layer5io/layer5/tree/master/${test.learningPath(pathname)}`
8080
: test.communityMember(pathname)
8181
? `https://github.com/layer5io/layer5/blob/master/${test.communityMember(pathname)}`
82-
: `https://github.com/layer5io/layer5/blob/master/src/pages${pathname == "/" ? "" : pathname
83-
}${indexUrl.some((str) => pathname.endsWith(str)) ? "/index" : ""}.js`;
82+
: `https://github.com/layer5io/layer5/blob/master/src/pages${
83+
pathname == "/" ? "" : pathname
84+
}${indexUrl.some((str) => pathname.endsWith(str)) ? "/index" : ""}.js`;
8485
};
8586

8687
return (
@@ -94,20 +95,33 @@ const Footer = ({ location }) => {
9495
<Row className="footer-head">
9596
<Col className="footer_logo-icons" $sm={3}>
9697
<Link to="/">
97-
<img src={logo} className="footer-logo" alt="logo" />
98+
<img
99+
src={logo}
100+
className="footer-logo"
101+
alt="logo"
102+
width="200"
103+
height="67"
104+
/>
98105
</Link>
99106
</Col>
100107
<Col className="footer_logo-icons" $sm={9}>
101108
<SocialLinksColor />
102109
</Col>
103110
</Row>
104-
<Row style={{
105-
flexWrap: "wrap"
106-
}}
111+
<Row
112+
style={{
113+
flexWrap: "wrap",
114+
}}
107115
>
108116
<Col $xs={12} $lg={3}>
109117
<p className="desc-info">
110-
Layer5 is the steward of Meshery and creator of Kanvas, the collaborative canvas for cloud-native infrastructure. We bridge the gap between design and operation, allowing engineers to create, configure, and deploy orchestratable diagrams in real time. Whether managing Kubernetes or multi-cloud environments, Layer5 provides the tooling needed to oversee modern infrastructure with confidence.
118+
Layer5 is the steward of Meshery and creator of Kanvas, the
119+
collaborative canvas for cloud-native infrastructure. We bridge
120+
the gap between design and operation, allowing engineers to
121+
create, configure, and deploy orchestratable diagrams in real
122+
time. Whether managing Kubernetes or multi-cloud environments,
123+
Layer5 provides the tooling needed to oversee modern
124+
infrastructure with confidence.
111125
</p>
112126
</Col>
113127
<Col className="sections_col" $xs={12} $lg={9}>
@@ -135,7 +149,10 @@ const Footer = ({ location }) => {
135149
</Link>
136150
</li>
137151
<li>
138-
<a className="category-link" href="https://docs.layer5.io/videos">
152+
<a
153+
className="category-link"
154+
href="https://docs.layer5.io/videos"
155+
>
139156
Videos
140157
</a>
141158
</li>
@@ -150,10 +167,7 @@ const Footer = ({ location }) => {
150167
</Link>
151168
</li> */}
152169
<li>
153-
<Link
154-
className="category-link"
155-
to="/learn/workshops"
156-
>
170+
<Link className="category-link" to="/learn/workshops">
157171
Cloud Native Workshops
158172
</Link>
159173
</li>
@@ -198,23 +212,26 @@ const Footer = ({ location }) => {
198212
</Link>
199213
</li>
200214
<li>
201-
<Link
202-
className="category-link"
203-
to="/community/handbook"
204-
>
215+
<Link className="category-link" to="/community/handbook">
205216
Handbook
206217
</Link>
207218
</li>
208219
<li>
209-
<a className="category-link" href="https://badges.layer5.io/">
220+
<a
221+
className="category-link"
222+
href="https://badges.layer5.io/"
223+
>
210224
Recognition Program
211225
</a>
212226
</li>
213227
</ul>
214228
</div>
215229
<div className="footer-sections odd-col">
216230
<h3 className="section-title">
217-
<Link className="title-link" to="/cloud-native-management/solutions">
231+
<Link
232+
className="title-link"
233+
to="/cloud-native-management/solutions"
234+
>
218235
SOLUTIONS
219236
</Link>
220237
</h3>
@@ -225,7 +242,7 @@ const Footer = ({ location }) => {
225242
to="/solutions/developer-defined-infrastructure"
226243
>
227244
Developer-defined Infrastructure
228-
{ /* <span className="new-label">NEW</span> */}
245+
{/* <span className="new-label">NEW</span> */}
229246
</Link>
230247
</li>
231248
<li>
@@ -245,15 +262,15 @@ const Footer = ({ location }) => {
245262
</Link>
246263
</li>
247264
<li>
248-
<Link className="category-link" to="/cloud-native-management/kanvas/collaborate">
265+
<Link
266+
className="category-link"
267+
to="/cloud-native-management/kanvas/collaborate"
268+
>
249269
Collaborative GitOps
250270
</Link>
251271
</li>
252272
<li>
253-
<Link
254-
className="category-link"
255-
to="/solutions/gitops"
256-
>
273+
<Link className="category-link" to="/solutions/gitops">
257274
GitOps with Cloud Native Insights
258275
</Link>
259276
</li>
@@ -308,7 +325,6 @@ const Footer = ({ location }) => {
308325
</div>
309326
</Row>
310327
<Row className="subscribe">
311-
312328
<form
313329
name="contactform"
314330
method="post"
@@ -329,7 +345,8 @@ const Footer = ({ location }) => {
329345
required
330346
/>
331347
<Button
332-
$secondary title="Subscribe"
348+
$secondary
349+
title="Subscribe"
333350
aria-label="subscribe-us"
334351
id="mc-embedded-subscribe-2"
335352
/>

‎src/sections/Home/Banner-1/index.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,31 +13,46 @@ import Banner1SectionWrapper from "./banner1.style";
1313

1414
const Banner1 = (props) => {
1515
return (
16-
<Banner1SectionWrapper {...props} >
17-
<Container >
18-
<img loading="eager" alt="hero-image" src={Backgroundsvg} className="background-svg" />
16+
<Banner1SectionWrapper {...props}>
17+
<Container>
18+
<img
19+
loading="eager"
20+
fetchPriority="high"
21+
alt="hero-image"
22+
src={Backgroundsvg}
23+
className="background-svg"
24+
width="359"
25+
height="988"
26+
/>
1927
<Row>
2028
<Col $sm={8} $lg={8} className="section-title-wrapper">
21-
2229
<SectionTitle
2330
className="section-title"
2431
$leftAlign={true}
2532
$UniWidth="100%"
2633
>
2734
<h1>Cloud Native Management</h1>
2835
<h2>
29-
of <span>developer</span>-defined infrastructure
36+
of <span>developer</span>-defined infrastructure
3037
</h2>
3138
</SectionTitle>
32-
<p>
33-
an open source-first community of cloud native engineers
34-
</p>
39+
<p>an open source-first community of cloud native engineers</p>
3540
<span className="vintage-box-container">
3641
<VintageBox $right={true} $vintageOne={true}>
37-
<Button $primary className="banner-btn one" title="Join in" $url="/community">
42+
<Button
43+
$primary
44+
className="banner-btn one"
45+
title="Join in"
46+
$url="/community"
47+
>
3848
<FaMapMarkedAlt size={21} className="icon-left" />
3949
</Button>
40-
<Button $primary className="banner-btn two" title="See Meshery" $url="/cloud-native-management/meshery">
50+
<Button
51+
$primary
52+
className="banner-btn two"
53+
title="See Meshery"
54+
$url="/cloud-native-management/meshery"
55+
>
4156
<FiDownloadCloud size={21} className="icon-left" />
4257
</Button>
4358
</VintageBox>

‎src/sections/Home/Partners-home/index.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,33 @@ const settings = {
2121
responsive: [
2222
{
2323
breakpoint: 1400,
24-
settings: "unslick"
25-
}
26-
]
24+
settings: "unslick",
25+
},
26+
],
2727
};
2828

2929
const LazyPartnerImage = ({ partner }) => {
3030
const [imageSrc, setImageSrc] = useState("");
3131

3232
useEffect(() => {
33-
partner.imageLink().then(module => {
33+
partner.imageLink().then((module) => {
3434
setImageSrc(module.default);
3535
});
3636
}, [partner.imageLink]);
3737

38-
if (!imageSrc) return null;
39-
4038
return (
4139
<img
4240
className="partner-image"
4341
id={partner.name}
4442
loading="lazy"
45-
src={imageSrc}
43+
src={
44+
imageSrc ||
45+
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${partner.imageWidth}' height='${partner.imageHeight}'/%3E`
46+
}
4647
alt={partner.name}
4748
width={partner.imageWidth}
4849
height={partner.imageHeight}
50+
style={{ opacity: imageSrc ? 0.7 : 0 }}
4951
/>
5052
);
5153
};

0 commit comments

Comments
 (0)