Ainda não tem acesso? Matricule-se

Solucionado (ver solução)

Fonts

Bom dia,

Em questão de performance é indicado usar o google fonts?

1 resposta
Solução

Oi Bruno, ótima pergunta! A resposta é bem complexa :)

A desvantagem do Google Fonts é que ele está em um hostname externo, o que vai exigir uma nova conexão extra (em geral 2, uma pro CSS e outra pras fontes mesmo).

E se vc carrega as fontes com um <link> normal como a maioria das pessoas, isso é blocante. Sendo blocante, pode ser bem ruim colocar 2 hostnames externos no critical path da sua página (dá pra aliviar fazendo o preconnect do segundo hostname por exemplo, mas ainda é pouco).

A vantagem do Google Fonts é o potencial para a fonte já estar cacheada na máquina do usuário por causa de uma visita eventual anterior a outro site que use a mesma fonte que vc. Mas, sei lá, é um tiro no escuro isso. Vc não sabe direito como tá o cache do usuário, mas sabe com certeza que 2 conexões a mais no critical path são ruins.

Se for carregar fontes da forma tradicional com @font-face e sem as customizações que o Google Fonts permite, aí talvez compense servir no seu próprio domínio. Dá pra colocar o CSS do @font-face inline na página ou fazer um server push. Dá pra fazer preload dos arquivos das fontes. E tudo no mesmo hostname com prioridade máxima de entrega.

Você perde, claro, o cache global entre sites que o Google Fonts em teoria poderia te dar.

Agora, isso tudo pensando que a fonte foi carregada com CSS via @font-face e está bloqueando o critical path. Digo isso pq existem outras formas de carregamento mais lazy que não são tão ruins pra performance. Têm outros tradeoffs, como causar um FOUT - Flash Of Unstyled Text. Mas podem ser apropriadas.

Dependendo do nível que quiser se aprofundar nisso, recomendo fortemente esse artigo com estratégias de carregamento de Web Fonts:

https://www.zachleat.com/web/comprehensive-webfonts/

Abraço