Skip to content
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.

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

Improve homepage FCP/LCP performance and image loading with responsiv… #3027

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

AKCodez
Copy link
Contributor

@AKCodez AKCodez commented Mar 5, 2025

…e optimizations.
Live Site:
image

This branch:
image

@AKCodez AKCodez requested a review from mDuo13 March 5, 2025 20:41
Comment on lines +118 to +123
width="1216"
height="667"
loading="eager"
fetchPriority="high"
src={require('./static/img/home-hero.svg')}
sizes="(max-width: 539px) 400px, (max-width: 991px) 650px, 1216px"
Copy link
Collaborator

Choose a reason for hiding this comment

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

Something is wrong with the new sizes—they cause the main image to be too large, so that the title and tagline are "below the fold" at a 1080p screen size. Compare:

Current production Preview Build
2025-03-12_151046_842615492 2025-03-12_151051_617349301
"The blockchain for business" is visible without scrolling "The blockchain" is cut off

Comment on lines -521 to -524
#home-hero-graphic {
content: url("../img/lightmode/home-hero.svg");
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

Currently, the home hero image has two versions. The version for light mode has slightly darker colors for the "X" to improve contrast. (Compare: for dark mode vs for light mode)

I don't know if this change was intentional or accidental. If it's intentional, then you should also delete the light mode image now that it's not used.

@@ -672,7 +668,7 @@ pre {
##{$company} {
.biz-logo {
max-height: 40px;
content: url("../img/uses/lightmode/#{$company}.#{$type}");
content: url("../img/uses/lightmode/#{$company}.#{$type}");
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why are you adding whitespace to the end of these lines? That seems unnecessary and clutters the diff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants