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

Quais impactos de performance ao usar serviços externos de fontes?
Sérgio Lopes
Sérgio Lopes

Compartilhe

imagem de capa

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).

Banner promocional da Alura, com um design futurista em tons de azul, apresentando dois blocos de texto, no qual o bloco esquerdo tem os dizeres:

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.

Sérgio Lopes
Sérgio Lopes

Sérgio é diretor e líder do time de diversos times no Grupo Caelum, formado em Ciência da Computação pela USP. É reconhecido por sua atuação em Front-end, Performance, Mobile e Arquitetura de software e tem vasta experiência com ensino, tanto presencial quanto online. Gerencia os projetos internos da empresa e atua na definição de rumos dos produtos e da empresa em geral.

Veja outros artigos sobre Front-end