Pré-carregar fontes da Web para melhorar a velocidade de carregamento

Garima Mimani
Garima Mimani
GitHub

Este codelab mostra como pré-carregar fontes da Web usando rel="preload" para remover qualquer flash de texto sem estilo (FOUT, na sigla em inglês).

Medida

Primeiro, meça a performance do site antes de adicionar otimizações.

  1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  2. Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir o DevTools.
  3. Clique na guia Lighthouse.
  4. Verifique se a caixa de seleção Performance está marcada na lista Categorias.
  5. Clique no botão Gerar relatório.

O relatório do Lighthouse gerado vai mostrar a sequência de busca de recursos em Latência máxima do caminho crítico.

As fontes da Web estão presentes na cadeia de solicitações críticas.

Na auditoria acima, as fontes da Web fazem parte da cadeia de solicitações críticas e são buscadas por último. A cadeia de solicitação crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador. Neste aplicativo, as fontes da Web (Pacfico e Pacifico-Bold) são definidas usando a regra @font-face e são o último recurso buscado pelo navegador na cadeia de solicitações críticas. Normalmente, as fontes da Web são carregadas de forma lenta, ou seja, elas não são carregadas até que os recursos críticos sejam baixados (CSS, JS).

Esta é a sequência dos recursos buscados no aplicativo:

As fontes da Web são carregadas de forma lenta.

Pré-carregamento de fontes da Web

Para evitar o FOUT, pré-carregue as fontes da Web necessárias imediatamente. Adicione o elemento Link para esse aplicativo no cabeçalho do documento:

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

Os atributos as="font" type="font/woff2" informam ao navegador que ele deve baixar esse recurso como uma fonte e ajudam a priorizar a fila de recursos.

O atributo crossorigin indica se o recurso precisa ser buscado com uma solicitação CORS, já que a fonte pode vir de um domínio diferente. Sem esse atributo, a fonte pré-carregada é ignorada pelo navegador.

Como Pacifico-Bold é usada no cabeçalho da página, adicionamos uma tag de pré-carregamento para buscá-la ainda mais cedo. Não é importante pré-carregar a fonte Pacifico.woff2 porque ela estiliza o texto que está abaixo da dobra.

Atualize o aplicativo e execute o Lighthouse novamente. Verifique a seção Latência máxima do caminho crítico.

A fonte da Web Pacifico-Bold é pré-carregada e removida da cadeia de solicitações críticas

Observe como o Pacifico-Bold.woff2 é removido da cadeia de solicitações críticas. Ele é buscado anteriormente no aplicativo.

A fonte da Web Pacifico-Bold é pré-carregada

Com o pré-carregamento, o navegador sabe que precisa fazer o download desse arquivo antes. É importante observar que, se não for usado corretamente, o pré-carregamento pode prejudicar o desempenho ao fazer solicitações desnecessárias de recursos que não são usados.