Se você usa o Google Fonts em seu website ou aplicativo da web, algumas etapas adicionais podem levar a tempos de carregamento muito mais rápidos. Neste artigo, vou mostrar-lhe como:
- Ignorar parte do tempo de latência para baixar fontes do Google Fonts
- Auto-hospede suas fontes para maior velocidade e maior controle sobre FOIT e FOUT
- Faça o mesmo que # 2, mas mais rapidamente com uma ferramenta legal
Mas por que?
O Google Fonts está hospedado em uma rede de distribuição de conteúdo (CDN) muito rápida e confiável, então, por que podemos considerar a hospedagem em nosso próprio CDN?
Vamos dar um passo para trás e ver o que está acontecendo quando você solicita do Google Fonts usando um padrão <link>copiado de seu website:
Você notou que o link é para uma folha de estilo e não um arquivo de fonte? Se carregarmos a href do link em nosso navegador, veremos que o Google Fonts carrega uma folha de estilo de @font-facedeclarações para todos os estilos de fonte que solicitamos em todos os conjuntos de caracteres disponíveis. Nem todos esses são usados por padrão, felizmente.
Em seguida, cada @font-facedeclaração informa ao navegador para usar uma versão local da fonte, se disponível, antes de tentar baixar o arquivo de fonts.gstatic.com:
Então qual é o problema?
Primeiro, temos um mínimo de duas solicitações separadas para hosts diferentes, primeiro para a folha de estilo em fonts.googleapis.com e, em seguida, para um URL exclusivo para cada fonte hospedada em fonts.gstatic.com. Isso torna impossível tirar vantagem da multiplexação HTTP / 2 ou dicas de recursos .
Você pode estar se perguntando: “Por que não posso usar o link direto para a fonte?” As fontes do Google são atualizadas com frequência, por isso você pode tentar carregar uma fonte a partir de um link que não existe mais rapidamente. 🤦🏾
O segundo problema que encontramos com o Google Fonts é que não temos controle sobre o flash-of-invisible-text (FOIT) e o flash-of-unstyled-text (FOUT) enquanto as fontes estão sendo carregadas. A definição da font-displaypropriedade nos @font-facedaria esse controle, mas é definida na folha de estilo de fontes do Google.
Por fim, embora seja raro, se o Google Fonts estiver indisponível, não receberemos nossas fontes. Se o nosso próprio CDN estiver inativo, pelo menos estamos entregando consistentemente nada para nossos usuários, certo? 🤷🏻️
Se você não fizer mais nada, pelo menos, pré-conectar …
A única melhoria de desempenho básica que podemos fazer com a hospedagem de fontes do Google é aquecer a pesquisa de DNS, o handshake TCP e a negociação TLS no domínio fonts.gstatic.com com pré – conexão :
Por quê? Se você não aquecer a conexão, o navegador esperará até ver os arquivos de fontes da chamada CSS antes de iniciar o DNS / TCP / TLS:
Isso é um desperdício de tempo porque sabemos que definitivamente precisaremos solicitar recursos do fonts.gstatic.com. Adicionando a pré-conexão, podemos executar o DNS / TCP / TLS antes que o soquete seja necessário, avançando, assim, esse ramo da cascata:
Melhor ainda: auto-host para controle total
Seria ainda melhor se tivéssemos controle total sobre nossos arquivos de fontes, carregamento e propriedades CSS. Felizmente, Mario Ranftl criou o google-webfonts-helper que nos ajuda a fazer exatamente isso! É uma ferramenta incrível para nos fornecer arquivos de fonte e declarações de fonte com base nas fontes, charsets, estilos e suporte ao navegador que você selecionar.
Etapa 1: Use o google-webfonts-helper para baixar nossas fontes e fornecer declarações básicas de fontes de fontes CSS
Primeiro, selecione a fonte do Google que você precisa na barra lateral esquerda. Digite na caixa de pesquisa uma lista filtrada (seta vermelha) e clique na sua fonte (seta azul):
Em seguida, selecione seus conjuntos de caracteres e estilos. Lembre-se que mais estilos significam mais para o cliente baixar:
Fontes diferentes têm diferentes níveis de suporte a caracteres e opções de estilo. Por exemplo, o Open Sans suporta muito mais charsets do que o Muli:
Sua escolha final é quais navegadores você deseja suportar. “Modern Browsers” (Navegadores Modernos) lhe dará os formatos WOFF e WOFF2, enquanto o “Melhor Suporte” também lhe dará TTF, EOT e SVG. Para nosso caso de uso, escolhemos hospedar somente WOFF e WOFF2 ao selecionar fontes do sistema como substitutos para navegadores mais antigos. Trabalhe com sua equipe de design para decidir a melhor opção para você.
Depois de selecionar uma opção de suporte ao navegador, copie o CSS fornecido em sua folha de estilo próximo ao início de suas folhas de estilo antes de chamar qualquer uma dessas famílias de fontes. Optamos por colocar isso no topo de nossas variáveis parciais ao usar o SCSS. Você pode personalizar o local do arquivo de fonte – o padrão assume ../fonts/.
Finalmente, baixe seus arquivos. Descompacte-os e coloque-os em seu projeto no local apropriado.
Etapa 2: Carregando Otimização
Até agora, só nos mudamos para onde estamos hospedando arquivos dos servidores do Google para os nossos. Isso é bom, mas não é bom o suficiente. Queremos que nossos arquivos de fontes iniciem o download imediatamente, não depois que o CSS é analisado e o CSSOM é criado.
Podemos fazer isso com a preloaddica do recurso:O pré-carregamento é uma busca declarativa, permitindo que você force o navegador a fazer uma solicitação para um recurso sem bloquear o evento
Aviso : Antes de prosseguirmos, certifique-se de compreender que preloadirá carregar um recurso, quer você o use ou não. Apenas pré-carregue recursos necessários em uma determinada página.
Como escolhemos qual tipo de arquivo pré-carregar? Dicas de recursos não estão disponíveis em todos os navegadores, mas todos os navegadores que suportam preloadtambém suportam WOFF2 para que possamos escolher com segurança apenas WOFF2.
Em seu arquivo HTML, adicione dicas de recursos para todos os arquivos de fonte WOFF2 necessários para a página atual:
Vamos detalhar nosso <link>elemento de pré-carga :
rel="preload"informa ao navegador para buscar declarativamente o recurso, mas não “executá-lo” (nosso CSS colocará em fila o uso).as="font"diz ao navegador o que será baixado para poder definir uma prioridade apropriada. Sem isso, o navegador definiria uma prioridade baixa padrão.type="font/woff2informa ao navegador o tipo de arquivo para que ele faça o download do recurso somente se ele suportar esse tipo de arquivo.crossoriginé necessário porque as fontes são buscadas usando o modo anônimo CORS.
Então como fomos? Vamos dar uma olhada no desempenho antes e depois. Usando o webpagetest.org no modo easy (Moto G4, Chrome, 3G lento), nosso índice de velocidade era 4.147s usando apenas pré-conexão e 3.388s usando auto-hospedagem mais pré-carga. As cachoeiras de cada show mostram como estamos economizando tempo jogando com latência:
Etapa 3: Corrigir FOIT e FOUT (opcional)
Diferentes pessoas têm diferentes opiniões sobre FOIT (flash de texto invisível) e FOUT (flash de texto não estilizado). Na maioria das vezes, preferimos mostrar o texto o mais rápido possível, mesmo que isso signifique uma transição irritante para a nossa fonte preferida, uma vez carregada. Para conteúdo de marca forte, você pode querer manter um FOIT sobre exibir fontes fora da marca.
Se você está bem com FOUT, ou flash de texto unstyled, então podemos corrigir FOIT, adicionando font-display: swap;às nossas @font-facedeclarações.
subfonte
Então, e se você não quiser passar por todas essas etapas? O pacote subfontnpm fará isso além de incluir dinamicamente suas fontes na compilação. Demora um pouco mais de tempo de configuração, mas definitivamente vale a pena tentar.
Considerações adicionais
Host de recursos estáticos em um CDN
Uma coisa que o Google Fonts oferece é uma rede de entrega de conteúdo (CDN) rápida e confiável. Você também deve hospedar seus ativos estáticos em um CDN para uma entrega mais rápida para usuários em diferentes regiões. Usamos o AWS S3 plus Cloudfront , o serviço CDN oferecido pela Amazon, mas existem muitas opções.
Tamanho e fontes populares
Em alguns dos meus testes para o site da empresa, notei tamanhos de arquivo de fontes menores para algumas fontes hospedadas pelo Google. Minha teoria é que isso se deve às variantes do Google para otimização:
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.- da
Além disso, fontes muito populares, como Open Sans e Roboto, provavelmente existem no cache de seus usuários. Espero que, em um post futuro, eu possa explorar os dados do HTTP Archive e dar uma ideia de quais fontes são as mais populares.
Portanto, antes de se comprometer com um caminho de auto-hospedagem, compare os tradeoffs de tamanhos de byte e velocidade / controle.
Quer ver todo o código de amostra e resultados de desempenho? Aqui está o repo .