Como carregar fontes da Web para evitar problemas de desempenho e acelerar o carregamento da página

Mattia Astorino Blocked Unblock Seguir Seguindo 17 de dezembro de 2018

Fontes da Web personalizadas são usadas em todo o mundo, mas muitos sites (muitos) as carregam indevidamente. Isso causa muitos problemas no carregamento da página, como problemas de desempenho, tempo de carregamento lento, renderização bloqueada e troca de fontes durante a navegação.

Eu vejo muitos desenvolvedores ignorando esses problemas ou talvez cometendo os mesmos erros repetidamente, porque “eles sempre fizeram isso”, mas como desenvolvedores da Web, precisamos ser capazes de nos adaptar em um ambiente em constante mudança.

É hora de quebrar esse ciclo e começar a fazer a coisa certa em 2019. Há apenas quatro etapas a serem consideradas ao carregar uma fonte da Web personalizada:

  • Use o formato de fonte correto
  • Pré-carregar fontes
  • Use a declaração correta de fonte
  • Evite texto invisível durante o carregamento da fonte.

Vamos dividir esses pontos um de cada vez.

Use o formato de fonte correto

Existem muitos formatos de fonte que podem ser usados na Web, mas apenas dois formatos são realmente necessários se você não tiver que suportar o Internet Explorer (IE) 8 ou inferior: woff e woff2 . Esses são os dois únicos tipos de arquivo que você deve usar porque são compactados no formato gzip por padrão (assim são muito pequenos), são otimizados para a web e são totalmente suportados pelo IE 9+ e por todos os outros navegadores evergreen.

Pré-carregar fontes

Ao usar fontes personalizadas, você deve dizer ao navegador para pré-carregá-las usando a tag e os atributos apropriados rel="" :

<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous">

Note que o uso de crossorigin aqui é important ; sem esse atributo, a fonte pré-carregada é ignorada pelo navegador e uma nova busca ocorre. Isso ocorre porque as fontes devem ser buscadas anonimamente pelo navegador, e a solicitação de pré-carregamento só é tornada anônima usando o atributo this.

No exemplo acima, os atributos rel="preload" as="font" solicitarão ao navegador que inicie o download do recurso necessário o mais rápido possível. Eles também dizem ao navegador que essa é uma fonte, portanto, pode priorizá-la adequadamente em sua fila de recursos. O uso das dicas de précarregamento terá um impacto dramático no desempenho da fonte da Web e no carregamento inicial da página. Os navegadores que suportam dicas de pré-carregamento e pré-busca começarão a baixar fontes da Web assim que tiverem visto a dica no arquivo HTML e não precisarão mais esperar pelo CSS.

Em vez disso, você pode usar o atributo rel="prefetch" para instruir o navegador a preparar o download dos recursos que podem ser necessários posteriormente durante o carregamento da página ou nas ações do usuário, de modo que ele atribua uma baixa prioridade a esses recursos.

CUIDADO:
Se você estiver usando um CDN como o Google Fonts, verifique se os arquivos de fonte que você está pré-carregando correspondem aos do CSS. Fontes também podem ser atualizadas regularmente, e se você estiver pré-carregando uma versão antiga enquanto usa CSS para uma mais nova, você pode acabar baixando duas versões da mesma fonte e desperdiçando a largura de banda dos seus usuários. Considere usar <link rel="preconnect"> ???? para facilitar a manutenção.

Declaração correta de face de fonte

Declarar uma família de fontes é muito simples, mas devemos tomar cuidado com certas coisas quando fazemos isso. Aqui está um exemplo correto declarando uma família de fontes personalizada:

@font-face { 
 font-family: 'Custom Font'; 
 font-weight: 400; 
 font-style: normal; 
 font-display: swap; /* Read next point */ 
 unicode-range: U+000-5FF; /* Download only latin glyphs */ 
 src: local('Custom Font'), 
 url('/fonts/custom-font.woff2') format('woff2'), 
 url('/fonts/custom-font.woff') format('woff'); 
 }

Aqui está o intervalo Unicode do Google Web Fundamentals .

Como você pode ver, usamos apenas fontes otimizadas ( woff e woff2 ) e pedimos ao navegador para baixar apenas o intervalo de glifos requerido (de U+000 para U+5FF ). Há também mais duas coisas para observar, a função local() e a ordem da declaração de fonte.

A função local() permite aos usuários usar sua cópia local da fonte, se presente (por exemplo, pensar sobre as fontes Roboto que estão pré-instaladas no Android) em vez de baixá-lo.

A ordem da declaração de fonte também é importante porque o navegador começará a buscar os recursos seguindo a ordem da declaração. Se ele suportar o formato woff2, fará o download da fonte ou, caso não reconheça o formato do recurso, continuará para a próxima, e assim por diante.

Se você realmente quiser usar fontes eot e ttf adicione-as no final da declaração src .

Recursos

Evite texto invisível durante o carregamento da fonte

As fontes geralmente são arquivos grandes que demoram um pouco para serem carregados, mesmo quando gzipados. Para lidar com isso, alguns navegadores ocultam o texto até o carregamento da fonte (o “flash de texto invisível”). Você pode evitar o “flash” e mostrar o conteúdo para os usuários imediatamente usando uma fonte do sistema inicialmente e, em seguida, substituindo-a.

No exemplo anterior @font-face você observará a declaração de font-display . O valor da swap informa ao navegador que o texto usando essa fonte deve ser exibido imediatamente usando uma fonte do sistema. Quando a fonte personalizada estiver pronta, a fonte do sistema será trocada.

Se um navegador não suportar font-display ele continuará seguindo seu comportamento padrão para carregar fontes.

Comportamentos padrão do navegador, se uma fonte não estiver pronta:

O Edge usa uma fonte do sistema até que a fonte personalizada esteja pronta e, em seguida, substitui as fontes.

O Chrome ocultará o texto por até três segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte personalizada esteja pronta.

O Firefox irá esconder o texto por até 3 segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte personalizada esteja pronta.

O Safari oculta o texto até que a fonte personalizada esteja pronta.

Testando

Os links a seguir testam a “versão padrão” em relação à otimizada:

Resultados

Comportamento DefaultOptimised

Conclusão

Considerando que essas otimizações básicas irão melhorar a UX geral do seu produto digital. Devemos contabilizar situações em que a velocidade de conexão não é ótima ou quando as pessoas não têm tempo para esperar vários segundos enquanto seu aplicativo / site está sendo carregado e navegável.

Essas melhorias, especialmente para grandes projetos, são obrigatórias para melhorar a experiência geral do usuário, e elas realmente não exigem muito esforço.

Devemos trabalhar juntos na tentativa de consertar a web.

Siga meu blog em:

Mattia Astorino
Desenvolvedor Web, ninja CSS / HTML em Monza. Membro do Open Source Design. equinsuocha.io