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).
Medir
Primeiro, meça o desempenho do site antes de adicionar otimizações.
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen
. - 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 Performance 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 fontes da Web são carregadas de forma lenta, o que significa que elas não são carregadas até que os recursos críticos sejam transferidos por download (CSS, JS).
Confira a sequência dos recursos buscados no app:
Pré-carregar fontes da Web
Para evitar a FOUT, é possível carregar previamente as fontes da Web que são necessárias imediatamente. Adicione o elemento Link para esse app na parte de cima 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 na priorização da 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 é usado no cabeçalho da página, adicionamos uma tag de pré-carregamento para buscá-lo ainda mais rápido. 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. Consulte 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 usado corretamente, o carregamento prévio pode prejudicar o desempenho fazendo solicitações desnecessárias de recursos que não são usados.