Otimizando o desempenho de fontes do Google

Bons designs de sites são agraciados por imagens e fontes impressionantes. Infelizmente, esses dois elementos da web contribuem fortemente para as razões pelas quais muitos sites apresentam latência irritante. É claro que apenas as fontes da Web podem oferecer algo refrescante, inesperado e novo.

No entanto, existem maneiras de conter esse fenômeno horrível. O SVG está ajudando os desenvolvedores a gerenciar alguns dos desafios da renderização de imagens. E para o Google Fonts, que é a fonte da web mais popularmente usada, melhorar o tempo de renderização de uma página é apenas implantar os vários truques disponíveis para otimizar o desempenho do Google Font.

O que são fontes do Google?

As fontes do Google são uma coleção especialmente ajustada de glifos que compõem fontes para uso em sites. Eles são projetados especificamente para serem usados ​​na Internet, daí o nome fontes da web.

Lançado como Google Web Fonts em 2010 com apenas cerca de 30 fontes, o Google Fonts agora tem cerca de 17 bilhões de fontes e atualmente alimenta cerca de 57% de todos os sites. O Google Fonts, que é totalmente gratuito, registra cerca de 500.000 visualizações a cada segundo no momento da redação deste artigo e acumulou mais de 37 trilhões de visualizações desde 2010.

O uso de fontes do Google em seu site permite que você deixe de se limitar a fontes do sistema ou 'fontes seguras para a Web', como Arial e Georgia, que geralmente são pré-instaladas em todos os sistemas operacionais.

Como implementar fontes do Google

A implementação do Google Fonts em um site é feita usando a interface de programação de aplicativos (API), referenciando a(s) fonte(s) escolhida(s) pelo usuário. Essa API oferecida pelo Google pode ser incorporada ao seu documento HTML usando a tag de link CSS padrão ou a sintaxe para importação. Abaixo está um exemplo das APIs para implementação do Baloo Chettan 2.

Usando a tag de link CSS padrão

Usando a sintaxe de importação
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>

Com qualquer uma das APIs acima em seu documento HTML, você pode usar a família de fontes em seu documento CSS fazendo referência a ela, conforme visto no exemplo abaixo.

font-family : 'Baloo Chettan 2', cursiva;

Importância de otimizar o desempenho do Google Font

Implementar e usar o Google Fonts, como outras fontes da web, não é grande coisa, mas entregar as fontes aos visitantes do seu site. Lembre-se, os usuários não possuem essas fontes em seus dispositivos. Em outras palavras, seus navegadores devem baixá-los antes que possam ver o conteúdo do seu site.

Espessura da fonte

Cada fonte vem com um peso pronto para afetar negativamente a latência do seu site. Por exemplo, a fonte Baloo Chettan 2 do Google tem um tamanho total de 720 KB. Isso significa que você precisa levar em consideração aproximadamente 9 MB no carregamento do seu site se precisar usar toda a família de fontes Baloo (19), com todos os idiomas e variantes disponíveis em seu site. Claro, isso é o ideal e não é nada perto da otimização de fontes da web. No entanto, errar significa manter os visitantes do seu site esperando por alguns segundos antes que eles possam ver qualquer texto em seu site.

Formato da fonte

Infelizmente, nenhum desses formatos é considerado um formato universal que funciona em todos os navegadores.

EOT é suportado apenas pelo IE. Chrome e Opera têm o maior suporte para a maioria dos formatos, enquanto cerca de 86% de todos os navegadores suportam o formato WOFF. Isso pode exigir que você inclua todos os formatos de fonte para cada fonte que deseja usar. A ideia é fornecer uma experiência consistente, garantindo que todos os navegadores possam exibir todas as fontes.

Esses problemas fazem parte dos muitos motivos pelos quais há uma necessidade crucial de otimizar o desempenho das fontes do Google.

Otimizando o desempenho do Google Font

A otimização de fontes do Google começa com o posicionamento da API de fontes e o formato de solicitação, até a renderização. Aqui estão alguns truques simples sobre como otimizar as fontes do Google.

Pré-carregar recursos do Google Font

É altamente recomendável que você use o novo recurso da plataforma da web: <link rel="preload"> que permite carregar suas fontes da web antecipadamente. Esse recurso permite ignorar o comportamento padrão do navegador, que geralmente atrasa a renderização do texto, construindo primeiro a árvore de renderização para saber quais recursos de fonte são necessários antes de acessar o link do recurso.

<link rel="preload"> geralmente é incluído na tag <head> do seu HTML para acionar uma solicitação para suas fontes com antecedência suficiente, sem esperar pela criação do CSSOM. O recurso apenas fornece ao navegador uma pré-informação de que suas fontes da web serão necessárias em breve, sem fornecer nenhuma informação sobre como elas seriam usadas.

Além disso, é recomendável usar uma definição CSS @font-face adequada juntamente com o recurso de pré-carregamento para informar ao navegador como usar a URL do recurso. Veja um exemplo no próximo ponto.

Use uma solicitação para várias fontes

Outra boa medida para a otimização de fontes do Google é combinar várias solicitações de fontes em uma tag. Não incluir uma tag <link> separada para cada fonte, enviando várias solicitações em lotes diferentes. Para combinar solicitações de fontes, basta separar as fontes na API com o | personagem. No entanto, isso também pode ser alcançado simplesmente selecionando todas as fontes necessárias de uma só vez na página do Google Font.

Formato de solicitação de fonte inválido:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">

Formato de solicitação de fonte recomendado:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">

Ao combinar várias solicitações de fontes em uma única tag, salvamos o navegador de várias viagens ao servidor e também ajudamos navegadores mais antigos com no máximo 2 conexões por vez por domínio.

Formatos de fonte otimizados para todos os navegadores

Navegadores sem suporte para um formato de fonte específico simplesmente o ignoram e pulam para a próxima etapa na árvore de renderização. E para fornecer uma experiência consistente, você deve incluir todos os formatos de fonte em sua declaração CSS @font-face.

No entanto, o peso pode ser reduzido. Os gráficos individuais que descrevem uma fonte são compostos de informações semelhantes que podem ser compactadas usando um compressor compatível, como GZIP. Embora os formatos TTF e EOT sejam compactados por padrão, você precisa garantir que seus servidores estejam configurados para aplicar a compactação ao fornecer os dois formatos de fonte.

Use a configuração de compactação ideal para WOFF, que possui compactação integrada e recorra a algoritmos personalizados de pré-processamento e compactação para fornecer WOFF2 com redução de tamanho de arquivo de ~30%.

Exemplo de declaração CSS @font-face
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */


Dê precedência a local() em sua lista src

Embora essa ideia de otimização de fontes do Google possa não se aplicar realmente a usuários de telefones celulares, a menos que você esteja fazendo referência a fontes padrão do sistema, ela continua sendo um truque eficaz para otimizar fontes da web.

Se você observar o exemplo de declaração CSS @font-face acima, você notará que o local() encabeça a lista separada por vírgulas de variantes de recursos no descritor src:. Essa priorização é proposital, e a ideia é enviar o navegador do usuário para a primeira fonte da fonte localmente antes de optar por baixá-la se não estiver disponível localmente.

Isso garante que o navegador não faça download de fontes já instaladas localmente no computador do usuário, garantindo assim um melhor desempenho do site.

Personalizar a renderização da fonte: exibição de fonte CSS

Controlar o desempenho da fonte com o descritor de exibição de fonte para @font-face permite que você decida como suas fontes do Google devem ser renderizadas, com base em quanto tempo leva para fazer o download. Originalmente, os navegadores da web têm configurações padrão sobre o que fazer quando as fontes estão demorando muito para carregar. A maioria deles define um tempo limite após o qual eles usam a fonte de fallback, mas, infelizmente, seu período de tempo limite é diferente.

A propriedade de exibição de fonte recém-introduzida atualmente oferece suporte a cinco intervalos de valores: auto | bloco | trocar | substituto | opcional

Você deve definir a propriedade para bloquear o valor se renderizar o texto em um tipo de letra específico for muito importante. Isso ocorre porque permite que o navegador use texto invencível no lugar da fonte preferida quando eles não estiverem prontos e os troque assim que terminar o download. A maioria dos navegadores usa esse valor como valor padrão ( auto ).

A troca pode ser usada nos casos em que você pode renderizar uma fonte temporária até que a fonte preferida esteja pronta. Swap é semelhante a block, mas renderiza a fonte de fallback imediatamente que a página começa a ser carregada e as substituirá pelo tipo de letra preferido assim que estiverem prontas. Este valor tem um período de troca infinito e um período de bloco de zero segundos.

O valor de troca não é ideal para o corpo do texto, para não atrapalhar a experiência do leitor pela metade, deslocando o texto. Você pode usar isso para o texto do logotipo em que precisa exibir o nome ou o slogan da empresa rapidamente usando um substituto, mas eventualmente exigir o tipo de letra oficial para fins de marca.

Exemplo: propriedade font-display configurada para swap
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */

O valor de troca pode ser visto implementado nas primeiras linhas de código (API de fontes do Google) usadas para demonstrar como vincular fontes do Google em seu documento HTML.

Fallback é semelhante à troca , mas tem um período de troca limitado. Se a fonte preferida não for carregada em um período definido, geralmente zero segundo, o texto manterá a fonte de reserva pelo resto da vida útil da página. Este é um bom candidato para o corpo do texto; ele renderiza o texto o mais rápido possível e não o muda quando alguém começa a ler.

O valor opcional é uma réplica do fallback , mas permite que o navegador decida se inicia ou não o download da fonte da web, considerando a velocidade da rede dos usuários. Em uma situação em que a conexão é muito fraca, o navegador teria que limitar as solicitações e priorizar os recursos mais necessários, não enviando solicitações para baixar a fonte da web.

Limitar família de fontes e variantes

Como cada família de fontes e variantes contribuem para o peso da página, parte do processo de otimização do Google Font deve incluir a limitação desses dois elementos.

A disponibilidade de várias variantes como itálico , regular, negrito , etc. não significa necessariamente que você tem a 'escolha' de incluí-las em seu download. Reduza seu download para a variante exata necessária e evite incluir muitos. Seria um desperdício baixar uma variante completa porque você só quer usar uma palavra dela. É aqui que o próximo truque de otimização para o Google Fonts é útil.

Use o parâmetro de texto

O parâmetro de texto é um dos melhores truques de otimização de fontes do Google que você precisa conhecer e, surpreendentemente, a maioria dos desenvolvedores não o usa. O parâmetro permite carregar apenas os caracteres necessários.

Supondo que você deseja usar apenas duas letras de uma fonte no nome da sua empresa, como no exemplo abaixo. Eu usei fontes diferentes para as letras C e N:

nome da empresa

Você pode solicitar para carregar apenas essas duas letras, em vez de todo o tipo de fonte. O URL da fonte incluirá parâmetros extras como este:

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Para concluir

A otimização do Google Font é uma estratégia crucial para melhorar o desempenho geral de um site.

Acessibilidade e legibilidade são sempre os principais fatores a serem focados, além de um bom design em tipografia. Os métodos mencionados acima para melhorar o desempenho da fonte estão todos focados em reduzir o peso da fonte, acessar as fontes da Web o mais rápido possível e renderizar formatos/alternativas válidas quando a rede do usuário estiver instável.

Informe-nos se você já tentou algum desses métodos e sobre qualquer processo de otimização de fonte da Web não mencionado neste artigo.