chore-fe: Pretendard 웹폰트 로드 최적화 적용 #691
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
github-actions
bot
added
chore
|
1727080948.837039 |
|
1727080957.390739 |
| @font-face { | ||
| font-family: 'Pretendard'; | ||
| src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-${name}.woff') | ||
| format('woff'); | ||
| font-weight: ${weight}; | ||
| font-style: normal; | ||
| } |
There was a problem hiding this comment.
font-face를 왜, 언제 써야하지? 궁금해서 찾아보니, 자체적으로 글꼴을 만들어서 사용하는 회사의 경우 (로컬 서버를 사용하는 경우) 커스텀하기 용이하다고 하네용~!
There was a problem hiding this comment.
오 저도 사실 궁금했던 내용인데 짚어주셔서 감사해요! 좋은 노하우를 알아갑니다 🙏
| <link | ||
| rel="preload" | ||
| as="style" | ||
| href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" | ||
| onload="this.onload=null;this.rel='stylesheet'" | ||
| crossorigin | ||
| /> |
| <link | ||
| rel="preconnect" | ||
| href="https://cdn.jsdelivr.net" | ||
| crossorigin="anonymous" | ||
| /> |
There was a problem hiding this comment.
preload를 해주는데 preconnect를 해주는게 궁금해서 찾아봤어요!
이미 아시겠지만 preload의 네트워크 요청 이전 preconnect가 실행되어 성능개선에 도움이 된다고 하네용!👍
There was a problem hiding this comment.
맞습니다! 우리 프로젝트처럼 외부 CDN으로부터 리소스를 많이 받아와야 할 때 preconnect를 쓰면 TLS 핸드셰이크와 TLS 연결 시간을 줄일 수 있다고 하네요. :)
| <link | ||
| rel="preload" | ||
| as="style" | ||
| href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css" |
There was a problem hiding this comment.
아르 덕분에 가변체에 대해 알았네요!
직관적으로 모든 폰트의 굵기를 담고 있는 서체라면 오히려 더 용량이 무거운 건 아닌가 하는 의문이 들었는데, 개별 파일보단 약간 무거울 수 있지만 다른 굵기의 파일을 여러 개 가져오는 것 보다 훨씬 가볍군요👀
Traditionally, all possible weights and styles have been separated out into different font files, whereas variable fonts combine all of those variations into one. Because of this, overall file size is greatly reduced compared to loading multiple individual font files—and that’s a key consideration for web typography.
100단위의 정해진 수가 아닌 그 사이의 수를 마음대로 조절할 수 있다는 점도 재밌는 포인트네요.ㅎㅎ
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Seongjin Hong <[email protected]>
Original issue description
목적
작업 세부사항
참고 자료
FONT_FIX_01
목적
작업 세부사항
작업 전후 비교
개별 폰트 전송 속도
기존에는 웹폰트 하나를 다운로드 받는 데에 무려
5.99초가 소요되었습니다.개선 이후에는 웹폰트 서브셋 하나당 다운로드가
0.45초이내에 이루어지고 있습니다.전체 웹폰트 전송량
기존에는 랜딩 페이지 기준으로 웹폰트로만 약
4.7MB를 다운로드 받아야 했습니다.개선 이후에는 랜딩 페이지에서
262KB만 다운로드 되는 것을 확인하실 수 있습니다.관련 이슈