O uso de fontes prevalece na maioria das páginas da web e geralmente inclui erros. Muitos desses erros impactam negativamente o orçamento de desempenho web. Este artigo tem como objetivo fornecer informações sobre o uso de fontes da web e ajudar a melhorar seu desempenho na web.
Conforme mostrado na hierarquia aplicada ao renderizar qualquer página da web, os elementos da fonte podem atrasar a renderização de outros elementos até que sejam carregados. Gerenciar adequadamente esse atraso é importante tanto para a mudança cumulativa de layout (CLS) quanto para a percepção do usuário.
O problema com o carregamento de fontes
Até que as fontes da página sejam carregadas, a visibilidade das fontes durante o processo de renderização de HTML e CSS varia de navegador para navegador. Aqui está um resumo de como diferentes navegadores lidam com essa situação:
| Navegador | Comportamento padrão se a fonte não estiver pronta… |
|---|---|
| borda | Usa uma fonte do sistema até que a fonte esteja pronta. Troca a fonte. |
| Chrome | Ocultará o texto por até 3 segundos. Se o texto ainda não estiver pronto, utiliza uma fonte do sistema até que a fonte esteja pronta. Troca a fonte. |
| Firefox | Ocultará o texto por até 3 segundos. Se o texto ainda não estiver pronto, utiliza uma fonte do sistema até que a fonte esteja pronta. Troca a fonte. |
| Safári | Oculta o texto até que a fonte esteja pronta. |
Para resolver esse problema sem depender no comportamento do navegador, o parâmetro font-display foi introduzido. Atualmente, 92% dos navegadores suportam o parâmetro font-display.
O que a exibição de fontes faz?
Durante o processo de carregamento da página, a aparência das fontes pode variar até o carregamento completo, dependendo do navegador. Por exemplo, algumas versões do navegador Safari ocultam o texto até que a fonte seja carregada. O exibição de fonte: troca O parâmetro CSS padroniza esse comportamento exibindo o texto usando uma fonte do sistema até que os arquivos de fonte sejam carregados. Depois que as fontes são carregadas, a fonte do sistema é trocada pela fonte pretendida. Aqui está um exemplo de uso:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Pré-carregando fontes
Usando carregar fontes antes do caminho crítico de renderização pode evitar lacunas durante o carregamento das fontes.
BÔNUS: abordagem da indústria para uso de fontes
De acordo com dados da SimilarTech, vamos dar uma olhada em uma tendência importante e um instantâneo do mundo da Internet. O primeiro gráfico abaixo mostra o uso da fonte nas 10,000 páginas principais, e o segundo gráfico mostra o uso de fontes nos 100,000 principais sites. Vamos examinar esses gráficos primeiro:
Há uma diferença de 5% no uso do Google Font e do Font Awesome entre os 10,000 principais sites e os 100,000 principais sites. Isso nos diz que os 10,000 principais sites otimizaram o uso de fontes. Recomendamos examinar isso como um tópico digno de nota. Considere como você pode implementar fontes da web com suas próprias soluções.
BÔNUS 2: Estatísticas de uso de fontes do Google e fontes incríveis
Referindo-se ao primeiro bônus, sugerimos examinar os dois gráficos que mostram a extensão numérica das bibliotecas de fontes mais utilizadas. O número de domínios exclusivos aqui ultrapassa milhões, e esses milhões representam seus concorrentes de SEO. Usar essas bibliotecas de maneira melhor e mais otimizada do que outras pode ajudá-lo a se destacar.
Seguindo essas dicas e otimizando o uso de fontes, você pode melhorar significativamente o desempenho da web e a experiência do usuário.
