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. O que será melhor pra performance? 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.

(Última atualização em: 23 de março de 2017)

Próximo ArtigoProdutividade do Gui: limite o tempo desse site