Otimizando o desempenho do Google Fonts

Publicados: 2022-03-10
Resumo rápido ↬ As fontes do Google são fáceis de implementar, mas podem ter um grande impacto nos tempos de carregamento da sua página. Vamos explorar como podemos carregá-los da maneira mais otimizada.

É justo dizer que as fontes do Google são populares. Até o momento, eles foram visualizados mais de 29 trilhões de vezes na web e é fácil entender o porquê - a coleção oferece acesso a mais de 900 fontes bonitas que você pode usar em seu site gratuitamente. Sem o Google Fonts, você ficaria limitado ao punhado de “fontes do sistema” instaladas no dispositivo do seu usuário.

As fontes do sistema ou 'Web Safe Fonts' são as fontes mais comumente pré-instaladas nos sistemas operacionais. Por exemplo, Arial e Georgia são empacotados com distribuições Windows, macOS e Linux.

Como todas as coisas boas, o Google Fonts tem um custo. Cada fonte carrega um peso que o navegador da web precisa baixar antes que possam ser exibidas. Com a configuração correta, o tempo de carregamento adicional não é perceptível. No entanto, se você errar, seus usuários podem esperar alguns segundos antes que qualquer texto seja exibido.

As fontes do Google já estão otimizadas

A API do Google Fonts faz mais do que apenas fornecer os arquivos de fonte ao navegador, ela também realiza uma verificação inteligente para ver como ela pode entregar os arquivos no formato mais otimizado.

Vamos dar uma olhada no Roboto, o GitHub nos diz que a variante regular pesa 168kb.

Roboto Regular tem um tamanho de arquivo de 168kb
168kb para uma única variante de fonte. (Visualização grande)

No entanto, se eu solicitar a mesma variante de fonte da API, esse arquivo será fornecido. Que é apenas 11kb. Como pode ser?

Quando o navegador faz uma solicitação à API, o Google primeiro verifica quais tipos de arquivo o navegador suporta. Estou usando a versão mais recente do Chrome, que, como a maioria dos navegadores, suporta WOFF2, então a fonte é exibida para mim nesse formato altamente compactado.

Se eu alterar meu agente de usuário para o Internet Explorer 11, a fonte será exibida no formato WOFF.

Por fim, se eu alterar meu agente de usuário para o IE8, obterei a fonte no formato EOT (Embedded OpenType).

O Google Fonts mantém mais de 30 variantes otimizadas para cada fonte e detecta e fornece automaticamente a variante ideal para cada plataforma e navegador.

— Ilya Grigorik, Otimização de Fontes da Web

Esse é um ótimo recurso do Google Fonts, verificando se o agente do usuário é capaz de servir os formatos de melhor desempenho para navegadores que os suportam, enquanto ainda exibe as fontes de forma consistente em navegadores mais antigos.

Mais depois do salto! Continue lendo abaixo ↓

Cache do navegador

Outra otimização integrada do Google Fonts é o cache do navegador.

Devido à natureza onipresente do Google Fonts, o navegador nem sempre precisa baixar os arquivos de fonte completos. O SmashingMagazine, por exemplo, usa uma fonte chamada 'Mija', se esta é a primeira vez que seu navegador vê essa fonte, ele precisará baixá-la completamente antes que o texto seja exibido, mas na próxima vez que você visitar um site usando essa fonte , o navegador usará a versão em cache.

À medida que a API do Google Fonts se torna mais usada, é provável que os visitantes do seu site ou página já tenham fontes do Google usadas em seu design no cache do navegador.

— Perguntas frequentes, Google Fonts

O cache do navegador do Google Fonts está configurado para expirar após um ano, a menos que o cache seja limpo antes.

Observação: Mija não é uma fonte do Google, mas os princípios de armazenamento em cache não são específicos do fornecedor.

É Possível Otimização Adicional

Embora o Google invista grande esforço na otimização da entrega dos arquivos de fonte, ainda há otimizações que você pode fazer em sua implementação para reduzir o impacto nos tempos de carregamento da página.

1. Limitar famílias de fontes

A otimização mais fácil é simplesmente usar menos famílias de fontes. Cada fonte pode adicionar até 400kb ao peso da sua página, multiplique isso por algumas famílias de fontes diferentes e, de repente, suas fontes pesam mais do que a página inteira.

Eu recomendo usar no máximo duas fontes, uma para títulos e outra para conteúdo geralmente é suficiente. Com o uso correto do tamanho da fonte, peso e cor, você pode obter uma ótima aparência com apenas uma fonte.

Exemplo mostrando três pesos de uma única família de fontes (Source Sans Pro)
Três pesos de uma única família de fontes (Source Sans Pro). (Visualização grande)

2. Excluir variantes

Devido ao padrão de alta qualidade do Google Fonts, muitas das famílias de fontes contêm todo o espectro de pesos de fonte disponíveis:

  • Fino (100)
  • Itálico fino (100i)
  • Luz (300)
  • Itálico claro (300i)
  • Regular (400)
  • Itálico normal (400i)
  • Médio (600)
  • Itálico Médio (600i)
  • Negrito (700)
  • Negrito Itálico (700i)
  • Preto (800)
  • Preto Itálico (800i)

Isso é ótimo para casos de uso avançados que podem exigir todas as 12 variantes, mas para um site normal, significa baixar todas as 12 variantes quando você precisar apenas de 3 ou 4.

Por exemplo, a família de fontes Roboto pesa ~144kb. Se, no entanto, você usar apenas as variantes Regular, Regular Itálico e Negrito, esse número será reduzido para ~36kb. Uma economia de 75%!

O código padrão para implementar o Google Fonts é assim:

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Se você fizer isso, ele carregará apenas a variante 'regular 400'. O que significa que todo texto claro, negrito e itálico não será exibido corretamente.

Para carregar todas as variantes de fonte, precisamos especificar os pesos na URL assim:

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

É raro que um site use todas as variantes de uma fonte de Thin (100) a Black (900), a estratégia ideal é especificar apenas os pesos que você planeja usar:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

Isso é especialmente importante ao usar várias famílias de fontes. Por exemplo, se você estiver usando Lato para títulos, faz sentido solicitar apenas a variante em negrito (e possivelmente negrito itálico):

 <link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3. Combinar Solicitações

O snippet de código com o qual trabalhamos acima faz uma chamada para os servidores do Google ( fonts.googleapis.com ), chamada de solicitação HTTP. De um modo geral, quanto mais solicitações HTTP sua página da Web precisar fazer, mais tempo levará para carregar.

Se você quiser carregar duas fontes, você pode fazer algo assim:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Isso funcionaria, mas resultaria no navegador fazendo duas solicitações. Podemos otimizar isso combinando-os em uma única solicitação como esta:

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

Não há limite para quantas fontes e variantes uma única solicitação pode conter.

4. Dicas de recursos

As dicas de recursos são um recurso suportado por navegadores modernos que podem aumentar o desempenho do site. Vamos dar uma olhada em dois tipos de dica de recurso: 'Prefetching de DNS' e 'Pré-conexão'.

Observação: se um navegador não suportar um recurso moderno, ele simplesmente o ignorará. Portanto, sua página da Web ainda será carregada normalmente.

Pré-busca de DNS

A pré-busca de DNS permite que o navegador inicie a conexão com a API de fontes do Google ( fonts.googleapis.com ) assim que a página começar a carregar. Isso significa que, quando o navegador estiver pronto para fazer uma solicitação, parte do trabalho já estará concluído.

Para implementar a pré-busca de DNS para o Google Fonts, basta adicionar este one-liner às suas páginas da web <head> :

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Pré-conexão

Se você observar o código de incorporação do Google Fonts, parece ser uma única solicitação HTTP:

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

No entanto, se visitarmos esse URL, veremos que há mais três solicitações para um URL diferente, https://fonts.gstatic.com. Uma solicitação adicional para cada variante de fonte.

Código-fonte de uma solicitação do Google Fonts
(Ver fonte) (Visualização grande)

O problema com essas solicitações adicionais é que o navegador não iniciará os processos para fazê-las até que a primeira solicitação para https://fonts.googleapis.com/css seja concluída. É aí que entra o Preconnect.

A pré-conexão pode ser descrita como uma versão aprimorada da pré-busca. Ele é definido na URL específica que o navegador irá carregar. Em vez de apenas executar uma pesquisa de DNS, ele também conclui a negociação TLS e o handshake TCP.

Assim como o DNS Prefetching, ele pode ser implementado com uma linha de código:

 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Apenas adicionar esta linha de código pode reduzir o tempo de carregamento da página em 100 ms. Isso é possível iniciando a conexão junto com a solicitação inicial, em vez de esperar que ela seja concluída primeiro.

5. Hospede Fontes Localmente

As fontes do Google são licenciadas sob uma licença 'Libre' ou 'software livre', que dá a você a liberdade de usar, alterar e distribuir as fontes sem solicitar permissão. Isso significa que você não precisa usar a hospedagem do Google se não quiser - você pode auto-hospedar as fontes!

Todos os arquivos de fontes estão disponíveis no Github. Um arquivo zip contendo todas as fontes também está disponível (387 MB).

Por fim, há um serviço auxiliar que permite escolher quais fontes você deseja usar e, em seguida, fornece os arquivos e CSS necessários para isso.

Há uma desvantagem em hospedar fontes localmente. Ao baixar as fontes, você as está salvando como estão naquele momento. Se eles forem aprimorados ou atualizados, você não receberá essas alterações. Em comparação, ao solicitar fontes da API do Google Fonts, você sempre recebe a versão mais atualizada.

Solicitação de API do Google Fonts mostrando a data da última modificação
Solicitação da API do Google Fonts. (Visualização grande)

Observe o parâmetro lastModified na API. As fontes são regularmente modificadas e melhoradas.

6. Exibição de fonte

Sabemos que leva tempo para o navegador baixar o Google Fonts, mas o que acontece com o texto antes de ficar pronto? Por muito tempo, o navegador mostrava um espaço em branco onde deveria estar o texto, também conhecido como “FOIT” (Flash of Invisible Text).

Leitura recomendada : “FOUT, FOIT, FOFT” de Chris Coyier

Mostrar nada pode ser uma experiência chocante para o usuário final, uma experiência melhor seria mostrar inicialmente uma fonte do sistema como um substituto e depois “trocar” as fontes quando estiverem prontas. Isso é possível usando a propriedade CSS font-display .

Adicionando font-display: swap; para a declaração @font-face, dizemos ao navegador para mostrar a fonte de fallback até que o Google Font esteja disponível.

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

Em 2019, o Google anunciou que adicionaria suporte para exibição de fonte: swap. Você pode começar a implementar isso imediatamente adicionando um parâmetro extra ao URL das fontes:

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Use o parâmetro de Text

Um recurso pouco conhecido da API do Google Fonts é o parâmetro de text . Esse parâmetro raramente usado permite que você carregue apenas os caracteres necessários.

Por exemplo, se você tem um logotipo de texto que precisa ser uma fonte exclusiva, você pode usar o parâmetro text para carregar apenas os caracteres usados ​​no logotipo.

Funciona assim:

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

Obviamente, esta técnica é muito específica e tem apenas algumas aplicações realistas. No entanto, se você puder usá-lo, poderá reduzir o peso da fonte em até 90%.

Nota: Ao usar o parâmetro de text , apenas o peso da fonte “normal” é carregado por padrão. Para usar outro peso, você deve especificá-lo explicitamente na URL.

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

Empacotando

Com cerca de 53% dos principais 1 milhão de sites usando o Google Fonts, a implementação dessas otimizações pode ter um impacto enorme.

Quantos dos itens acima você já tentou? Deixe-me saber na seção de comentários.