폰트, 이미지 성능 최적화 관련해서 적용할 수 있는 부분 검토 및 적용

[joker77z]

🌟 Description

이미지 최적화 할 수 있는 부분 검토 및 적용 예정입니다.

📌 List

• [x] LightHouse, WebPageTest, PageSpped, Yslow.org 사이트에서 성능 측정
• [x] DOM최적화 -> DOM Monster에서 검사
• [ ] webpack으로 css, js minify 번들링되는지 확인
• [x] 인라인 방식(background)으로 이미지 사용할지 검토
• [ ] 인라인 방식이 아닐 시 picture(source, srcset) 방식으로 width별 이미지 적용 검토
• [ ] 이미지 lazy-loading 방식 적용 검토
• [ ] 리소스 힌트 preload로 중요 리소스들 먼저 불러오는 방식 검토 https://ui.toast.com/weekly-pick/ko_2021117
• [ ] LCP를 잘 지키고 있는지 검토
• [x] 메인 이미지는 img or picture 방식, 당장 불러오지 않아도 될 이미지들은 background 적용 검토 (백그라운드 이미지를 먼저 불러와야 하는 상황이라면 해당 이미지 preload로 먼저 불러올 수 있도록 검토)
• [ ] 경량화된 폰트, preload로 불러오는 방식 검토

• [ ] FOUT을 위해 font-display를 swap으로 줄지 검토

LightHouse 결과 성능 개선해야 하는 것

• [ ] 코드 스플리팅
  • https://web.dev/code-splitting-suspense/?utm_source=lighthouse&utm_medium=devtools
  • https://loadable-components.com/docs/getting-started/
• [ ] JS, CSS minify
• [ ] bundle.js 캐시 관련 처리
  • https://web.dev/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=devtools
• [ ] 대규모 페이로드 발생

  • https://web.dev/total-byte-weight/?utm_source=lighthouse&utm_medium=devtools

빌드하고 서버에 올린 페이지 Light 검사 결과 https://hanspoon-31cd9.web.app/

• [ ] JS, CSS Minify
• [ ] main.js, main.css cache하기

[joker77z]

다음 스프린트에 적용 예정입니다.