Chrome 83부터 link rel="preload" 및 font-display: optional을 결합하여 레이아웃 버벅거림을 완전히 삭제할 수 있습니다.
Chrome 83은 렌더링 주기를 최적화하여 선택 글꼴을 미리 로드할 때 레이아웃 전환을 없앱니다.
<link rel="preload">
와 font-display: optional
를 결합하는 것이 맞춤 글꼴을 렌더링할 때 레이아웃 버벅거림이 없도록 하는 가장 효과적인 방법입니다.
브라우저 호환성
최신 브라우저 간 지원 정보는 MDN의 데이터를 확인하세요.
글꼴 렌더링
레이아웃 이동 또는 레이아웃 재조정은 웹페이지의 리소스가 동적으로 변경되어 콘텐츠가 '이동'될 때 발생합니다. 웹 글꼴을 가져오고 렌더링하면 다음 두 가지 방법 중 하나로 레이아웃이 직접 변경될 수 있습니다.
- 대체 글꼴이 새 글꼴 ('스타일��� 지정되지 않은 텍스트 플래시')으로 교체됨
- '표시하지 않음' 텍스트는 새 글꼴이 페이지에 렌더링될 때까지 표시됩니다 ('보이지 않는 텍스트 플래시')
CSS font-display
속성은 지원되는 다양한 값 (auto
, block
, swap
, fallback
, optional
)을 통해 맞춤 글꼴의 렌더링 동작을 수정하는 방법을 제공합니다. 사용할 값을 선택하는 방법은 비동기식으로 로드된 글꼴의 기본 동작에 따라 다릅니다. 그러나 지금까지는 지원되는 모든 값이 위에 나열된 두 가지 방법 중 하나로 레이아웃 재배치를 트리거할 수 있습니다.
선택적 글꼴
font-display
속성은 세 개의 마침표로 구성된 타임라인을 사용하여 렌더링하기 전에 다운로드해야 하는 글꼴을 처리합니다.
- Block: '보이지 않는' 텍스트를 렌더링하지만 로드가 완료되는 즉시 웹 글꼴로 전환합니다.
- 전환: 대체 시스템 글꼴을 사용하여 텍스트를 렌더링하지만 로드가 완료되는 즉시 웹 글꼴로 전환합니다.
- 실패: 대체 시스템 글꼴을 사용하여 텍스트를 렌더링합니다.
이전에는 font-display: optional
로 지정된 글꼴의 차단 기간이 100ms였으며 스왑 기간이 없었습니다. 즉, '보이지 않는' 텍스트가 대체 글꼴로 전환되기 전에 매우 잠깐 표시됩니다. 글꼴이 100ms 이내에 다운로드되지 않으면 대체 글꼴이 사용되며 스와핑이 발생하지 않습니다.
![글꼴 로드 실패 시 이전의 선택적 글꼴 동작을 보여주는 다이어그램](https://cdn.statically.io/img/web.dev/static/articles/preload-optional-fonts/image/diagram-showing-previous-72256d5b2f2c6.png?hl=ko)
font-display: optional
의 이전 font-display: optional
동작그러나 100ms 차단 기간이 완료되기 전에 글꼴을 다운로드하는 경우에는 맞춤 글꼴이 렌더링되어 페이지에서 사용됩니다.
![제때 글꼴이 로드될 때 이전의 선택적 글꼴 동작을 보여주는 다이어그램](https://cdn.statically.io/img/web.dev/static/articles/preload-optional-fonts/image/diagram-showing-previous-1a9e50e1e7c12.png?hl=ko)
font-display: optional
의 이전 font-display: optional
동작Chrome은 대체 글꼴이 사용되었는지 또는 맞춤 글꼴이 시간 내에 로드를 완료했는지와 관계없이 두 인스턴스에서 페이지를 두 번 다시 렌더링합니다. 이로 인해 보이지 않는 텍스트가 약간 깜박이고 새 글꼴이 렌더링되는 경우 일부 페이지 콘텐츠를 이동하는 레이아웃 버벅거림이 발생합니다. 글꼴이 브라우저의 디스크 캐시에 저장되어 차단 기간이 완료되기 훨씬 전에 로드될 수 있는 경우에도 이 문제가 발생합니다.
Chrome 83에는 <link rel="preload'>
로 미리 로드된 선택적 글꼴의 첫 번째 렌더링 주기를 완전히 없애는 최적화 기능이 도입되었습니다.
대신 맞춤 글꼴 로드가 완료되거나 일정 시간이 지날 때까지 렌더링이 차단됩니다. 이 제한 시간은 현재 100ms로 설정되어 있지만 성능 최적화를 위해 가까운 시일 내에 변경될 수 있습니다.
![글꼴을 로드하지 못한 경우 미리 로드된 새로운 선택적 글꼴 동작을 보여주는 다이어그램](https://cdn.statically.io/img/web.dev/static/articles/preload-optional-fonts/image/diagram-showing-preloade-9b1b15b370673.png?hl=ko)
font-display: optional
동작 (보이지 않는 텍스트가 플래시되지 않음)![글꼴이 제때 로드될 때 미리 로드된 새로운 선택적 글꼴 동작을 보여주는 다이어그램](https://cdn.statically.io/img/web.dev/static/articles/preload-optional-fonts/image/diagram-showing-preloade-9f41ce5381ce7.png?hl=ko)
font-display: optional
동작Chrome에서 선택적 글꼴을 미리 로드하면 레이아웃에서 버벅거림이 발생하거나 스타일이 지정되지 않은 텍스트의 플래시가 발생할 가능성이 사라집니다. 이는 CSS Fonts Module 수준 4에 지정된 필수 동작과 일치합니다. ��기서는 선택적 글꼴로 인해 레이아웃 재지정이 발생하지 않으며 사용자 에이전트가 적절한 기간 동안 렌더링을 지연시킬 수 있습니다.
선택적 글꼴을 미리 로드할 필요는 없지만, 특히 아직 브라우저 캐시에 저장되지 않은 경우 첫 번째 렌더링 주기 전에 로드될 가능성이 크게 높아집니다.
결론
Chrome팀은 이러한 새로운 최적화 기능으로 선택적 글꼴을 미리 로드하는 사용자 경험을 듣고 싶습니다. 문제가 발생하거나 기능 제안을 거부하려면 문제를 제출하세요.