선택적 글꼴을 미리 로드하여 레이아웃 변경 및 보이지 않는 텍스트 (FOIT)의 플래시 방지

Chrome 83부터 link rel="preload" 및 font-display: optional을 결합하여 레이아웃 버벅거림을 완전히 삭제할 수 있습니다.

Houssein Djirdeh

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 이내에 다운로드되지 않으면 대체 글꼴이 사용되며 스와핑이 발생하지 않습니다.

글꼴 로드 실패 시 이전의 선택적 글꼴 동작을 보여주는 다이어그램
100밀리초 차단 기간 후 글꼴이 다운로드되면 Chrome에서 font-display: optional의 이전 font-display: optional 동작

그러나 100ms 차단 기간이 완료되기 전에 글꼴을 다운로드하는 경우에는 맞춤 글꼴이 렌더링되어 페이지에서 사용됩니다.

제때 글꼴이 로드될 때 이전의 선택적 글꼴 동작을 보여주는 다이어그램
100밀리초 차단 기간 전에 글꼴이 다운로드될 때 Chrome에서 font-display: optional의 이전 font-display: optional 동작

Chrome은 대체 글꼴이 사용되었는지 또는 맞춤 글꼴이 시간 내에 로드를 완료했는지와 관계없이 두 인스턴스에서 페이지를 두 번 다시 렌더링합니다. 이로 인해 보이지 않는 텍스트가 약간 깜박이고 새 글꼴이 렌더링되는 경우 일부 페이지 콘텐츠를 이동하는 레이아웃 버벅거림이 발생합니다. 글꼴이 브라우저의 디스크 캐시에 저장되어 차단 기간이 완료되기 훨씬 전에 로드될 수 있는 경우에도 이 문제가 발생합니다.

Chrome 83에는 <link rel="preload'>로 미리 로드된 선택적 글꼴의 첫 번째 렌더링 주기를 완전히 없애는 최적화 기능이 도입되었습니다. 대신 맞춤 글꼴 로드가 완료되거나 일정 시간이 지날 때까지 렌더링이 차단됩니다. 이 제한 시간은 현재 100ms로 설정되어 있지만 성능 최적화를 위해 가까운 시일 내에 변경될 수 있습니다.

글꼴을 로드하지 못한 경우 미리 로드된 새로운 선택적 글꼴 동작을 보여주는 다이어그램
글꼴이 미리 로드되고 100ms 차단 기간 후에 글꼴이 다운로드될 때 Chrome의 새로운 font-display: optional 동작 (보이지 않는 텍스트가 플래시되지 않음)
글꼴이 제때 로드될 때 미리 로드된 새로운 선택적 글꼴 동작을 보여주는 다이어그램
100ms 차단 기간 전에 글꼴이 미리 로드되고 글꼴이 다운로드될 때 (보이지 않는 텍스트가 플래시되지 않음) Chrome의 새로운 font-display: optional 동작

Chrome에서 선택적 글꼴을 미리 로드하면 레이아웃에서 버벅거림이 발생하거나 스타일이 지정되지 않은 텍스트의 플래시가 발생할 가능성이 사라집니다. 이는 CSS Fonts Module 수준 4에 지정된 필수 동작과 일치합니다. 여기서는 선택적 글꼴로 인해 레이아웃 재지정이 발생하지 않으며 사용자 에이전트가 적절한 기간 동안 렌더링을 지연시킬 수 있습니다.

선택적 글꼴을 미리 로드할 필요는 없지만, 특히 아직 브라우저 캐시에 저장되지 않은 경우 첫 번째 렌더링 주기 전에 로드될 가능성이 크게 높아집니다.

결론

Chrome팀은 이러한 새로운 최적화 기능으로 선택적 글꼴을 미리 로드하는 사용자 경험을 듣고 싶습니다. 문제가 발생하거나 기능 제안을 거부하려면 문제를 제출하세요.