Evite a mudança de layout e o flash de texto invisível (FOIT, na sigla em inglês) pré-carregando fontes opcionais

A partir do Chrome 83, os links rel="preload" e font-display: opcionais podem ser combinados para remover completamente a instabilidade do layout.

Houssein Djirdeh

Ao otimizar os ciclos de renderização, o Chrome 83 elimina a mudança de layout ao pré-carregar fontes opcionais. Combinar <link rel="preload"> com font-display: optional é a maneira mais eficaz de garantir que não haja instabilidade de layout ao renderizar fontes personalizadas.

Compatibilidade com navegadores

Confira os dados da MDN para obter informações atualizadas sobre o suporte entre navegadores:

Renderização da fonte

A mudança de layout, ou reformulação, ocorre quando um recurso de uma página da Web muda dinamicamente, resultando em uma "mudança" de conteúdo. A busca e a renderização de fontes da Web podem causar mudanças de layout diretamente de duas maneiras:

  • Uma fonte substituta é trocada por uma nova fonte ("flash de texto sem estilo")
  • O texto "invisível" é exibido até que uma nova fonte seja renderizada na página ("flash de texto invisível")

A propriedade CSS font-display oferece uma maneira de modificar o comportamento de renderização de fontes personalizadas usando vários valores compatíveis diferentes (auto, block, swap, fallback e optional). A escolha do valor a ser usado depende do comportamento preferido para fontes carregadas de forma assíncrona. No entanto, cada um desses valores com suporte pode acionar o novo layout de uma das duas maneiras listadas acima, até agora.

Fontes opcionais

A propriedade font-display usa uma linha do tempo de três pontos para processar fontes que precisam ser transferidas por download antes de serem renderizadas:

  • Bloquear:renderiza texto "invisível", mas mude para a fonte da Web assim que o carregamento é concluído.
  • Swap:renderiza texto usando uma fonte substituta do sistema, mas muda para a fonte da Web assim que ela termina de carregar.
  • Com falha:renderiza texto usando uma fonte substituta do sistema.

Anteriormente, as fontes designadas com font-display: optional tinham um período de bloqueio de 100 ms e nenhum período de troca. Isso significa que o texto "invisível" é mostrado muito brevemente antes de alternar para uma fonte substituta. Se o download da fonte não for feito em até 100 ms, a fonte substituta será usada e não haverá troca.

Diagrama mostrando o comportamento da fonte opcional anterior quando a fonte não é carregada
Comportamento anterior do font-display: optional no Chrome quando o download da fonte é feito após o período de bloco de 100 ms

No entanto, caso o download da fonte seja feito antes do término do período de bloqueio de 100 ms, a fonte personalizada será renderizada e usada na página.

Diagrama mostrando o comportamento da fonte opcional anterior quando a fonte é carregada a tempo
Comportamento anterior do font-display: optional no Chrome quando o download da fonte é feito antes do período de bloco de 100 ms

O Chrome renderiza novamente a página duas vezes em ambas as instâncias, independentemente de a fonte substituta ser usada ou se a fonte personalizada termina de carregar a tempo. Isso causa uma leve oscilação de texto invisível e, nos casos em que uma nova fonte é renderizada, uma instabilidade do layout que move parte do conteúdo da página. Isso vai acontecer mesmo que a fonte seja armazenada no cache de disco do navegador e possa ser carregada bem antes do término do período de bloqueio.

As otimizações chegaram ao Chrome 83 para remover completamente o primeiro ciclo de renderização de fontes opcionais pré-carregadas com <link rel="preload'>. Em vez disso, a renderização é bloqueada até que a fonte personalizada termine de carregar ou que um determinado período tenha passado. Esse tempo limite está definido como 100 ms, mas pode mudar em breve para otimizar o desempenho.

Diagrama mostrando o novo comportamento de fonte opcional pré-carregada quando o carregamento da fonte falha
Novo comportamento font-display: optional no Chrome quando as fontes são pré-carregadas e o download da fonte é feito após o período de bloco de 100 ms (sem flash de texto invisível)
Diagrama mostrando o novo comportamento de fonte opcional pré-carregada quando a fonte é carregada a tempo
Novo comportamento font-display: optional no Chrome quando as fontes são pré-carregadas e a fonte é baixada antes do período de blocos de 100 ms (sem flash de texto invisível)

O pré-carregamento de fontes opcionais no Chrome elimina a possibilidade de instabilidade do layout e flash de texto sem estilo. Isso corresponde ao comportamento necessário, conforme especificado no nível 4 do módulo de fontes CSS, em que fontes opcionais nunca devem causar novo layout, e os user agents podem atrasar a renderização por um período adequado.

Embora não seja necessário pré-carregar uma fonte opcional, isso aumenta muito a chance de carregar antes do primeiro ciclo de renderização, especialmente se ela ainda não estiver armazenada no cache do navegador.

Conclusão

A equipe do Chrome está interessada em saber sobre suas experiências com o pré-carregamento de fontes opcionais com essas novas otimizações. Registre um problema se você tiver algum problema ou quiser descartar sugestões de recursos.