[FE] FIX: 라이트하우스 성능 개선 #1687

[jnkeniaem]

해당 사항 (중복 선택)

• FEAT : 새로운 기능 추가 및 개선
• FIX : 기존 기능 수정 및 정상 동작을 위한 간단한 추가, 수정사항
• BUG : 버그 수정
• REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
• TEST : 테스트 코드 추가
• DOCS : 코드가 아닌 문서를 수정한 경우
• REMOVE : 파일을 삭제하는 작업만 수행
• RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
• ETC : 이외에 다른 경우 - 어떠한 사항인지 작성해주세요.

설명

HOME

Eliminate render-blocking resources - Potential savings of 280 ms

• first paint를 지연시키는 리소스들을 defer속성을 사용하기

Avoid large layout shifts - 1 layout shift found

• 홈 페이지 접속시 로딩 애니메이션이 움직이지 않게 위치 고정

Serve images in next-gen formats

• Coin image를 png형식이 아니라 svg로 가져오기

폰트 전체를 import 하는 대신 필요한 부분만 import

• 384kb 에서 72.5kb 로 80% 이상 크기 최적화

#1687

설명 링크

https://www.notion.so/hyunja/Chrome-Lighthouse-7e66955ceaed42098b5ce8111273439d

[seonmiki]

아직은 구현하기에만 급급해서 성능 최적화에 대해서 제대로 고민하고 개선해본 적이 없는데, 정리해주신 글 보면서 많이 배워갑니다! pr에 요약해주신 부분 말고도 lazy import 나 robots.txt 같은 부분들도 다 처음보는데 신기하고 재밌네요~ 담에 기회가 된다면 다른 부분들도 더 개선할 방법을 찾아보면 좋을 것 같습니다ㅎㅎ 고생 많으셨습니다!!

[wet6123]

고생하셨습니다~ 정리한 내용 같이 넣어주셔서 이해하기가 한결 편했습니다. 라이트 하우스 관련해서도 새롭게 배울 내용이 많네요. 이번 기회에 저도 한번 사용해봐야겠습니다!