Hospede Google Fonts localmente para melhores Core Web Vitals

Hospedagem Local de Google Fonts para Melhorar os Core Web Vitals

À medida que proprietários de sites e desenvolvedores se esforçam para otimizar suas páginas web para uma melhor user experience e melhores classificações nos motores de busca, os Core Web Vitals surgiram como um conjunto crucial de métricas. Google Fonts, embora ofereça uma ampla gama de opções de tipografia, pode por vezes impactar negativamente os Core Web Vitals. Neste artigo, vamos explorar por que hospedar localmente as Google Fonts pode ser benéfico para o desempenho do seu site, particularmente em relação aos Core Web Vitals. Também forneceremos exemplos e melhores práticas para demonstrar como a hospedagem local de fontes pode levar a melhorias significativas.

Entendendo os Core Web Vitals

Core Web Vitals são um conjunto de três métricas de desempenho que medem diferentes aspectos da velocidade de carregamento, interatividade e estabilidade visual de uma página web:

1. Largest Contentful Paint (LCP): LCP mede o tempo que leva para o maior elemento de uma página web (geralmente uma imagem ou bloco de texto) se tornar visível dentro da viewport. Um LCP ideal deve ocorrer dentro dos primeiros 2,5 segundos para garantir uma exibição rápida do conteúdo.

2. First Input Delay (FID): FID mede o atraso entre a primeira interação do usuário com a página (por exemplo, clicar em um botão) e a resposta do navegador a essa interação. Um bom FID deve estar abaixo de 100ms para uma user experience fluida.

3. Cumulative Layout Shift (CLS): CLS mede a quantidade de mudança inesperada de layout que ocorre durante o carregamento da página. Um valor baixo de CLS (abaixo de 0,1) indica uma experiência visual estável, pois os usuários não gostam que o conteúdo mude inesperadamente enquanto estão tentando ler ou interagir com a página.

Impacto das Google Fonts nos Core Web Vitals

As Google Fonts, frequentemente incluídas em páginas web para melhorar a tipografia e o design, podem ter um impacto significativo nos Core Web Vitals, principalmente no Largest Contentful Paint (LCP) e no Cumulative Layout Shift (CLS):

Para a maioria das pessoas com quem converso, essa é uma informação nova. O CDN do Google supostamente é o melhor do mundo. Então, por que o Google Fonts é ruim para a velocidade da página?

1. A stylesheet nunca está no cache do navegador para novos visitantes. O primeiro problema com Google Fonts é que depende de uma stylesheet externa hospedada em fonts.google.com ou fonts.googleapis.com. Esta stylesheet não pode ser reutilizada por diferentes domínios (como muitas pessoas parecem pensar). Isso significa que a stylesheet que bloqueia a renderização nunca é servida a partir do super rápido cache do navegador para visitantes de primeira vez e sempre vai atrasar um pouco a parte de renderização da página. 

2. Requer 2 conexões para 2 novos servidores. O segundo problema é que para baixar o arquivo CSS e os arquivos de fonte precisamos nos conectar a 2 servidores diferentes. Cada conexão inicial a um novo servidor tem uma sobrecarga significativa e leva algum tempo extra. Tempo que poderíamos ter economizado servindo os arquivos a partir da nossa conexão já aberta com o nosso servidor. Para evitar isso, o Google recomenda fazer preconnect com seus domínios. Isso mitiga o problema um pouco, mas ainda está longe de ser perfeito
   

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

3. Você tem controle limitado sobre o atributo font-display. Embora o Google Fonts permita definir o atributo font-display, você só pode defini-lo globalmente. Isso significa que todos os arquivos woff2 receberão a mesma configuração de font-display
   

4. A localização final do arquivo woff2 é desconhecida. Isso significa que não podemos fazer preload das nossas fontes mais importantes. Isso significa que nossos arquivos de fonte entram na fila de download relativamente tarde e provavelmente teremos uma mudança de layout visível causada pelo flash de texto sem estilo (FOUT)

5. Você não tem controle sobre os arquivos de fonte. 

Vantagens de Hospedar Google Fonts Localmente

Hospedar Google Fonts localmente envolve servir os arquivos de fonte a partir dos seus próprios servidores em vez de depender de servidores externos do Google. Esta abordagem pode trazer vários benefícios, particularmente em relação aos Core Web Vitals:

1. Velocidade de Entrega de Fontes Melhorada: Hospedar fontes localmente reduz a dependência de servidores externos, levando a uma entrega de fontes mais rápida e, consequentemente, a uma renderização mais rápida do conteúdo de texto. Esta melhoria pode impactar positivamente o LCP, garantindo que o maior elemento de texto se torne visível mais rapidamente.

2. Redução de Mudanças de Layout: Ao hospedar Google Fonts localmente, você pode controlar como a fonte é carregada e exibida, minimizando as chances de mudanças de layout causadas por atrasos na renderização da fonte. Isso ajuda a melhorar a estabilidade visual geral da sua página web e afeta positivamente o CLS.

Melhores Práticas para Hospedar Google Fonts Localmente

Para otimizar suas Google Fonts hospedadas localmente para um melhor desempenho nos Core Web Vitals, considere implementar as seguintes melhores práticas:

1. Use o Formato WOFF2: Use apenas o formato de arquivo WOFF2, pois oferece melhor compressão e tempos de carregamento mais rápidos, contribuindo para melhores valores de LCP e CLS.

2. Font Subsetting: Para reduzir ainda mais o tamanho dos arquivos de fonte, considere usar font subsetting, que envolve incluir apenas os caracteres necessários para o conteúdo da sua página web. Isso pode levar a um carregamento de fontes mais rápido e melhores Core Web Vitals.

3. Atributo Font-Display Estratégico: Configure o atributo font-display estrategicamente para controlar a renderização do texto durante o carregamento da fonte. O valor "swap", por exemplo, vai acelerar o First Contentful Paint, garantindo que fontes fallback sejam exibidas até que a fonte web esteja totalmente carregada. O valor "optional" vai prevenir mudanças de layout ao nunca trocar o arquivo de fonte. Uma combinação estratégica desses dois frequentemente otimizará tanto o Cumulative Layout Shift quanto o First Contentful Paint.

4. Preload de fontes: Garanta que as fontes estejam disponíveis o mais cedo possível fazendo preload das fontes mais importantes com o mecanismo link preload
   
   

   <link rel="preload" as="font" href="fonts.woff2" crossorigin>

Como hospedar uma Google Font localmente (do jeito certo)

Baixar e hospedar localmente uma Google Font é um processo simples. Tenha em mente que você deve sempre revisar a licença e os direitos de uso da fonte antes de baixá-la e usá-la no seu site ou projetos. Muitas Google Fonts estão disponíveis sob licenças de código aberto, mas algumas podem ter restrições para uso comercial.

Aqui está um exemplo de como baixar e hospedar localmente uma Google Font:

1. Vá ao site do Google Fonts em https://fonts.google.com/.

2. Selecione a fonte que deseja usar e escolha os tamanhos de fonte que deseja incluir. 

3. Na página da fonte, na barra superior, clique no botão 'selected families'. Lá você encontrará o link para a stylesheet hospedada pelo Google. 
   
   

   

4. Copie a URL desta stylesheet e abra no seu navegador. Agora você verá todas as declarações font-face disponíveis para a fonte. 
   
   

   

5. Você pode notar que há mais de 1 arquivo woff2 mesmo tendo usado apenas um arquivo de fonte. Isso acontece porque há um arquivo de fonte diferente para diferentes intervalos de unicode. Para descobrir quais fontes devemos baixar, você deve temporariamente adicionar a stylesheet hospedada pelo Google ao seu site. Use o atalho Ctrl-Shift-I para abrir o Chrome DevTools. Navegue até a aba Network e clique em Font. Agora atualize a página (Ctrl-r) para ver qual fonte é acionada para download.
   
   

6. Encontre o nome deste arquivo de fonte correspondente ao arquivo woff2 na StyleSheet. Perfeito! Agora você sabe qual arquivo de fonte é usado no seu site!
   

7. O próximo passo é copiar a URL completa da fonte e abri-la no seu navegador. Isso acionará o download deste arquivo de fonte. Copie este arquivo para o seu site.
   

8. Copie o CSS da webfont usada no passo 7 e cole na sua stylesheet. Não se esqueça de mudar a URL do CDN do Google para o seu próprio servidor (por exemplo, '/fonts/roboto400.woff2')

9. Faça preload da fonte (se for uma fonte visualmente importante)

Agora você hospedou localmente com sucesso a Google Font de sua escolha. Lembre-se de cumprir os termos de licenciamento da fonte e atribuir a fonte conforme exigido pela licença, se necessário.

Um exemplo real

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font -->
  <link rel="preload" as="font" href="/path/to/google-sans.woff2" crossorigin>
  <style>
    /* Self-hosted Google Sans font with WOFF2 format */
    @font-face {
      font-family: 'Google Sans';
      font-style: normal;
      font-weight: 400;
      src: url('/path/to/google-sans.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Google sans', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a page using the Google-sans with system-ui fallback font.</p>
</body>
</html>