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

refactor(5448): changes related to SEO #5580

Closed

Conversation

surajgjadhav
Copy link
Contributor

Description

This PR fixes #5448

Notes for Reviewers

  • Added alt attribute to image tags
  • Used memo for static components to avoid re-rendering after update in parent component
  • Avoid unnecessary states from some part of pages to change theme

Note: these are the basic changes not complete improvement in SEO score, but can impact the SEO score with some %. But there is scope of improvement in cloud-native-management/meshmap/design page which we can keep on improving as we go.

Signed commits

  • Yes, I signed my commits.

@l5io
Copy link
Contributor

l5io commented Jun 13, 2024

🚀 Preview for commit 1f9a8dc at: https://666b17343d4ad04b66aa68b9--layer5.netlify.app

Signed-off-by: surajgjadhav <[email protected]>
@l5io
Copy link
Contributor

l5io commented Jun 13, 2024

🚀 Preview for commit b00d129 at: https://666b299c3d4ad0632eaa6a25--layer5.netlify.app

@Deepak0320Singhal
Copy link
Contributor

@surajgjadhav Thank you for your contribution.
Let's discuss this on Websites's call on Monday. Adding this as an agenda item into the meeting minutes.

@surajgjadhav
Copy link
Contributor Author

Hi @Yashsharma1911 @sudhanshutech ,
as discussed in meeting, attaching before/after lighthouse report changes:

Before Change:
image

After Change:
image

Please note: localhost reports are not accurate but we can take a guess

Thanks

@l5io
Copy link
Contributor

l5io commented Jun 22, 2024

🚀 Preview for commit eaa66fb at: https://6676d99b02ce93b6f79bf12b--layer5.netlify.app

@@ -92,8 +86,8 @@ const MeshmapHeroSection = () => {
<p>MeshMap is the world’s only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.</p>
</div>
<div className="hero-image">
<img className={imageInView ? "locator-moving" : "locator"} src={isDark ? MeshmapLocatorDark : MeshmapLocatorLight} alt="locator" />
<img className={imageInView ? "map map-visible" : "map"} src={isDark ? MeshmapImageBottomDark : MeshmapImageBottomLight} alt="integrations" ref={locatorRef} />
<img className={inView ? "locator-moving" : "locator"} src={isDark ? MeshmapLocatorDark : MeshmapLocatorLight} alt="locator" />
Copy link
Member

Choose a reason for hiding this comment

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

can you explain this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Here is small refactoring related to state management, based on this observation I have created another ticket refactor other pages: #5589

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This factor is also impacting performance as state gets changed it will re render page and current implementation can lead to infinite loop in some of the edge cases

@Ashparshp
Copy link
Contributor

@srujan0404, have you recieved anything about this PR? Or any update to share?

@Ashparshp
Copy link
Contributor

@sudhanshutech //

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

Successfully merging this pull request may close these issues.

[SEO] High Cumulative Layout Shift (CLS) Score on https://layer5.io/cloud-native-management/meshmap/design
5 participants