Qual o impacto de usar diversas Web-Fonts em meu site?

De acordo com o HTTP Archive, aproximadamente 80% dos sites móveis e de desktop (no momento da escrita) usam fontes da web, destacando sua popularidade. No entanto, os seus aspectos de desempenho são frequentemente esquecidos.

Neste artigo, explicamos porque você deve ir devagar com as fontes e como obter o melhor desempenho delas.

Tipos de Fontes

Vamos dar uma olhada rápida nos dois tipos gerais de fontes e como eles diferem entre si:

1) Fontes Web seguras (também conhecidas como Fontes do Sistema)

• Estas são as fontes padrão disponíveis no dispositivo de um usuário.
• Elas não precisam ser baixadas, pois já estão incluídas na maioria dos dispositivos.
• As fontes web seguras são limitadas em variedade, no entanto, elas carregam mais rápido do que as fontes da Web devido à sua ampla disponibilidade em todos os dispositivos.

2) Fontes da web

• Também conhecidas como “fontes personalizadas”, que normalmente não estão instaladas na máquina do usuário.
• As fontes da Web precisam ser baixadas para uso na página.
• As fontes da Web podem ser hospedadas por um serviço de terceiros ou auto hospedadas.
• As fontes da Web podem oferecer uma variedade de opções para se adequar ao design e à marca do seu site, mas elas vêm com sobrecarga extra para atendê-las.
• O uso de várias fontes da web pode gerar um custo significativo de desempenho.

Como as fontes da web afetam o desempenho da página?

Analisamos todos os problemas de desempenho com o uso de fontes da web:

As fontes da web são descobertas tardiamente pelo navegador

As fontes da Web precisam ser carregadas antes que o texto seja renderizado para que os usuários possam visualizar o conteúdo na sua página.

No entanto, o navegador só toma conhecimento das fontes da web depois que o HTML é carregado e os arquivos CSS são analisados.

Isso pode levar algum tempo e, dependendo do design do site, podem haver várias fontes da web que precisam ser carregadas, o que pode atrasar o carregamento da página.

Se isso acontecer, os visitantes podem enfrentar o problema do Flash of Invisible Text (FOIT), em que o texto está pronto, mas a fonte da web ainda não foi carregada.

Como alternativa, o texto é estilizado com uma fonte de fallback até que a fonte da web termine de carregar, momento em que o texto muda para a fonte desejada. Isso é conhecido como Flash of Unstyled Text (FOUT).

Embora esses cenários possam ser resolvidos com o pré carregamento de fontes da web e o uso de estratégias de exibição de fontes apropriadas, as fontes da web também podem apresentar problemas de desempenho adicionais, como aumento do tempo de carregamento para outros recursos e aumento das mudanças de layout em sua página, respectivamente.

Fontes da web adicionam peso ao seu site

As fontes da Web geralmente requerem várias solicitações para funcionar corretamente. Isso inclui várias famílias de fontes com diferentes pesos, estilos e idiomas que podem ser rapidamente adicionados ao tamanho total da página.

As solicitações típicas feitas incluem:

Arquivos CSS de fonte

Este é o arquivo CSS que contém atributos relativos à fonte e seus vários pesos e estilos para que você possa usá-lo em seu próprio CSS.

Arquivo Real da fonte

Estes são os próprios arquivos de fonte (WOFF, TTF, etc.), que precisam ser baixados para o navegador usar quando referenciados em CSS.

Verificações de validação

Dependendo de qual fonte da web você usa, pode ser necessária a validação da sua licença para garantir que você está autorizado a usar a fonte na sua página.

Dependendo da complexidade e do número de fontes, algumas páginas podem resultar em fontes que representam a grande maioria de seu Tamanho total da página.

Fontes da web causam atrasos adicionais

As fontes da Web vêm com sobrecarga de desempenho adicional porque normalmente são baixadas de um servidor de terceiros.

Conectar-se a um servidor / domínio de terceiros é sempre caro, pois envolve novas pesquisas de DNS, tempos de conexão SSL, confiança no desempenho do servidor de terceiros e possíveis gargalos se a sua página contiver solicitações para um grande número de servidores de terceiros separados.

Dependendo do serviço de fonte da web utilizado, os tempos de conexão / resposta / download podem variar, pois cada solicitação está sujeita à variação e complexidade da Internet, bem como ao desempenho do servidor final do terceiro.

Essa é uma das razões pelas quais as fontes de auto hospedagem são comumente vistas como uma estratégia para melhorar o desempenho das fontes da web, no entanto, existem prós e contras para essa solução, conforme descrevemos a seguir.

Não use muitas fontes da Web

Se você usar muitas fontes da web, todos os problemas acima podem ser multiplicados várias vezes, impactando o desempenho da sua página de forma significativa.

Usar muitas fontes da Web é ruim para o desempenho e também é geralmente considerado uma má prática de design.

Em última análise, vale a pena ser inteligente com as escolhas de fonte, e selecionar menos fontes com opções de estilo mais simples no formato mais adequado, essa é a melhor maneira de garantir o desempenho ideal para sua página.

Devo auto hospedar fontes?

Este é um tópico amplamente debatido e não há uma resposta direta.

Dependendo de para quem você perguntar, você receberá recomendações para hospedar as suas fontes personalizadas ou optar por fontes da Web de terceiros.

Fontes da web de auto hospedagem

Fontes da web com hospedagem própria podem resultar em melhor desempenho pelos seguintes motivos:

• Você não precisa se conectar a servidores de terceiros para buscar suas fontes, reduzindo potencialmente o tempo de carregamento geral. Isso também garante a exibição adequada de fontes no caso de o servidor de fontes da Web de terceiros apresentar problemas ou ficar totalmente inativo.
• Você pode incorporar declarações de fontes em seu HTML ou pré carregá-las para que o navegador tenha conhecimento avançado de quais fontes são necessárias.
• Você tem mais controle geral sobre o armazenamento em cache e outras estratégias para garantir um carregamento de fonte mais rápido.

No entanto, as possíveis desvantagens da auto hospedagem de fontes da web incluem:

• Suas fontes da web não são mais atualizadas automaticamente, pois não são mais fornecidas por servidores de terceiros.
• Você precisa se certificar de fornecer vários formatos e declarar fontes seguras para a Web como fallback.
• Uso recomendado de um CDN, para garantir que seus arquivos de fonte sejam servidos no local mais próximo dos seus visitantes.

Possíveis problemas de licenciamento

O licenciamento é outro problema com o qual você pode ter que lidar, já que diferentes serviços de fontes têm políticas diferentes para fontes de auto hospedagem.

Embora alguns serviços de fontes (como Adobe Typekit) não permitam que você hospede fontes automaticamente sem uma licença separada, o Google (e alguns outros serviços de fontes) oferece uma licença aberta para as fontes da web.

Recomendamos pesquisar quais fontes você pode auto hospedar em sua página legalmente para que possa optar pelo design de que precisa com maior controle sobre como as fontes são carregadas.

Usando fontes da web hospedadas em servidores de terceiros

• Embora as fontes da web hospedadas por terceiros tenham suas desvantagens, elas também têm vantagens sobre a auto hospedagem, incluindo:
• Uso de um CDN para servir as fontes da web com base na localização do usuário para minimizar os tempos de carregamento.
• Atualizações e otimizações regulares para fontes da web, às quais você terá acesso imediato.
• Entrega otimizada para servir apenas as fontes da web que são realmente usadas na página.

Referencia: https://gtmetrix.com/blog/dont-use-too-many-web-fonts/