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

Este codelab mostra como pré-carregar fontes da web usando rel="preload" para remover qualquer flash de texto não estilizado (FOUT).

Medir #

Avalie primeiro o desempenho do site antes de adicionar qualquer otimização. 1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  1. Click the Lighthouse tab.
  2. Make sure the Performance checkbox is selected in the Categories list.
  3. Click the Generate report button.

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

Fontes da web estão presentes na cadeia de solicitação crítica.

Na auditoria acima, as fontes da web fazem parte da cadeia de solicitação crítica 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ção crítica. Normalmente, as fontes da web são carregadas lentamente, o que significa que não são carregadas até que os recursos críticos sejam baixados (CSS, JS).

Aqui está a sequência dos recursos buscados no aplicativo:

Webfonts carregados lentamente.

Pré-carregamento de fontes da web #

Para evitar FOUT, você pode pré-carregar fontes da web que são necessárias imediatamente. Adicione o Link para este aplicativo no cabeçalho do documento:

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

Os as="font" type="font/woff2" dizem ao navegador para baixar este recurso como uma fonte e ajuda na priorização da fila de recursos.

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

Como a 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.

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

Pacifico-Bold webfont é pré-carregada e removida da cadeia de solicitação crítica

Observe como a Pacifico-Bold.woff2 é removida da cadeia de solicitação crítica. Ela é obtida anteriormente no aplicativo.

A fonte da web Pacifico-Bold está pré-carregada

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

Last updated: Improve article