웹 페이지 최적화 기법 - 폰트 최적화

폰트 최적화

커스텀 폰트를 사용하고자 한다면 성능 문제를 야기할 수 있다.

폰트의 변화로 인해 폰트 밀림, 깜박임 등이 발생하는데,

• FOUT (Flash Of Unstyled Text)
  • 엣지 브라우저에서 폰트를 로드하는 방식
  • 폰트의 다운로드 여부와 무관하게 먼저 텍스트를 보여준 다음 커스텀 폰트를 적용
• FOIT (Flash Of Invisible Text)
  • 크롬, 사파리, 파이어폭스 등에서 폰트를 로드하는 방식
  • 폰트가 완전히 다운로드 되기 전까지 텍스트를 보여주지 않고 폰트 다운로드가 끝나면 커스텀 폰트를 보여준다.
  • 단 크롬의 경우 FOIT 의 지속시간이 3초이며, 이후엔 FOUT 방식이 된다.

 

폰트 사용 시점 제어

서비스 및 컨텐츠의 특성에 따라 적절한 방식을 적용하며, font-style 속성을 사용하여 폰트가 적용되는 시점을 직접 제어해준다. 이는 @font-face 에서 설정 가능하다.

@font-face {
	font-family : ....;
	src : url('...');
	font-display : fallback; 
}

font-display
- auto : 브라우저 기본 동작
- block : FOIT, timeout 3s
- swap : FOUT
- fallback : FOIT, timeout 0.1s 3초 후에도 불러오지 못하면 기본 폰트로 유지, 이후 캐시
- optional : FOIT, timeout 0.1s 3초 후에도 불러오지 못하면 기본 폰트로 유지할지 결정, 이후 캐시

 

폰트 다운로드 시점을 알 수 있는 라이브러리를 사용하면, 폰트가 다운로드 완료된 시점에 특정 동작을 수행해줄 수 있다.

fontfaceobserver

import FontFaceObserver from 'fontfaceobserver';

const font = new FontFaceObserver('폰트명');

function Tmp() {
	useEffect(() => {
		font.load(null, 20000).then(function() {
		// 폰트가 다운로드 완료된 시점
		});
	}. []);
}

 

 

폰트 사이즈 줄이기

transfonter

• 압축률이 좋은 포맷을 사용하기
  • 운영체제에서 사용되는 OTF, TTF 는 폰트 사이즈가 큰 편이므로 매번 리소스를 다운 받아야 하는 웹 환경에선 적절하지 않음
  • WOFF/WOFF2 (Web Open Font Format) 은 웹을 위한 폰트로 TTF 폰트를 압축하여 웹에서 더욱 빠르게 로드할 수 있도록 만들어준다. 다만 브라우저 호환성 이슈가 있으므로 WOFF 가 안되면 -> TTF 로 적용 하는 방식을 사용한다.
  • Transfonter 서비스를 사용하여 폰트를 다양한 형태로 변환해주는 방식을 사용하여 TTF 파일을 WOFF2 로 변경해주면 된다.

@font-face {
	font-family : 폰트명;
	src : url('XXX.woff2') format('woff2'),
				url('XXX.ttf') format('truetype');
	font-display : block;
}

 

• 서브셋 폰트를 사용하여 사용되는 폰트의 정보만 로드하기
  • Transfonter 서비스에서 동일하게 지정해줄 수 있으며, Characters에 폰트를 적용한 문자를 입력해주면 해당 문자에 대한 서브셋 폰트가 나오게 된다.
  • 타이틀이나 로고 등 특정 문자에서 사용

• Data-URI 형태
  • data  스킴이 접두어로 붙은 문자열 형태의 데이터, 파일을 문자열 형태로 변환하여 문서에 인라인으로 삽입
  • 폰트를 문자열 데이터로 변환하는 것도 Transfonter 서비스를 사용하는데, Base64 encode 옵션을 ON 하여 변환해준다.
  • 폰트를 로드하는 App 에서 App의 로드하는 시간에 추가되는 개념이므로 남용하는 것은 옳지 않다.

 

https://transfonter.org/

Online @font-face generator