Este codelab mostra como pré-carregar fontes da Web usando rel="preload" para remover
qualquer flash de texto sem estilo (FOUT).
Medir
Avalie o desempenho do site antes de adicionar qualquer otimização.
- 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 mostra 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 de solicitações críticas e são buscadas por último. A cadeia de solicitações críticas 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 webfonts são carregadas lentamente, o que significa que elas não são carregadas até que seja feito o download dos recursos críticos (CSS, JS).
Esta é a sequência dos recursos buscados no aplicativo:
Pré-carregamento de fontes da Web
Para evitar FOUT, pré-carregue fontes da Web necessárias imediatamente. Adicione o elemento Link do aplicativo ao 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 para fazer o download desse recurso como uma fonte e ajudam a priorizar a fila de recursos.
O atributo crossorigin indica se o recurso deve 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 fazer a busca o quanto 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. Verifique a seção Latência máxima do caminho crítico.
Observe como o Pacifico-Bold.woff2 é removido da cadeia de solicitações críticas. Ele é buscado anteriormente no aplicativo.
Com o pré-carregamento, o navegador sabe que precisa fazer o download desse arquivo antes. É importante observar que, se não for usada corretamente, o pré-carregamento pode prejudicar o desempenho fazendo solicitações desnecessárias de recursos que não são usados.