[CSS] 웹 폰트 로딩을 더 빠르게 하는 방법

 

 

 

개요

* 원인파악-첫 화면(대시보드) 진입 시 느림

무려 3.5초동안 Font 를 가져옴

📝시작은 이렇다. '우리 사이트가 너무 느려요.. 어떻게 개선안될까요?' 라는 말을 듣고 사이트를 들어가봤다.

세상에.. 사용자 경험이 미처 쌓이기도 전에 나조차도 이탈하고 싶은 속도였다.

 

DevTools 로 네트워크 조회해보니 사이트 진입 시, Font에 대한 CSS 파일을 불러오는데 꽤나 큰 몫을 하고 있었다.

원인

원인은 Font! 구글에서 fonts 를 불러오는 곳에서 큰 Delay 가 있었는데, 불필요한 리소스 요청과 함께 엄청 많은 font 를 불러오고 있었다.

서버의 경량화를 위해서인지(추측) Google fonts 를 직접 호출하고 있었는데 심지어 사용하지 않는 font 들도 선언하여 호출중이었다.. (이런.. cdn 서버가 가까운지도 모르는데..?)

 

다행히 CSS Font 에 대한 속도 이슈는 과거에도 경험한 적이 있었는데, 아래 내용을 통해 해결했다.

이번에는 꼭 기록해야지..

• 리소스의 Local 화
• 모던 파일 포맷 사용
• font-display 사용
• FOIT/FOUT 사용
• CSS의 preload

조치

리소스의 Local 화

불필요한 리소스의 외부 호출을 막기위해(네트워크 이슈로 인한 지연을 없애기 위해) font 파일을 다운로드 받아 프로젝트에 resources/fonts/ 디렉토리를 만들어 추가하였다.

모던 파일 포맷 사용

웹폰트 확장자 종류

• EOT: IE8 이하일 경우 사용
• TTF: 구형 안드로이드 버전(4.4)를 지원하는 경우에 사용
• WOFF: 대부분의 모던 브라우저에서 지원
• WOFF2: WOFF보다 압축률이 30% 정도 더 좋다.

대표적인 IE 의 Font Support

 

font-display (FOIT/FOUT)사용

FOIT(Flash of Invisible Text)

브라우저가 폰트를 다운로드 하기 전에 폰트가 보이지 않도록 설정

FOUT(Flash of Unstyled Text)

브라우저가 폰트를 다운로드 하기 전에 폰트가 적용되지 않은 글자가 보이도록 설정

해결

1. 일단 불필요한 리소스 호출 제거 - @font-face 의 cdn 외부호출을  local 화

2. 확장자를 하나로 줄여 Fail 케이스를 강제 - IE11 지원을 배제하는 것으로 'woff2' 만을 사용하기로 Rule 설정

3. FOUT 으로 무조건 글자가 보이게 설정 (로딩이라도 보이지 않는 것은 말이 안된다고 생각되어 설정)

4. css의 min 처리 - 펼쳐진 CSS를 1row로 줄여, 퍼포먼스 향상을 진행했다.

5. Local CSS function 사용 - src 에 local function 을 명시하면, 리소스를 따로 요청하지 않는다.

 

/* fonts.gstatic.com/~~ 경로를 로컬로 수정*/
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: local('Noto Sans KR'), url(/font/NotoSansKR-Thin.woff2) format('woff2'),
  url(/font/NotoSansKR-Thin.otf) format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans KR'),url(/font/NotoSansKR-Light.woff2) format('woff2'),
  url(/font/NotoSansKR-Light.otf) format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans KR'),url(/font/NotoSansKR-Regular.woff2) format('woff2'),
  url(/font/NotoSansKR-Regular.otf) format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans KR'),url(/font/NotoSansKR-Medium.woff2);
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans KR'),url(/font/NotoSansKR-Bold.woff2) format('woff2'),
  url(/font/NotoSansKR-Bold.otf) format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: local('Noto Sans KR'),url(/font/NotoSansKR-Black.woff2) format('woff2'),
  url(/font/NotoSansKR-Black.otf) format('opentype');
  font-display: swap;
}