Quais impactos de performance ao usar serviços externos de fontes?

(Last Updated On: 23 de março de 2017)

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.

Fique por dentro

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