A Web e os navegadores estão evoluindo rapidamente!
Muitas otimizações que fizemos há alguns anos estão desatualizadas ou não são recomendadas.
A entrega do Google Fonts para obter desempenho máximo também mudou recentemente à medida que os navegadores implementaram novos recursos.
Já escrevi uma postagem no blog sobre como otimizar o Google Fonts. Esta postagem é especificamente sobre por que você deve hospedar o Google Fonts por conta própria.
Argumentos de desempenho desatualizados
Argumento: os navegadores já terão o Google Fonts armazenado em cache
Quando você incorpora uma fonte do Google, ele primeiro baixa um arquivo CSS de “fonts.googleapis.com” e, em seguida, baixa os arquivos de fontes mencionados nesse arquivo CSS de “fonts.gstatic.com”.
Apenas os arquivos de fontes baixados de “fonts.gstatic.com” têm um período de cache de 1 ano. O arquivo CSS principal tem apenas 24 horas de vida útil do cache.
“Os navegadores já terão Google Fonts em cache”, sim, mas para servir essa fonte em cache, o navegador precisa baixar um arquivo CSS a cada 24 horasisso também bloqueia a renderização na maioria dos sites!
Se isso não te convenceu o suficiente, aqui está mais um 😉.
Novo “particionamento de cache” em navegadores para privacidade
O Chrome e o Safari implementaram algo chamado “Particionamento de cache” ou “cache de chave dupla”.
Em palavras simples, os arquivos armazenados em cache pelo site A não estarão disponíveis para o site B. Quando um site A baixa um recurso de “example.com/script.js”, armazena-o em cache e outro site B tentar baixar o mesmo arquivo, terá que baixá-lo novamente.
Portanto, uma fonte do Google baixada por um site não estará disponível para outro site no cache do navegador.
Nos bastidores, o navegador usa uma chave para armazenar arquivos em cache. Normalmente, a chave do cache é a URL do arquivo. Mas com o particionamento de cache, a URL do site que solicitou o arquivo também é incluída na chave de cache.
Sem particionamento de cache
Com particionamento de cache
Você pode ler mais sobre particionamento de cache no Chrome aqui: Ganhar segurança e privacidade particionando o cache.
Implementação de particionamento de cache no navegador
✅ Chrome: desde v86 (outubro de 2020)
✅ Safári: desde 2013
🚫 Firefox: a partir da v85 (janeiro de 2021)
Navegadores como Edge, Opera, Brave usam o mecanismo Chromium, então espere esse recurso em outros navegadores em breve.
Além disso, observe que Somente o Chrome e o Safari têm uma participação de mercado de aproximadamente 80% em navegadores.
Argumento: o Google Fonts oferece fontes otimizadas com base no dispositivo/navegador
Sim, o Google oferece fontes diferentes com base no agente do usuário.
Mas contanto que você entregue o Google Font auto-hospedado em No formato “woff2”, você tem como alvo aproximadamente 96% dos navegadores.
Apenas o Internet Explorer e o Opera Mini não suportam “woff2”. Nesse caso, você pode adicionar “eot” como alternativa e ainda obtenha todas as vantagens da auto-hospedagem.
Aqui está o código de exemplo:
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ }Argumento: Google CDN é mais rápido
Se o seu site tiver uma boa hospedagem ou tiver CDN e tiver HTTP/2 habilitado, a auto-hospedagem terá um desempenho melhor do que o Google CDN. Porque o navegador não precisa fazer pesquisas extras de DNS, handshakes SSL, etc. e reutilizar a conexão HTTP/2 existente.
Quando você auto-hospeda e insere o Google Fonts, o navegador pode começar a baixar a fonte imediatamente após receber o primeiro HTML. Você também pode aproveitar a funcionalidade de pré-carregamento.
Sia Karamalegos escreveu um ótimo post sobre como comparar a diferença: Tornando as fontes do Google mais rápidas⚡.
É legal auto-hospedar fontes do Google?
“Sim. As fontes de código aberto no catálogo do Google Fonts são publicadas sob licenças que permitem seu uso em qualquer site, seja ele comercial ou pessoal.”
Fontes do Google – Perguntas frequentes
Na verdade, o próprio Google recomenda a auto-hospedagem do Google Fonts para controle completo, como o pré-carregamento. É mencionado em um de seus vídeos no YouTube:
Como auto-hospedar fontes do Google no WordPress
Meu Deus, meu Deus O plugin pode auto-hospedar Google Fonts. Mas achei difícil de usar. Temos que pesquisar as fontes ou detectar automaticamente abrindo as páginas manualmente.
Se você estiver usando FlyingPress, ative “Otimizar fontes do Google”. Ela cuidará da auto-hospedagem, combinação e tudo mais para você!
