Nextjs 폰트 최적화 시도하기

현재 무한스크롤을 보여주는 educations와 posts의 JS 파일이 용량이 큰 것으로 표시가 됩니다. 이를 해결하기 위해서 여러 가지 최적화를 알아보고 이 게시글에 정리합니다.

---

Noto Sans Kr, Noto Serif KR 폰트 최적화 하기

빠른 3G로 설정하고 받아왔을 때 유일하게 폰트가 혼자서 22.22초가 걸리는 것을 보고 너무 심하다는 것을 느꼈습니다. 그래서 이를 해결하는 방법을 고민했습니다. (현재 파비콘은 아직 코드만 넣고, png 파일을 넣지 않았습니다.)

 

이 시점에서 font를 가져오는 방법은 public 폴더에 otf 파일을 직접 넣고, css 파일에 @font-face로 정의를 해뒀습니다.

 

 

next/font 적용하기

올해 1월에 nextjs v13이 등장하고 @next/font에 대해서 알게 되어서 사용해 봤지만 아시아권 폰트들이 subset 적용이 안 되는 문제가 있었습니다. 그래서 지금도 에러가 나는지 확인해 봤습니다. 현재는 @가 붙은 것은 next 14에서 사라지기에 내장된 next 13에 있는 next/font를 사용했습니다.

https://velog.io/@dusunax/next.js-google-font-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0feat.-tailwind

next.js : google font 적용하기🧚‍♀️(feat. tailwind)

윗글의 도움을 빌려서 저의 지옥 같던? 시행착오를 또다시 겪지 않을 수 있었습니다. 일단 이슈로 올라간 것은 아직 open 되어 있었으며, 윗글을 참고해 보니 preload키의 값을 false로 준다면 사용은 가능해 보였습니다. 하지만 preload를 false로 준다면 영어를 사용할 수 없다는 것을 알게 되었습니다.

next/font/google에서 Noto_Sans_KR을 preload: false 한 상태로 테스트를 해보니 속도가 괜찮았습니다!

 

빠른 3G 기준 24초에서 6초로 줄어드는 것은 획기적이었습니다. 따라서 저 윗글의 설명대로 저는 영어를 사용하지 못하기에 다른 대안을 찾아 떠났습니다.

 

next/font의 localfont는 쓰지 말자.

localFont를 쓰면 성능에 좋지 않다는 vercel의 documentation에 글이 있었는데... 진짜 써보니 기존보다 더~ 오래 1분을 넘겨버렸습니다.

 

폰트파일의 용량을 줄여보자

저는 구글 폰트에서 다운로드를 하여서 그대로 적용하다 보니 otf 파일이었습니다. 기존에 저는 다양한 폰트 확장자가 있나 보다~ 정도로만 알고 있었어서, 이렇게 용량차이가 많이 나는 줄 몰랐습니다!! woff2를 적용한다면 2배의 시간을 줄일 수 있겠다 싶었습니다. 그리고 woff2를 지원하지 않는 Internet Explorer는 역사로 사라졌기 때문에 걱정을 안 해도 되었습니다! 그리하여 @font-face를 통해서 설정을 해주었습니다.

처음에 했었던 실험 환경과 동일하게 했더니 일단 용량이 2.0MB 정도 줄어들었고, 2 개 폰트를 동시에 받음에도 22초 -> 15초로 줄어들었습니다!

 

subset 적용하기

쓰이지 않는 글자조합들을 제거하는 방법입니다. 아래 링크에서 프로그램을 설치해서 subset 폰트를 만들 수 있습니다. 아래에서는 프로그램 2가지를 설치해야 합니다!

https://opentype.jp/subsetfontmk.htm

サブセットフォントメーカー

위 이미지 처럼 체크하고 폰트 명 마다의 설정을 해주시면 됩니다. 자세한 버튼에 대한 설명은 제일 밑에 참조에 링크를 가보시면 있습니다! 제일 아래의 체크 버튼을 해두셨다면 WOFF와 WOFF2 확장저 컨버터 프로그램이 아래처럼 실행됩니다.

---

네모 표시가 된 곳만 맞춰주고 제일 아래 버튼을 누르면 생성이 됩니다!

 

완성형/한글 목록/KS X 1001 - 나무위키

위의 목록을 일본어로된 프로그램의 중간에 넣고, 알파벳, 숫자, 특수문자, 기호 등을 저장하게 되면 새롭게 파일을 만들어줍니다. 번역은 휴대폰으로 찍어서 했습니다.. ㅎㅎㅎㅎ

---

파일을 저장하고 보니 용량이 woff2파일보다  원본 파일에 비해서 10분의 1가량이 줄었습니다!

---

그래서 실행 결과는 아래와 같습니다!

favicon을 제외하고 5초가량 걸리며, 폰트의 경우에는 2초 후반대로 매우 유의미한 결과를 얻을 수 있었습니다!

---

참고

https://boramyy.github.io/dev/front-end/etc/font/

웹폰트 더빠르게 로드하기

https://velog.io/@dusunax/next.js-google-font-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0feat.-tailwind

next.js : google font 적용하기🧚‍♀️(feat. tailwind)

https://velog.io/@hwisaac/NextJS-%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94

NextJS: 폰트 최적화

https://d2.naver.com/helloworld/4969726 네이버 D2

https://blog.coderifleman.com/2015/04/04/using-korean-web-fonts/

한글 웹 폰트 경량화해 사용하기

https://github.com/TetraTheta/WebfontSubset-glyphs/tree/7b6d73c28f07fe539dc4193a8e06a5eda2894293

GitHub - TetraTheta/WebfontSubset-glyphs: Tailored glyphs for korean webfont