웹페이지를 만들다 보면 텍스트가 기본 폰트로 먼저 보였다가, 잠시 후에 내가 설정한 폰트로 바뀌는 경우가 있다.
이걸 FOUT(Flash of Unstyled Text)라고 한다.
글자 깜빡임이 거슬린다면 <link> 태그에서 preconnect와 preload 속성을 함께 사용하는 걸 고려해볼 수 있다.
FOUT이 왜 발생하는가
브라우저는 HTML과 CSS를 모두 파싱한 다음에야 폰트가 필요하다는 걸 알게 된다.
웹폰트가 외부 서버에 있다면 다음과 같은 절차를 밟는다.
- DNS 조회
- 서버 연결 (TCP, TLS)
- 실제 폰트 파일 다운로드
이 과정이 다 끝나야 폰트가 적용되기 때문에, 그 사이에는 시스템 기본 폰트가 잠깐 보이게 된다.
preconnect: 연결 미리 열기
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>preconnect는 브라우저에게 이 서버와 미리 연결하라고 알려주는 역할이다.
DNS 조회, TCP 연결, TLS 핸드셰이크까지 HTML 파싱 중에 미리 끝내둘 수 있다.
이렇게 해두면 나중에 폰트 요청이 발생했을 때 연결 대기 시간이 줄어든다.
preload: 리소스 미리 다운로드
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.woff2" as="font" type="font/woff2" crossorigin="anonymous">preload는 브라우저에게 이 리소스를 지금 당장 다운로드하라고 명시적으로 알려주는 역할이다.
브라우저가 렌더링 타이밍과 상관없이 바로 폰트를 다운로드하게 된다.
속성 설명은 아래와 같다.
- href: 실제 폰트 파일 경로
- as="font": 리소스 유형
- type="font/woff2": 폰트 형식
- crossorigin: 외부 리소스일 경우 필수
함께 쓰는 게 가장 좋다.
preconnect는 연결만 준비하는 것이고,
preload는 실제 리소스를 다운로드하라는 뜻이다.
두 개를 같이 써야 폰트를 빠르게 적용할 수 있다.
예시:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.woff2" as="font" type="font/woff2" crossorigin="anonymous">주의할 점
- preload는 폰트 파일 경로 전체를 알아야 한다.
- preconnect는 폰트 서버 도메인까지만 지정한다.
- crossorigin 속성을 생략하면 캐시를 공유하지 못하거나 경고가 발생할 수 있다.
- preload를 너무 많이 쓰면 오히려 성능에 악영향을 줄 수 있다. 꼭 필요한 폰트에만 사용한다.
웹폰트를 쓸 계획이라면 preconnect와 preload를 함께 고려해두는 게 좋다.
텍스트가 깜빡이는 문제를 줄일 수 있고, 초기 로딩 성능도 개선된다.