Se você executou o seu site por meio do PageSpeed Insights, poderá ver uma recomendação para certifique-se de que o texto permaneça visível durante o carregamento da fonte da web .
Isso é causado por FOIT (flash de texto invisível) e acontece quando o navegador espera o download de uma fonte. Uma edição simples no CSS da sua fonte (ou um plugin ) pode consertar o FOIT usando font-display: swap.
Ao aplicar font-display: swap, você está dizendo ao navegador para usar a fonte substituta até que a fonte personalizada esteja pronta (para evitar texto invisível) e, em seguida,”trocar”para a fonte substituta pela fonte personalizada. Portanto, em vez de ser invisível , isso garante que o texto permaneça visível durante o carregamento da fonte da web.
1. O que é FOIT (Flash Of Invisible Text)?
Flash de texto invisível acontece quando o navegador oculta o texto até que a fonte carregue.
As fontes podem carregar lentamente devido aos seus grandes tamanhos de arquivo. É por isso que você pode ver o resto do download da página antes de suas fontes, criando um flash de texto invisível (mostrado na imagem abaixo).
O tempo em que seu texto fica invisível é o “período de bloqueio”. Durante o período de bloqueio, você precisa decidir qual propriedade de exibição de fonte usar. Isso determina como os navegadores lidarão com as fontes.
No @ font-face, você pode escolher entre algumas opções de exibição de fonte. Alguns causam mais FOIT, enquanto outros causam FOUT. O truque é encontrar um equilíbrio entre os dois, razão pela qual a “troca” é mais frequentemente recomendada. Se você visualizar o CSS da sua fonte, provavelmente está usando uma das outras opções.
- FOIT -oculte o texto até que as fontes estejam prontas (sem fallback).
- FOUT -mostra a fonte substituta e troque-as quando as fontes estiverem prontas (FOUT).
como os navegadores reagem :
2. Como consertar FOIT
Visualize o arquivo de fonte problemático em seu relatório do PageSpeed Insights.
Abra o arquivo CSS da fonte.
Se a fonte estiver sendo injetada de um plug-in (você deve notar isso em seu relatório do PageSpeed Insights), vá para o Editor de plug-in, selecione o plug-in que está injetando a fonte e visualize o arquivo CSS.
Se você ainda não conseguir encontrar o arquivo de fonte, use o Plug-in String Locator para pesquisar a fonte.
Adicionar exibição de fonte: troca para o CSS da fonte. Isso é diferente para Google Fonts e outras fontes.
Google Fonts -adicione & display=swap ao final do URL da fonte.
Sem exibição de fonte:
https://fonts.googleapis.com/css2?family=Lato:wght@100
Com exibição de fontes:
https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap
Outras fontes -adicionar exibição de fonte: trocar dentro do CSS.
Sem exibição de fonte:
@ font-face {font-family: Lato; }
Com exibição de fontes:
@ font-face {font-family: Lato; exibição de fonte: troca; }
3. Plugins que corrigem FOIT
Trocar exibição de fontes do Google -este plug-in encontra todas as fontes do Google e configura a exibição de fontes para troca (basta instalar e ativar). Foi desenvolvido por Gijo Varghese, autor de vários plug-ins de velocidade e administrador do WP Speed Matters Facebook Group . O plug-in só funciona com o Google e não pode adicionar font-display: swap para Google Fonts injetado dinamicamente via JavaScript.
OMGF | Hospedar fontes do Google localmente -originalmente desenvolvido para hospedar fontes localmente, mas também permite que você defina a opção de exibição de fontes para troca. Inclui outros recursos, como servir fontes do seu CDN e carregar apenas arquivos.woff2, no entanto, muitos recursos agora estão incluídos apenas na versão profissional.
LiteSpeed Cache -se estiver usando o LiteSpeed Cache, você pode alterar as regras de @ font-face em Otimização de página → Configurações de CSS → Otimização de exibição de fonte e, em seguida, definir para trocar.
SG Optimizer -a otimização de fontes da web pode ser encontrada nas configurações de otimização de frontend. Ao habilitar isso, uma pré-conexão é adicionada ao Google Fonts e todas as outras fontes locais serão pré-carregadas. Quando combinado com a combinação CSS, ele muda a exibição da fonte para trocar ou adicioná-lo se estiver faltando.
4. Pré-carregar fontes
O pré-carregamento de fontes pode corrigir FOIT e layout turnos.
É altamente recomendável que você teste as fontes de pré-carregamento, o que pode ser feito manualmente ou usando plug-ins como WP Rocket, Pre * Party, Pefmatters, Autoptimize, Asset CleanUp e SG Optimizer.
Tenha cuidado ao pré-carregar muitas fontes, especialmente se elas estiverem sendo pré-carregadas, mas não estão sendo usadas em algumas áreas do seu site. Muitas tags de pré-carregamento podem ter um efeito negativo na velocidade.
5. Teste novamente para erros de fonte
Execute o seu site WordPress por meio do PageSpeed Insights (ou Lighthouse) e certifique-se de que todo o texto permaneça visível durante o carregamento da webfont.
Veja também:
Atenciosamente,
Tom
