인프런 커뮤니티 질문&답변

lab ajung님의 프로필 이미지

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

3-6-2) 폰트 최적화 2 (subset, unicode-range, data-uri)

Material--icons_4.0.0.woff2

해결된 질문

24.06.19 16:27 작성

·

68

·

수정됨

0

Material--icons_4.0.0.woff2 는 리소스 크기가 3mb인데 해당 폰트는 font-display:block으로 하지 않는이상 폰트 다운드로 전에 영어를 출력시키거나 안보이도록 해야하는되 이 부분 레이아웃 시프트 발생하지 않도

록 cls 잡는 방법이 무엇이 존재할까요???

답변 1

0

유동균님의 프로필 이미지
유동균
지식공유자

2024. 06. 20. 13:28

안녕하세요, lab ajung 님.

말씀하신 Material--icons_4.0.0.woff2의 출처가 어디일까요?
찾아봤지만, Material icons 에서 저런 형태로 제공하는건 못찾겠네요.
(https://github.com/google/material-design-icons/tree/master/font)

우선 아이콘을 쓸 때 폰트로는 거의 사용해보지 않아서 잘은 모르겠지만,
공식 가이드에서 어떻게 최적화를 할 수 있는지를 찾아보시면 좋을 것 같습니다.
깃허브 이슈라던가 찾아보시면 있지 않을까 생각됩니다.

제가 만약 최적화를 한다면,

  • 필요한 아이콘만 추출(subset)하여 사용

  • 가능하다면 폰트형태가 아닌 svg형태로 아예 필요한 것만 사용하는 형태로 변경

  • preload 적용

     

이 정도 고려해볼 수 있지 않을까 생각됩니다.

그럼 도움이 되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다! :)