A partir do Chrome 83, link rel="preload" e font-display: optional podem ser combinados para remover completamente o jank de layout
Ao otimizar os ciclos de renderização, o Chrome 83 elimina a mudança de layout ao pré-carregar fontes opcionais.
A combinação de <link rel="preload"> com font-display: optional é a maneira mais eficaz de
garantir que não haja jank de layout ao renderizar fontes personalizadas.
Compatibilidade com navegadores
Confira os dados do MDN para informações atualizadas sobre suporte entre navegadores:
Renderização de fontes
A mudança de layout, ou novo layout, ocorre quando um recurso em 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 de duas maneiras:
- Uma fonte de reserva é trocada por uma nova ("flash de texto sem estilo")
- O texto "invisível" é mostrado 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 uma variedade de 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 compatíveis pode acionar um 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 períodos para processar fontes que precisam ser baixadas antes de serem renderizadas:
- Block:renderiza texto "invisível", mas muda para a fonte da Web assim que ela termina de carregar.
- Swap:renderiza texto usando uma fonte de sistema de reserva, mas muda para a fonte da Web assim que ela termina de carregar.
- Fail:renderiza texto usando uma fonte de sistema de reserva.
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" é exibido muito brevemente antes de mudar para uma fonte de reserva. Se a fonte não for baixada em 100 ms, a fonte de reserva será usada e nenhuma troca ocorrerá.
font-display: optional no Chrome quando a fonte é baixada após o período de bloqueio de 100 msNo entanto, caso a fonte seja baixada antes da conclusão do período de bloqueio de 100 ms, a fonte personalizada será renderizada e usada na página.
font-display: optional no Chrome quando a fonte é baixada antes do período de bloqueio de 100 msO Chrome renderiza a página duas vezes em ambas as instâncias, independentemente de a fonte de reserva ser usada ou se a fonte personalizada terminar de carregar a tempo. Isso causa um leve flicker de texto invisível e, nos casos em que uma nova fonte é renderizada, um jank de layout que move parte do conteúdo da página. Isso ocorre mesmo que a fonte esteja armazenada no cache em disco do navegador e possa ser carregada bem antes da conclusão do período de bloqueio.
Otimizações foram lançadas no 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 um determinado período de tempo tenha passado. Esse período de tempo limite está definido como 100 ms, mas pode mudar em breve para otimizar a performance.
font-display: optional no Chrome quando as fontes são pré-carregadas e a fonte é baixada após o período de bloqueio de 100 ms (sem flash de texto invisível)
font-display: optional no Chrome quando as fontes são pré-carregadas e a fonte é baixada antes do período de bloqueio de 100 ms (sem flash de texto invisível)O pré-carregamento de fontes opcionais no Chrome remove a possibilidade de jank de layout e flash de texto sem estilo. Isso corresponde ao comportamento necessário, conforme especificado no módulo de fontes CSS de nível 4, em que as fontes opcionais nunca devem causar um 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 melhora muito a chance de ela ser carregada antes do primeiro ciclo de renderização, principalmente se ela ainda não estiver armazenada no cache do navegador.
Conclusão
A equipe do Chrome quer saber 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 enviar sugestões de recursos.