Skip to content

Conversation

@wldnjs990
Copy link
Collaborator

@wldnjs990 wldnjs990 commented Mar 30, 2025

✅ 요약

🪄 변경사항

  • 일부 png파일 webp파일로 변경(편지 작성 페이지 성능 향상)
  • 편지 작성 페이지 버튼색상 대비 수정(웹 접근성 86점 -> 100점 달성)
  • 편지 작성 페이지 폰트 설정 컴포넌트에서 폰트 FOUT현상 수정
    문제 원인 & 해결 과정
  1. 현재 css파일에서 font-face를 사용해 cdn링크를 불러서 폰트를 적용하는 방법을 사용중이었음
  2. 이렇게 되면 CSSOM이 생성되고 난 후에 서버로 폰트 요청을 보내게 되어 페인팅을 하는 과정에서 폰트가 받아지지 않았다면 기본 폰트로 페인팅이 되어 FOUT현상이 발생함
  3. HTML파일에서 link태그로 css파일을 받게 처리하는데 rel속성에 stylesheet 대신 preLoad를 넣어 우선적으로 폰트css를 로드하게 만듬
  4. 그 결과 FOUT 현상이 해결됨
  5. 하지만 preLoad는 현재 페이지에 필요가 없는 css여도 우선적으로 로드를 하기 때문에 데이터 로드 속도가 느려질 수 있다.
  6. 현재로선 폰트 갯수가 4개밖에 안되니 큰 문제는 될 거 같진 않을것으로 보임

참고 블로그
https://mong-blog.tistory.com/entry/CSSJS-%EC%9B%B9-%ED%8F%B0%ED%8A%B8%EB%A5%BC-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EB%8A%94-5%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95

🖼️ 결과 화면 (선택)

성능개선 전
스크린샷 2025-03-30 오후 11 18 31
성능개선 후
image

💬 리뷰어에게 전할 말 (선택)

  • 화이팅

@wldnjs990 wldnjs990 added the 🚀 perf 성능 개선 이슈 label Mar 30, 2025
@wldnjs990 wldnjs990 self-assigned this Mar 30, 2025
@wldnjs990 wldnjs990 linked an issue Mar 30, 2025 that may be closed by this pull request
5 tasks
@wldnjs990 wldnjs990 changed the title perf : 편지 작성 페이지 성능 최적화 & 웹접근성 관련 리팩토링 작업 perf : 편지 작성 페이지 성능 최적화 & 웹접근성 관련 성능개선 작업 Mar 30, 2025
@wldnjs990 wldnjs990 requested a review from tifsy March 30, 2025 14:48
Copy link
Collaborator

Choose a reason for hiding this comment

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

이거 webp 형식 파일도 추가 되어있나용?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

추가 완료했습니다!

Copy link
Collaborator

@tifsy tifsy left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!! 🥕🥕

Copy link
Collaborator

Choose a reason for hiding this comment

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

접근성 향상을 위해 고대비 색상으로 조정한 부분인 거죵?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

맞습니다!!

@tifsy tifsy merged commit 00c5bbe into develop Apr 5, 2025
@tifsy tifsy deleted the 166-refactor-jiwon branch April 5, 2025 11:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚀 perf 성능 개선 이슈

Projects

None yet

Development

Successfully merging this pull request may close these issues.

refactor : 담당 파트 성능 개선

3 participants