perf : 편지 작성 페이지 성능 최적화 & 웹접근성 관련 성능개선 작업

[wldnjs990]

✅ 요약

• resolved refactor : 담당 파트 성능 개선 #166
• perf 라벨이 나오기 전에 커밋한 내용들이라 커밋 제목들이 refactor이라 표기되었습니당

🪄 변경사항

• 일부 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

🖼️ 결과 화면 (선택)

성능개선 전

성능개선 후

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

• 화이팅

[tifsy]

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

[wldnjs990]

추가 완료했습니다!

[tifsy]

고생하셨습니다!! 🥕🥕

[tifsy]

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

[wldnjs990]

맞습니다!!