Artigos de Tecnologia e Negócios > Front-end

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

Sérgio Lopes
Sérgio Lopes

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.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana