ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-17 18:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve home page performance

Browse Source 
- Fix Cumulative Layout Shifts (CLS)
- Add lazy loading to images
This commit is contained in:
akcodez
2025-02-03 14:32:10 -08:00
parent fc05d7434e
commit 3de3664c43
3 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.page.tsx
View File

@@ -76,7 +76,7 @@ const cards3 = [
description: 'Access everything you need to get started working with the XRPL', description: 'Access everything you need to get started working with the XRPL',
}, },
{ href: '/docs/tutorials', title: 'Guided Tutorials', description: 'Follow step-by-step guides for frequent tasks' }, { href: '/docs/tutorials', title: 'Guided Tutorials', description: 'Follow step-by-step guides for frequent tasks' },
{ href: '/docs/concepts', title: 'XRPL Fundamentals', description: 'Read about the XRPL’s foundational concepts' }, { href: '/docs/concepts', title: 'XRPL Fundamentals', description: 'Read about the XRPL\u2019s foundational concepts' },
{ {
href: '/docs/references/client-libraries/', href: '/docs/references/client-libraries/',
title: 'Choose a Language', title: 'Choose a Language',
@@ -112,7 +112,7 @@ export default function Index() {
<div className="overflow-hidden"> <div className="overflow-hidden">
<section className="container-new pb-26-until-sm mt-10 mb-10-sm text-center"> <section className="container-new pb-26-until-sm mt-10 mb-10-sm text-center">
<div className="w-100"> <div className="w-100">
<img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" width="856" height="469" /> <img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" width="856" height="469" loading="lazy" />
</div> </div>
<div className="col-lg-6 mx-auto text-center pl-0 pr-0"> <div className="col-lg-6 mx-auto text-center pl-0 pr-0">
<div className="d-flex flex-column-reverse"> <div className="d-flex flex-column-reverse">
@@ -129,8 +129,8 @@ export default function Index() {
</div> </div>
</section> </section>
<div className="position-relative d-none-sm"> <div className="position-relative d-none-sm">
<img src={require('./static/img/backgrounds/home-purple.svg')} id="home-purple" /> <img src={require('./static/img/backgrounds/home-purple.svg')} id="home-purple" loading="lazy" />
<img src={require('./static/img/backgrounds/home-green.svg')} id="home-green" /> <img src={require('./static/img/backgrounds/home-green.svg')} id="home-green" loading="lazy" />
</div> </div>
<section className="container-new py-26"> <section className="container-new py-26">
<div className="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm"> <div className="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">

2
static/css/devportal2024-v1.css
View File

File diff suppressed because one or more lines are too long

34
styles/_pages.scss
View File

@@ -23,13 +23,32 @@
} }
.page-home { .page-home {
#home-hero-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-top: 54.8%;
overflow: hidden;
}
#home-hero-graphic { #home-hero-graphic {
width: 100%;
max-width: 856px;
object-fit: cover;
content: url("../img/home-hero.svg"); content: url("../img/home-hero.svg");
margin-left: auto;
width: 856px; @media (min-width: 992px) {
margin-right: auto; min-height: 470px;
margin-bottom: 24px; }
max-width: 100%;
@media (max-width: 991px) and (min-width: 540px) {
min-height: 250px;
}
@media (max-width: 539px) {
min-height: 170px;
}
} }
#benefits-list { #benefits-list {
@@ -44,7 +63,7 @@
} }
#advanced-features { #advanced-features {
$feature-cards: [ "pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2"]; $feature-cards: ("pink-purple", "neutral-blue", "light-green", "orange", "purple-blue-2");
@for $i from 1 through 5 { @for $i from 1 through 5 {
.card:nth-child(#{$i}) .card-footer { .card:nth-child(#{$i}) .card-footer {
@@ -54,8 +73,7 @@
} }
#get-started { #get-started {
$gs-cards: [ "orange-yellow", "magenta-orange", "purple-blue-green", $gs-cards: ("orange-yellow", "magenta-orange", "purple-blue-green", "light-blue", "green-blue");
"light-blue", "green-blue"];
@for $i from 1 through 5 { @for $i from 1 through 5 {
.card:nth-child(#{$i}) .card-footer { .card:nth-child(#{$i}) .card-footer {