선택적 글꼴을 미리 로드하여 레이아웃 변경 및 보이지 않는 텍스트 (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: '보이지 않는' 텍스트를 렌더링하지만 로드가 완료되는 즉시 웹 글꼴로 전환합니다.
  • Swap: 대체 시스템 글꼴을 사용하여 텍스트를 렌더링하지만 로드가 완료되는 즉시 웹 글꼴로 전환합니다.
  • Fail: 대체 시스템 글꼴을 사용하여 텍스트를 렌더링합니다.

이전에는 font-display: optional로 지정된 글꼴에 100ms의 차단 기간이 있었고 전환 기간은 없었습니다. 즉, 대체 글꼴로 전환되기 전에 '보이지 않는' 텍스트가 매우 짧게 표시됩니다. 글꼴이 100ms 이내에 다운로드되지 않으면 대체 글꼴이 사용되고 전환이 발생하지 않습니다.

글꼴을 로드할 수 없음을 보여주는 다이어그램
글꼴이 100ms 차단 기간 후 에 다운로드될 때 Chrome의 이전 font-display: optional 동작

하지만 글꼴이 100ms 차단 기간이 완료되기 전에 다운로드되는 경우 커스텀 글꼴이 렌더링되어 페이지에서 사용됩니다.

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

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

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

글꼴 로드에 실패할 때 새로운 미리 로드된 선택적 글꼴 동작을 보여주는 다이어그램
글꼴이 미리 로드되고 글꼴이 100ms 차단 기간 후 에 다운로드될 때 Chrome의 새로운 font-display: optional 동작 (보이지 않는 텍스트 깜박임 없음)
글꼴이 제때 로드될 때 새로운 미리 로드된 선택적 글꼴 동작을 보여주는 다이어그램
글꼴이 미리 로드되고 글꼴이 100ms 차단 기간 전 에 다운로드될 때 Chrome의 새로운 font-display: optional 동작 (보이지 않는 텍스트 깜박임 없음)

Chrome에서 선택적 글꼴을 미리 로드하면 레이아웃 지연과 스타일이 지정되지 않은 텍스트 깜박임이 발생할 가능성이 없어집니다. 이는 선택적 글꼴이 재레이아웃을 일으켜서는 안 되며 사용자 에이전트가 대신 적절한 기간 동안 렌더링을 지연할 수 있는 CSS 글꼴 모듈 수준 4에 지정된 필수 동작과 일치합니다.

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

결론

Chrome팀은 이러한 새로운 최적화가 적용된 선택적 글꼴을 미리 로드하는 경험에 관한 의견을 듣고 싶습니다. 문제를 신고하세요. 문제가 발생하거나 기능 제안을 하고 싶다면