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
Avalie o desempenho do site antes de adicionar otimizações.
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
. - Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Lighthouse.
- Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
- Clique no botão Gerar relatório.
O relatório do Lighthouse gerado mostrará a sequência de busca de recursos em Latência máxima do caminho crítico.
Na auditoria acima, as fontes da Web fazem parte da cadeia crítica de solicitações e são buscadas por último. A cadeia de solicitações crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador. Nesse 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 crítica de solicitações. Normalmente, as webfonts têm carregamento lento, o que significa que não são carregadas até que os recursos essenciais sejam baixados (CSS, JS).
Esta é a sequência dos recursos buscados no aplicativo:
Pré-carregamento de fontes da Web
Para evitar a FOUT, pré-carregue as fontes da Web que são necessárias imediatamente. Adicione o elemento 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 atributos as="font" type="font/woff2" instruem o navegador a fazer o download desse recurso como uma fonte e ajudam na priorização da fila de recursos.
O atributo crossorigin indica se o recurso precisa ser buscado com uma solicitação de 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 é usado no cabeçalho da página, adicionamos uma tag de pré-carregamento para recuperá-lo ainda mais antes. Não é importante pré-carregar a fonte Pacifico.woff2 porque ela define o estilo do texto abaixo da dobra.
Atualize o aplicativo e execute o Lighthouse novamente. Confira a seção Latência máxima do caminho crítico.
Observe como o Pacifico-Bold.woff2 é removido da cadeia de solicitações crítica. Ele é buscado anteriormente no aplicativo.
Com o pré-carregamento, o navegador sabe que precisa fazer o download desse arquivo mais cedo. É importante observar que, se não usado corretamente, o pré-carregamento pode prejudicar o desempenho ao fazer solicitações desnecessárias de recursos que não são usados.