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

chore: 온보딩 이미지 lazy-loading 제거 #447

Merged
merged 8 commits into from
Oct 10, 2024
Merged

Conversation

wokbjso
Copy link
Member

@wokbjso wokbjso commented Oct 10, 2024

🤔 어떤 문제가 발생했나요?

  • 온보딩 이미지가 느리게 나타났습니다.

🎉 어떻게 해결했나요?

  • priority 속성을 추가해 주었습니다.

📷 이미지 첨부 (Option)

image

⚠️ 유의할 점! (Option)

  • NA

@king2dwellsang king2dwellsang added Review Plz🙏 # Review is not yet complete chore # Chores labels Oct 10, 2024
Copy link
Collaborator

@hjy0951 hjy0951 left a comment

Choose a reason for hiding this comment

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

👍

@king2dwellsang king2dwellsang added Approved 🆗 # Review is completed and removed Review Plz🙏 # Review is not yet complete labels Oct 10, 2024
@@ -41,6 +41,7 @@ export function Steps({ current }: StepsProps) {
alt="온보딩 이미지"
fill
style={{ objectFit: 'contain' }}
priority
Copy link
Member

@Jungjjeong Jungjjeong Oct 10, 2024

Choose a reason for hiding this comment

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

우선순위를 최상위로 높이는 방법 보다는 lazy='eager' 속성을 적용해야 할 것 같아요.
현재 이미지가 늦게 뜨는 이유는, 화면에 보여지지 않는 영역의 이미지가 로딩이 지연되는 원인이 클 것 같습니다.

https://nextjs.org/docs/pages/api-reference/components/image

@wokbjso wokbjso merged commit 9d57a4a into main Oct 10, 2024
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved 🆗 # Review is completed chore # Chores
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants