Problem
이미지 최적화에 이은 웹폰트 최적화다.
우리 프로젝트는 대략 5~6개 정도의 폰트를 사용하고 있었다.
하지만 크롬 개발자 도구의 네트워크 탭을 확인한 결과
웹폰트를 불러오는 시간이 꽤 많이 긴 것을 확인할 수 있었다.
웬만한 이미지보다도 더 걸린다니...
그래서 찾아본 결과 웹폰트도 최적화를 하는 방법이 존재했다.
Note
폰트는 아무리 압축한다고 해도, 일정 용량은 생길 수 밖에 없다.
또한, 많은 폰트를 사용하게 되면 스타일링할 때 있어서 꽤나 불편한 점이 많다.
따라서, 디자이너 분에게 너무 많은 폰트를 쓰기 보다는,
웹사이트 대표 폰트를 2~3개 정해서 쓰는 것을 부탁하기로 하자.
생각보다 디자이너 분이 급하게 작업하다보면, 이 부분을 놓치는 경우가 있는 것 같다.
Before
일단 우리 프로젝트에서는 js에서 웹폰트를 다운 받아오는 것만 5~6개 정도 있었으며
자체 폴더로 저장해놓고 있는 폰트가 2개 정도 있었다.
이 것을 import 해오는 정확한 시간을 계산하기는 어렵지만,
폴더에 있는 폰트를 불러오는 것만 해도 0.1초가 걸리고,
js로 받아오는 것은 0.3초 정도 걸렸다.
물론 캐시되면 다시 불러올 때 크게 오래 걸리는 것은 아니지만,
그래도 초기 유저가 웹사이트에 접속 했을 때 불편한은 분명 존재하며,
심지어 한글 폰트도 아닌 영어 폰트가 이정도 걸리는 것은 너무 오래 걸린다는 생각이 들었다.
또한, 스타일링 하는데 있어서 정말 지옥이었다.
각기 다른 폰트를 이곳저곳에서 font-family로 일일히 지정한다는 건 정말 머리 아프다.
대표 폰트 하나를 정하고, 이를 root에서 먹여준 다음에
몇몇 곳에서만 폰트를 지정하는 것이 훨씬 나은 방법이라는 생각이 들었다.
How to solve
먼저 대표 폰트로 사용할 폰트를 디자이너 분과 함께 정했다.
이로 Spartan가 선정되었고, 몇몇 부분에서는 Menlo와 Poppins, Josefin-sans를 쓰기로 하였다.
그 후, font-family: Spartan으로 작성되어 있는 부분을 모두 삭제했고
가장 상위 컴포넌트인 App.js의 가장 상위 div에 font-family: Spartan을 적용시켰다.
또한, 폰트를 구글 웹폰트와 같은 곳에서 다운 받지 말고, 직접 프로젝트 폴더 내에서 관리를 해보자.
먼저 asset/font 폴더를 생성하고, 웹폰트를 다운 받아 이곳에 담았다.
이때 확장자가 중요한데, 브라우저마다 지원하는 웹폰트 형식이 달라 모두 import 해야한다.
또한 weight를 다르게 주고 싶다면, 100~900까지 9개의 ttf 파일을 다 넣어줘야 하는데
최근에 variable fonts로 이를 하나의 파일로 구현하는 것이 가능해서 이것을 이용하기로 했다.
문법이 다를까 걱정했는데 다행히도 font-weight도 적용 가능하다.
오히려 그거보다 더 다양하는 것을 지원하는데, 브라우저마다 다르긴 함
After
이제 더이상 구글 폰트에서 폰트를 다운 받지 않기에 0.3초를 절약할 수 있고
ttf 파일도 0.1초 걸리던 것이 0.01 ~ 0.03초 라는 짧은 시간 이내에 받아오기에
합치면 무려 0.4초 정도를 절약하게 되었다.
또한 브라우저마다 호환성 문제도 ttf 파일 하나로 해결할 수 있게 되었다.
(safari가 이상하긴 하지만...)
하지만...
배포 후에 로딩하는 데에 1초 가까이 걸리는 문제가 발생했다.
심지어 폰트가 바뀌는 것이 눈에 보일 정도...
이를 해결하려면 어쩔 수 없이 확장자가 다른 것을 다 넣어주거나
그냥 속 편하게 js로 불러오는게 나을 수도 있겠다는 생각이 들었다.
로컬과 배포가 이정도로 차이 나는 이유에 대해서 생각해봐야 될 것 같기도...
Rollback
일단 구글 웹폰트로 다시 적용해보기로 했다.
속도를 비교해보고 만약 구글 웹폰트가 더 빠르다면
해결방법을 찾기 전엔 이걸로 사용하는 것이 좋아보인다.
변경 후
로컬에서는 0.1초가 걸렸고
배포했을 땐 0.4초가 걸렸다.
....
오히려 구글 폰트가 레이아웃을 그리기 전에 폰트를 가져와줘서
이게 오히려 더 나은 것 같기도 하다.
잠깐!!!
방금 전 variable font의 파일 크기가 굉장히 크다는 것을 발견했다.
그래서 폰트마다 다양한 확장자의 파일을 다운받고, 브라우저마다 다르게 적용하는 것으로 바꿔보았다.
파일의 크기가 작게는 10배부터 50배까지 차이가 나니, 속도에 확연한 차이가 있을 것 같다.
이 링크가 많은 도움이 되었다. 불편함을 많이 줄여줌
일단 로컬에서는 굉장히 비교가 안될 정도로 빠르다.
과연 배포 후 결과는...
분명 아까보다 줄기는 했으나 구글 폰트와 크게 다르지 않다.
폴더에 있는 11kb 파일을 가져오는 거라 빠르지 않을까 생각했는데
서버의 문제일까?
다만 브라우저에 따라 속도가 오른 곳도 있다. 이걸로 만족해야 할지도 모르겠다.
실제로 토스 홈페이지를 들어가서 네트워크를 확인한 결과
폰트 파일 크기는 나랑 크게 차이 나지 않는다.
오히려 나보다 큰 파일들도 훨씬 빠르게 로드되는 것을 보면, 서버 문제가 맞는 것 같기도 하다
범수님한테 물어봐야겠다
