Quais impactos de performance ao usar serviços externos de fontes?
O Bruno Lopes mandou lá no fórum da Alura essa pergunta sobre usar ou não o Google Fonts. Em especial tendo em vista as discussões sobre Critical Path que temos no curso avançado de Performance Web.
Considerações gerais sobre o load de fontes
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 você 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).
Vale a pena usar o Google Fonts?
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 você. Mas, sei lá, é um tiro no escuro isso. Você 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 porque 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.