[웹폰트] 웹폰트 로딩 속도 빠르게 하기

찾아보면 참 많은 웹속도 측정하는 사이트과 도구들이 있다.

속내를 보면 우선 로딩되는 양에 대해 절대적인 평가를 하는 경우가 대부분이다.

맞다. 절대적인 양을 줄이는것이 3G를 아직까지 쓰는 대부분의 국가들에서는

최선의 방법이 될거다.

그러니 머스크나 구글이나 지구 전체에 WIFI 망을 깔려는 시도를 하려는 것이겠지.

그거 진짜 1달러씩만 받아도 천년 만년 갈텐데

미국애들 돈 되는 일에 스케일은 정말 알아줘야 할듯...

각설하고...

 

크롬엔진을 쓰는 브라우저들 

크롬, 엣지, 웨일, 오페라까지 언제부터인가 개발자도구 ( F12나 오페라 같은경우 ALT+SHIFT+I ..모야 이건 ㅠㅠ )

에서 LightHouse라고 속도측정기가 붙어서 나온다.

절대적인 평가는 각 속도측정 사이트나 도구마다 틀리게 나와서

상대비교를 하는 편인데,

구글 100%, 다음 95%, 네이버 83% 가 나오는거였다

피시 기준이고 엣지에서 측정했다.

구글이 지네가 만든거라 그런건지 몰라도 궁금해서 페이지 소스를 보니

별나라로 만들었고 minify를 한걸 확인했다.

 

내가 만든 프레임 속도를 함 측정해봤다.

얼래? 73%가 나오네????????????

 

모야?? 황당해서 계속 알아보니 폰트가 문제였던거다.

나는 폰트를 다운받아 사이트에 보관하고

font-face 를 선언해서 @import 해서 사용중이었는데,

국내에서야 워낙 속도가 빨라서 문제가 안되는데

@import 를 문제삼아 속도 느림니다 라고 뱉는 거였다.

 

구글링을 해보면 알겠지만, 구구절절히 이런저런 방법들을 

보여주고 있다. 

대부분 CDN 방식을 쓰라고 하던지, 웹로드 방식을 쓰라든지 등등

인데 다 참조하고 내 나름대로 제일 빠른 방식을 찾아서 처리했다.

이게 최선의 방식인지는 잘 모르겠다.

하도 개발속도들이 빠르다 보니 ㅜㅜ

 

1. 우선 CDN을 통하는 방식은 난 별로다

   SI를 주로 하다보니 외부에 접근안되는 아예 외부사이트에 접근 안되는 경우가

   많다. 그런데 웹에서 외부 사이트를 통한 , 보통 구글인데, 방식은 배제하는게 

   맞다고 본다. 다운로드 받아서 사이트내에서 처리하는 것이 

   CDN 방식보다 훨씬 빠르다. 또한 사이트가 버벅대는 경우 폰트 다운로드에

   시간이 많이 걸리면 fault 되는 경우도 있어서 배제한다.

  ===> 다운로드 한다.

  참고로 국내에 폰트 관련 다운로드 받을수 있는 곳이 꽤 있다 

  찾아봐라.

 

2. @import 방식은 늦다. 속도 측정에서 늦다고 지랄이니 어쩔수 없다.

   맞춰줘야지. 그래서 웹폰트 로드 방식을 찾아서 적용했다.

   웹폰트.js 를 외부사이트 연결해서 js 로드하는 방식인데

   난 웹폰트.js를 그냥 다운로드 받았다.

   이것도 마찬가지 문제라.. 이경우 구글 폰트는 사용하기가 어렵다.

 

3. 웹폰트  로드가 빠른것은 그냥 빨라보이는 것 뿐이다.

   우선 기본 폰트로 화면 로드가 되고 웹폰트로더에 의해 웹폰트가 로드되면

   화면을 렌더링 하는 방식이다. 

   재수없게 엄청 네트워크가 느려서 세월아 네월아 하면

   렌더링에 의해 폰트가 하나씩 변하는 진기한 경험을 할수도 있다.

   함 봐라. 재미지다.

 

4. 웹폰트 로드가 렌더링하는데 이걸 어떻게하면 사람들 모르게

   스리슬쩍 지나가게 할수 있을까.. 그냥 빠르면 된다.

   이럴떄 사용하는게 캐쉬이지. 웹폰트 로더는 그냥 캐쉬를 사용하는 게 

   아니라 세션스토리지를 사용하나 보다. 웹폰트를 최초에 한번 다운받고

   그다음부터는 브라우저의 세션스토리지를 사용하도록 옵션을 조정하여

   사용한다. 그럼 사람들 눈속임은 되겠지.. 음 그래....

 

결론......

1. 폰트 다운로드 사이트 저장

@font-face { 
font-family : 'KXXXXX'; 
font-weight : normal; 
font-style : normal; 
font-display : fallback;
src : local('XXX'), url('/fonts/XXXX.woff') format('woff');
src : url('/fonts/XXXXX.woff') format('woff'); 
}

그리고 폰트.css 를 만들어준다

 

2. 웹폰트.js 다운로드 

 

//ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js

로 하면 화면에 js 내용이 출력된다

긁어다가 webfont.js 를 만든다.

 

3. 스크립트를 작성한다.

 

<script type="text/javascript" charset="utf-8" src="/js.min/webfont.js"></script>
<script type="text/javascript">
WebFontConfig = {
active: function() {
    sessionStorage.fonts = true;
}
  };
  WebFont.load({
     // For google fonts
     //google: {
      // families: ['Droid Sans', 'Droid Serif']
     //},
     // For early access or custom font
     custom: {
       families: ['XXXXX'],
        urls: ['/css/font.css']
     }
  });
</script>

     

4. 하기 부분이 세션 스토리지에 폰트를 저장하는 옵션이다

WebFontConfig = {
active: function() {
    sessionStorage.fonts = true;
}

 

=====================================================================

 

이건 실제 내 프레임에 적용하여 테스트 해봤다.

잘된다. 그리고 속도 측정도 90%를 넘어간다.

참조들 하시길....